Ajax是什么
Ajax的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
Ajax是一种技术方法，但并不是一种新技术。
Ajax在无需重新加载网页的情况下，能够更新部分网页。
Ajax依赖的是现有的CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求和接收HTTP响应
用一句话总结Ajax和XMLHttpRequest的关系就是：我们使用XMLHttpRequest对象发送一个Ajax请求。
Ajax的使用
GET方式
var xhr = new XMLHttpRequest();
xhr.open("GET","https://easy-mock.com/mock/5aec212c4fb0ed3c601b0032/example/ajax-get?name=Henry",true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log("这是GET方式："+xhr.responseText);
}
}
};
xhr.send();
POST方式
var xhrPost = new XMLHttpRequest();
xhrPost.open("POST","https://easy-mock.com/mock/5aec212c4fb0ed3c601b0032/example/ajax-post",true);
xhrPost.onload = function(){
if((xhrPost.status >=200 && xhrPost.status < 300) || xhrPost.status == 304){
console.log("这是POST方式："+xhrPost.responseText);
}
};
xhrPost.send("name=Henry");
readystatechange事件会在document对象上的readyState属性的属性值发生变化时触发。当document文档正在加载时,readyState属性值为"loading"。当文档结束渲染但在加载内嵌资源时，返回"interactive"，并引发DOMContentLoaded事件。当文档加载完成时,返回"complete"，并引发load事件。
封装一个Ajax
ajax({
url: "/json.html",
data: {
city: "北京"
},
onsuccess: function(ret){
console.log(ret);
},
onerror: function(){
console.log("服务器异常");
}
})
function ajax(obj){
var url = obj.url;
var type = obj.type || "GET";
var dataType = obj.dataType || "json";
var data = obj.data || {};
var onsuccess = obj.onsuccess || function(){};
var onerror = obj.onerror || function(){};
//将data转换成字符串
var dataStr = [];
for(key in data){
dataStr.push(key+"="+data[key]);
}
dataStr = dataStr.join("&");
//如果type为GET，将dataStr拼接到url中
if(type === "GET"){
url += "?"+dataStr;
}
var xhr = new XMLHttpRequest();
xhr.open(type,url,true);
xhr.onload = function(){
if((xhr.status>=200 && xhr.status<300) || xhr.status==304){
if(dataType === "json"){
onsuccess(JSON.parse(xhr.responseText));
}else{
onsuccess(xhr.responseText);
}
}
}
xhr.onerror = onerror;
if(type === "POST"){
xhr.send(dataStr);
}else{
xhr.send();
}
}
Ajax的优点和缺点
优点
- 页面无刷新，用户体验非常好
- 使用异步方式与服务器通信，具有更加迅速的响应能力
- 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端的闲置能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。Ajax的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担
- 基于标准化并被广泛支持的技术，需要下载插件或者软件
- Ajax可使因特网应用程序更小，更快，更友好
缺点
- Ajax不支持浏览器back按钮
- 安全问题（Ajax暴露了与服务器交互的细节）
- 对搜索引擎支持较弱
- 破坏了程序的异常机制
- 不容易调试
