ajax的封装

mac2025-06-20  7

1、创建ajax 并实例化核心对象 XMLHttpRequest

if(window.XMLHttpRequest){//大部分浏览器 ajax = new XMLHttpRequest(); }else{//IE6、IE5浏览器 ajax = new ActiveXObject("Micorsoft.XMLHttp"); }

2、与服务器建立连接

ajax.open(type,url,true); //模板 ajax.open(type , url ,async); /* *type:标识请求类型(请求方式) get / post *url:请求地址 json的地址 *async 标识 同步或异步 true(异步)/flase(同步) 这个参数可以省略 默认true; * */

3、向服务器发送请求

ajax.send(null);

4、接收服务器的状态显示及onreadystatechange事件

ajax.onreadystatechange=function(){ if(ajax.readystate==4&&ajax.status==200){ var data=JSON.parse(ajax.responseText); //data=JSON.parse();将json字符串转成json对象 //data=JSON.stringify();将json对象转成json字符串 } }

5、onreadystatechange状态

// *****readyState /*状态 名称 描述 0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 1 Open open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。 2 Sent Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。 3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。 4 Loaded HTTP 响应已经完全接收。*/

6、封装好的ajax

function getXHr() { var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{//ie5,6浏览器 browser Object Model BOM xhr=new ActiveXObject("Microsoft.XMLHttp"); } return xhr; ajax.open("get",url,async); ajax.send(null); ajax.onreadystatechange=function () { if(ajax.readyState==4&&ajax.status==200){ var data=JSON.parse(ajax.responseText); //x.success(data); } } } ```
最新回复(0)