Ajax的实现步骤

首先，什么是Aiax？

1. Ajax = 异步JavaScript 和 XML
2. Ajax 用于创建快速动态网页的技术
3. 通过在后台与服务器进行少量数据交换，Ajax 可以使用网页实现异步更新，可以再不重新加载整个网页的情况下对网页的其中一个部分进行更新。

Ajax使用怎么实现

   //1.创建异步调用对象 XMLHttpRequest
    var xml ;
    //  浏览器兼容性
    if(window.XMLHttpRequest){
        xml = new XMLHttpRequest;
    }else{//针对 IE5  IE6
       xml = new ActiveXObject("Micrisoft.XMLHTTP")
    }

    // 2.回调函数
    xhr.onreadystatechange = function(){
        // 请求执行完以后
        if(xhr.readyState == 4){
            //数据请求成功
            if(xhr.status == 200){
                //调用回调函数
                doResponse(xhr);
            }
          }
        }
    // 3.向服务器发送请求
          /*method : 请求方式  get post xml ... 多种请求方式
            url ：请求网址
            async ：是否异步 true(异步)/false(同步) 默认异步 */
    xml.open(method,url,async);
    // 4.发送请求
    xml.send();

    // 5.回调函数
    function doResponse(xhr){
         //...
     }

GET 请求

示例：

xml.open("GET","demo.php",true);
xml.send();

GET请求，一般是要在请求的URL添加信息，这样才会返回你要请求的结果

xml.open("GET",`sudentInfo.php?stuName=${stuName}`,true);
xml.send();

GET请求的特点：

• GET请求可以缓存
• GET请求会保留在浏览器历史记录中
• GET请求可以被收藏为书签
• GET请求有长度限制
• GET请求只用于取回数据

post请求：
示例：

xml.open("POST","demo.php",true);
xml.send();

POST需要设置请求头setRequestHaeder()，然后在send() 方法中规定发送的数据

xml.open("POST","ajax_post.php",true);
     //本人建议 请求头参数还是去复制，很容易写错！！ 本人踩坑过
xml.setRequestHeader("Content-Type','application/x-www-form-urlencoded");
//stuName  stuPwd 是你自己在页面上获取的 stuName 和 stuPwd
xml.send('stuName=' + stuName + '&stuPwd=' + stuPwd);

POST请求的特点：

• POST请求不会被缓存
• POST请求不会被保留在浏览器历史记录
• POST请求不能收藏为书签
• POST请求对数据长度没有限制

GET请求和POST请求利弊：

 GET请求比POST清欠要简单，也快一点，使用也很多，GET请求对数据有现在，在发送大量数据时还是选择POST请求，POST请求也比GET请求更稳定更可靠一点。（这仅仅是在这两者之间的比较）

ajax还有很多种请求方式，这里只说了post 和 get 请求方式。

Ajax中的一些处理
1.服务器响应处理

 responseText 获得字符串形式的响应数据
 responseXML获得XML形式的响应数据

2.同步和异步处理

 同步：
 直接在send() 后面处理返回的数据

 xml.open("GET","demo.php",false)
 xml.send();
 document.getElementById("name").innerHTML = xml.responseText ;

  异步：
  在请求状态改变事件中处理，也就是上面的回调
   xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            // 方式1.调用回调函数
            doResponse(xhr);
            
            //方式2.也可以直接进行，不使用回调
            document.getElementById("name").innerHTML = xml.responseText ;
        }
      }
    }