关于异步请求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代表与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);

}