通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新
XmlHttpRequest使我们可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户UI
一、ajax的优点和缺点
优点:1.页面无刷新,用户的体验非常好
2.ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担,
减少不必要的数据往返,减少了带宽占用
3.基于标准化的并被广泛支持的技术,兼容性好
缺点:
1.ajax不支持浏览器back按钮
2.ajax暴露了与服务器交互的细节
3.对搜索引擎的支持比较弱
二、ajax请求总共有多少种callback
一共是八种:
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException
三、XMLHttpRequest对象的兼容性
IE:
new ActiveXObject("Microsoft.XMLHTTP");
标准浏览器:
new XMLHttpRequest();
四、XMLHttpRequest对象的常用方法和属性
open("method","url")建立对服务器的调用
send()方法,发送具体请求,get请求对应null
abort()方法,停止当前请求
readyState属性
0, 1, 2, 3, 4
responseText 属性 服务器的响应,表示为一个文本
responseXML 属性 服务器的响应,表示为XML
status 服务器的HTTP状态码
200对应ok
400对应not found
五、readyState状态值说明
0:请求未初始化(not init)
1:服务器连接已建立 【对应open()方法】(connection)
2:服务器已接收请求 【对应send()方法】(has received)
3:请求处理中 前端处于waiting状态,服务器正在处理数据(waiting)
4:请求已完成,且响应已就绪(already)
六、ajax过程原生js代码
function createXmlHttp(){
var xmlHttp = null;
if(window.ActiveXObject){//IE浏览器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
function readyStateChange(xmlHttp){
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
console.log(xmlHttp.responseText);
}else{
console.log("fail");
}
}
}
function doGet(url){
var xmlHttp = createXmlHttp();
xmlHttp.open("GET", url, true);//这里的true表示 异步传输
xmlHttp.send(null);
readyStateChange(xmlHttp);
}
function doPost(url,data){
var xmlHttp = createXmlHttp();
xmlHttp.open("POST", url, true);//这里的true表示 异步传输
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(data);
readyStateChange(xmlHttp);
}
doGet('ajax.json');
七、jquery中ajax的使用方法
$.ajax({
type: "POST",
url: "getInfo.php",
data: {name: "rgy"},
dataType: "json",
timeout: 10000,
success: function(data) {
console.log(data);
},
error: function() {
console.log("fail");
}
});