AJAX不是编程语言,而是一种使用现有标准的新方法。是与服务器交换数据在不重新加载页面并更新局部网页的技术。AJAX可以实现异步更新,当服务器的数据返回,用Javascript来更新DOM。
在传统的网站开发中不使用AJAX,则必须重新加载整个页面来更新。浪费了很大的带宽,增加了服务器的压力.
在实际开发中使用AJAX:
xhr对象创建:
var xhr=new XMLHttpRequest();在所有的现代浏览器上均支持XMLHttpRequest对象
var xhr=new ActiveXObject('"Microsoft.XMLHTTP"');只支持低版本IE5,IE6浏览器
xhr发送请求:在发送请求里AJAX提供了两个方法open(),send()两个方法。
xhr.open(method,url,async);
method请求的类型:post或get。url:请求的地址. async是同步(false)还是异步(true)
send请求发送:GET或POST
GET: var xhr=new XMLHttpRequest(); xhr.open("GET","0.php?name=X&age=1",true); xhr.send();
POST: 例如:
application/x-www-form-urlencoded: 在发送前窗体数据被编码为名称/值对。这是标准的编码格式。使用setRequestHeader(header,value)
var xhr=new XMLHttpRequest();
xhr.open("POST","0.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name='X'&age='1'"); 该参数的数据只支持post请求
xhr响应:
responseText 返回字符串形式的响应数据。
responseXML 返回 XML 形式的响应数据。
xhr事件:
onreadystatechange当readyState 属性改变时,就会触发该事件,该事件就会调callback函数
readyState有(0请求未初始化,1服务器连接已建立,2请求已接收,3请求处理中,4请求已完成,且响应已就绪)5个状态
status状态码:200为成功 404未找到
例如实际应用:
xhr.onreadystatechange=function(){
if (xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
}
XMLHttpRequest2.0是XHR的新版本,添加了一些新的属性和方法
onabort() 请求停止
ontimeout() 请求超时
onerrror() 请求报错
onloadend() 请求结束
onloadstart() 在接收到响应数据的第一个字节时触发
onprogress() 在接收响应期间持续不断地触
例如
<script>
var xhr = new XMLHttpRequest();
btn.onclick = function(){
xhr.abort();
}
xhr.onabort = function(){
console.log("请求已终止");
}
xhr.ontimeout = function(){
console.log('请求超时');
}
xhr.timeout = 3000;
xhr.onerror = function(){
console.log("请求报错");
}
xhr.onloadend = function(){
console.log("请求结束");
}
</script>