原生AJAX

1、Ajax
   Asynchronous Javascript And Xml
   
  01 异步的JavaScript 和Xml
  核心：异步的Javascript对象 XMLHttpRequest
  IE 5.5、6：ActiveXObject("Microsoft.XMLHttp")
  IE7,8,9..chrome FireFox：newXMLHttpRequest()
  
  if(window.XMLHttpRequest){
    //该浏览器支持XMLHttpRequest 可以直接new
  }else{
    //创建ActiveXObject("Microsoft.XMLHttp");
  }

封装测试：

<script>
  function createXhr(){
     var xhr=null;
     if(window.XMLHttpRequest){
          xhr=new XMLHttpRequest();
     }else{
         xhr=new ActiveXObject("Microsoft.XMLHttp");
     }
      return xhr;
  }

  function testXhr(){
       var xhr=createXhr();
       window.alert(xhr);
  }
  <button onclick="testXhr()">测试</button>
</script>

2、方法
   1.open(method,url,asyn)
     anyn:boolean类型值，表示是同步(false)还是异步(true)
     提交，默认true
   2.send(body)
     发送请求，body是请求体
     当请求方式为get的时候，body必须为null
     当请求方法为post的时候，body为具体请求提交的数据，格式为
     "key=value&key1=value&key2=value2"
     "name=zhangsan&age=18&gender=male"
   3.setRequestHeader()
     指定请求消息头
     什么时候用？当请求方式为post时，必须使用
     setRequestHeader重新设置请求消息头，否则请求数据获取不到
   4.abort()
     取消请求
   5.getAllResponseHeaders()
     获取所有响应消息头
   6.getRequestHeader()
     获取指定的响应消息头


3、属性
   1、onreadystatechange
      当准备状态改变的时候，要调用的函数(回调函数)是谁
   2、readyState
      请求的请求状态，请求状态必为以下5种状态之一
      0：尚未初始化
      1：初始化完成，正在发送请求
      2：请求完成
      3：正在接受响应数据
      4：xhr数据接收(响应)成功
      注意：readyState为4的时候，可以处理响应数据
   3、status
      由服务器返回的状态码
      200：请求成功
      404：资源未找到
      500：服务器内部错误，如hph代码写错了...


      注意：完整的判断xhr是否与服务器进行成功的请求响应必须是：
      xhr.readyState==4 && xhr.status==200
   4、responseText
      服务器返回的文本
   5、responseXML
      服务器返回的xml文本


4、发送异步请求的步骤
   1、获取(创建)Ajax对象：获取XMLHttpRequest对象
   2、创建请求：调用xhr的open方法
   3、设置回调函数：指定xhr的onreadystatechange事件
   4、方法请求
案例：如下

 

用户名称<input type="text" id="txtName">
<span id="txtNameTip">*</span>
<script>
  function createXhr(){
     if(window.XMLHttpRequest){
         return new XMLHttpRequest();
     }else{
           return new ActiveXObject("Microsoft.XMLHttp");
      }
   }


$(document).ready(function(){
         $("#txtName").blur(function(){
          var xhr=createXhr();
          var name=$("#txtName").val();
                //get的方法
          // var url="chechname.php?name="+name;
         // xhr.open("get",url,true); 
         //post的方法
          var url="chechname.php";
         xhr.open("post",url,true);
         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//消息头
         xhr.onreadystatechange=function(){
             if(xhr.readyState==4&&xhr.status==200){
                  var resText=xhr.responseText;
                  $("#txtNameTip").html(resText);
          }
    }
     //xhr.send(null);
         xhr.send("name="+name);
  });
});


</script>

```
5、请求提交方式
   1、get--->http://url/aaa.php?name=abc&age=18&gender=male
   php:$_REQUEST["name"]
   2、post
   xhr.open("post",url,true);
   xhr.send("name=zs&age=18&gender=male");
   
   注意：必须使用setRequestHeader()显示更改
   Content-Type消息头的值为
   application/x-www-form-urlencoded




6、表单提交数据的Content-Type 请求消息头
   <form enctype=""></form>
   application/x-www-form-urlencoded(默认)
   multipart/form-data


5、XML解析
   1.XML解析器
     将XML文档或文本转换成XML DOM对象。
   2.解析XML文档
     主要通过XMLHttpRequest对象完成，responseXML属性
     可将文档直接转换成XML DOM
   方法：
     xmlDom.getElementById("id");
     xmlDom.getElementsByTagName("tagName")
     xmlDom.getElementsByName("name")
     xmlDom.getElementsByClassName("classname")
   
   属性：
      childNodes:获取当前节点下的子元素
      childred:获取当前节点下的元素节点
      nodeValue:获取某一节点下的元素节点
      nodeType:节点类型
         1：元素节点
         2：属性节点
         3：文本节点
     nodeName:获取节点名称
     getAttribute(""):获取指定属性值

 

 <script>
     function createXhr(){
    if(window.XMLHttpRequest){
      return new XMLHttpRequest();
    }else{
        return new ActiveXObject("Mircosoft.XMLHttp");
     }
  }


     /**
      * 解析XML文档
      */
   function getXml(){
     var xhr=createXhr();
     xhr.open("get","Person.xml",true);
     xhr.onreadystatechange=function(){
         if(xhr.readyState==4&&xhr.status==200){
          var xmlDom=xhr.responseXML;
             //console.log(xmlDom);
          //获取文档中所有的user节点
             var users=xmlDom.getElementsByTagName("user");
                 for(var i=0;i<users.length;i++){
                 var user=users[i];
                //获取user的节点名称以及id属性值
              var nodeName=user.nodeName;
              var id=user.getAttribute("id");
                 console.log("节点名称:"+nodeName+",id:"+id);
              for(var j=0;j<user.childNodes.length;j++){
                    var child=user.childNodes[j];
                     if(child.nodeType==1){
                  //刷选元素节点
                     console.log(child.nodeName+":"+child.firstChild.nodeValue);
                     }
                }
              }
          
          }
     }
       xhr.send(null);
     }
   window.onload=function(){
     getXml();
   }


   </script>

比较全面的ajax教程