原生js实现AJAX(二)

来源:互联网 发布:2017 下半年 手机 知乎 编辑:程序博客网 时间:2024/06/06 10:46

原生js实现AJAX(二)

简易的AJAX请求

var u=window.u||{};u.createXHR=function() {    var methods=[      function() {return new XMLHttpRequest();},      function() {return new ActiveXObject(Msxml2.XMLHTTP);},      function() {return new ActiveXObject(Microsoft.XMLHTTP);}    ];    for(var i=0;i<3;i++) {      try {        methods[i]();      } catch(e) {        continue;      }      this.createXHR=methods[i];      return methods[i]();    }    throw new Error("没有找到XHR对象");  };u.ajax=function(options) {    var method=options.method||'GET',            url=encodeURI(options.url),            success=options.success,            failed=options.failed,            data=options.data||null;    var xhr=u.createXHR();//创建XHR对象    xhr.open(method,url,true);//指定请求    xhr.onreadystatechange=function() {      if(xhr.readyState==4) {        if((xhr.status>=200&&xhr.status<300)||xhr.status==304)  {          success(xhr.responseText);//执行成功的回调函数          xhr=null;        }      } else {        if(xhr.status!=200) {          failed(xhr.status);//执行失败的回调函数        }      }    }        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置Content-Type    xhr.send(data);正式发送请求}

HTTP请求的各部分有指定顺序:请求方法和URL首先到达,然后是请求头,最后是请求主体。XMLHttpRequest实现通常直到调用send方法才开始启动网络。
setRequestHeader()方法的调用必须在调用open之后,但在调用send之前,否则它将抛出异常。

目前这段代码只能实现简单的AJAX请求,如GET方式发起请求,在url中携带参数或者使用POST方式,在data中包含请求主体,且必须为’find=pizz&&user=123’的格式才能被后台正常读取。

原创粉丝点击