简介
Ajax(Asynchronous JavaScript and XML)即异步的JS和XML,本质是使用JS提供的XMLHttpRequest对象异步地向服务器发送请求,并接受响应数据。服务器响应回来的是部分的数据而不是完整的页面,并且可以以无刷新的效果来更改页面中的局部内容。
获取Ajax核心对象:XMLHttpRequset
允许通过 window.XMLHttpRequest来判断浏览器是否支持XMLHttpRequest()。如果值为null的话,说明需要通过ActiveXObject()创建。因此,产生了兼容的代码:
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr的常用属性和方法
1.open() 方法,创建请求
语法为:
open(method,url,isAsyn)
method:string类型;请求方式:get,post
url:string类型;请求地址
isAsyn:Boolean类型;指定采用同步(false)还是异步(true)的方式发送请求
2.readyState属性
当值为4的时候,表示所有的响应都已接收完毕
3.status属性
表示服务器的响应状态码。200表明成功响应所有信息
4.onreadystatechange事件
当 xhr 的 readyState 属性值发生改变的时候,要自动激发的操作
语法为:
xhr.onreadystatechange = function(){
}
5.send() 方法
语法为:
send(body);
body是请求主体,没有请求主体的提交方式,body位置处写null
发送异步请求的步骤
1.创建/获取xhr对象
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
2.创建请求
xhr.open("get","03-testajax.php",true);
3.设置 xhr 的 onreadystatechange 事件,判断readyState 以及 status 的值,并接受响应
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
//接收响应数据
var resText = xhr.responseText;
//对响应数据的处理
$("msg-show").innerHTML = resText;
}
}
4.发送请求
xhr.send(null);