1，异步请求的方法步骤:
XMLHttpRequest:判断是否支持非IE浏览器,对应的创建方法:xmlhttp=newXMLHttpRequest();
window.ActiveXObject:判断是否支持IE浏览器,对应的创建方法:xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
2,开辟连接创建路径
xmlhttp.open(参数一,参数二,参数三);
参数一:请求的方式getpost
参数二:请求路径
参数三:表示是否是异步请求,true(是),false(不是)
3,创建绑定方法判断请求的状态
onreadystatechange:如果每一次请求的状态改变的时候就会触发该函数
3-1判断是否是状态4和连接正常200
注释:readyState判断请求状态是否到4
status:判断响应的状态码是否正常
varmsg=xmlhttp.responseText;
3-3,把数据写入指定的容器内
document.getElementById('span').innerHTML=decodeURI(msg,"UTF-8");
4,发送请求
xmlhttp.send(参数);get请求时参数为null,post请求时
异步请求的5个状态:
0表示请求未连接
1代表与服务器已连接
2代表服务器已接受数据
3正在处理数据
4处理完成
2,异步请求方法
<scripttype="text/javascript">
varxmlhttp;
functiongetMsg(){
//支持非IE浏览器
if(window.XMLHttpRequest){
xmlhttp=newXMLHttpRequest();
}elseif(window.ActiveXObject){//支持IE浏览器
xmlhttp=newActiveXObject("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){
varmsg=xmlhttp.responseText; document.getElementById('span').innerHTML=decodeURI(msg,255)">"UTF-8");
}
}
//若为post请求时要设置请求头信息
xmlhttp.setRequestHeader("Content-type",255)">"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:回调函数
*/
if(window.ActiveXObject){
xmlhttp="Microsoft.XMLHTTP");
}else{
xmlhttp="Msxml2.XMLHTTP");
}
xmlhttp.open(method,191)">因为不同的页面调用该方法的处理的方式不同
*/
xmlhttp.onreadystatechange=//如果请求完成并且没有错误就执行该if语句中的代码
//判断用户要求返回数据类型
if(type=="text"){
vartext=xmlhttp.responseText;
//回调函数
callback(text);
}"xml"){
varxml=xmlhttp.responseXML;
callback(xml);
}
}
}
//如果用户的请求是post请求
if(method=="post"){
xmlhttp.setRequestHeader("application/x-www-form-urlencoded");
}
//发送请求
xmlhttp.send(data);
}
原文链接：https://www.f2er.com/ajax/163111.html