1，异步请求的方法步骤:
1,推断当前用户支持的浏览器类型
XMLHttpRequest:推断是否支持非IE浏览器,相应的创建方法:xmlhttp = new XMLHttpRequest();
window.ActiveXObject:推断是否支持IE浏览器,相应的创建方法:xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
2,开辟连接创建路径
xmlhttp.open(參数一,參数二,參数三);
參数一:请求的方式get post
參数二:请求路径
參数三:表示是否是异步请求,true(是),false(不是)
3,创建绑定方法推断请求的状态
onreadystatechange:假设每一次请求的状态改变的时候就会触发该函数
3-1推断是否是状态4和连接正常200
凝视:readyState推断请求状态是否到4
status:推断响应的状态码是否正常
3-2,获取后台传过来的数据responseText
var msg = xmlhttp.responseText;
3-3,把数据写入指定的容器内
document.getElementById('span').innerHTML=decodeURI(msg,"UTF-8");
4,发送请求
xmlhttp.send(參数);get请求时參数为null,post请求时
异步请求的5个状态:
0表示请求未连接
1代表与server已连接
2代表server已接受数据
3正在处理数据
4处理完毕
2,异步请求方法
<script type="text/javascript">
var xmlhttp;
function getMsg(){
//支持非IE浏览器
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){//支持IE浏览器
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//get请求
//xmlhttp.open("get","AjaxServlet?text=异步请求&num="+Math.random(),true);
//post请求
xmlhttp.open("post","AjaxServlet",true);
//200代表请求正常,404:路径错误,500:服务端代码有错误
//onreadystatechange:假设每一次请求的状态改变的时候就会触发该函数
xmlhttp.onreadystatechange = function(){
//readyState推断请求状态是否到4
//status:推断响应的状态码是否正常
if(xmlhttp.readyState==4 && xmlhttp.status==200){
//获取后台传过来的数据responseText
var msg = xmlhttp.responseText; document.getElementById('span').innerHTML=decodeURI(msg,"UTF-8");
}
}
//若为post请求时要设置请求头信息
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
xmlhttp.send("text=sa123&num=123");
//若为get请求时
//xmlhttp.send(null);
}
</script>
3,自己封装的异步请求的类(Ajax.js)
/**
* 封装Ajax异步请求的方法
*/
function $_Ajax(method,url,data,type,callback){
/**
* method:请求类型(get,post)
* url:请求路径
* data:请求參数
* type:返回数据类型(text,xml)
* callback:回调函数
*/
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
xmlhttp.open(method, url, true);
/**
* 由于不同的页面调用该方法的处理的方式不同
* 所以要传一个回调函数,谁调用谁去实现
*/
xmlhttp.onreadystatechange=function(){
//假设请求完毕而且没有错误就运行该if语句中的代码
if(xmlhttp.readyState==4 && xmlhttp.status==200){
//推断用户要求返回数据类型
if(type=="text"){
var text = xmlhttp.responseText;
//回调函数
callback(text);
}else if(type=="xml"){
var xml = xmlhttp.responseXML;
callback(xml);
}
}
}
//假设用户的请求是post请求
if(method=="post"){
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
}
//发送请求
xmlhttp.send(data);
}