关于异步请求AJAX的详解
|
1，异步请求的方法步骤: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:判断响应的状态码是否正常 3-2,获取后台传过来的数据responseText 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){ //获取后台传过来的数据responseText 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); } （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |