原生Ajax书写

来源：互联网发布：人工智能行业协会编辑：程序博客网时间：2024/05/22 04:54

Js代码    function createXMLHTTPRequest() {                          //1.创建XMLHttpRequest对象                          //这是XMLHttpReuquest对象无部使用中最复杂的一步                          //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码                          var xmlHttpRequest;                       if (window.XMLHttpRequest) {                              //针对FireFox，Mozillar，Opera，Safari，IE7，IE8                             xmlHttpRequest = new XMLHttpRequest();                              //针对某些特定版本的mozillar浏览器的BUG进行修正                              if (xmlHttpRequest.overrideMimeType) {                                  xmlHttpRequest.overrideMimeType("text/xml");                              }                          } else if (window.ActiveXObject) {                              //针对IE6，IE5.5，IE5                              //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中                              //排在前面的版本较新                              var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];                              for ( var i = 0; i < activexName.length; i++) {                                  try {                                      //取出一个控件名进行创建，如果创建成功就终止循环                                      //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建                                     xmlHttpRequest = new ActiveXObject(activexName[i]);                                   if(xmlHttpRequest){                                      break;                                  }                               } catch (e) {                                  }                              }                          }                          return xmlHttpRequest;                   }

2.get请求

    function get(){          var req = createXMLHTTPRequest();          if(req){              req.open("GET", "http://test.com/?keywords=手机", true);              req.onreadystatechange = function(){                  if(req.readyState == 4){                      if(req.status == 200){                          alert("success");                      }else{                          alert("error");                      }                  }              }              req.send(null);          }      }

3.post请求

  function post(){      var req = createXMLHTTPRequest();      if(req){          req.open("POST", "http://test.com/", true);          req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");             req.send("keywords=手机");          req.onreadystatechange = function(){              if(req.readyState == 4){                  if(req.status == 200){                      alert("success");                  }else{                      alert("error");                  }              }          }      }  }

post请求需要设置请求头

4. readyState与status:

readyState有五种状态：

　　0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法；
　　1 (载入)：已经调用open() 方法，但尚未发送请求；
　　2 (载入完成)：请求已经发送完成；
　　3 (交互)：可以接收到部分响应数据；
　　4 (完成)：已经接收到了全部数据，并且连接已经关闭。
如此一来，你应该就能明白readyState的功能，而status实际是一种辅状态判断，只是status更多是服务器方的状态判断。关于status，由于它的状态有几十种，我只列出平时常用的几种：
　　100——客户必须继续发出请求
　　101——客户要求服务器根据请求转换HTTP协议版本
　　200——成功
　　201——提示知道新文件的URL
　　300——请求的资源可在多处得到
　　301——删除请求数据
　　404——没有发现文件、查询或URl
　　500——服务器产生内部错误

0 0