关于异步请求AJAX的详解

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代表与服务器已连接

2代表服务器已接受数据

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);

}