码迷,mamicode.com
首页 > Web开发 > 详细

关于异步请求AJAX的具体解释

时间:2018-03-28 20:33:05      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:状态   www   head   tis   ==   用户   res   method   open   

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

}

关于异步请求AJAX的具体解释

标签:状态   www   head   tis   ==   用户   res   method   open   

原文地址:https://www.cnblogs.com/zhchoutai/p/8665694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!