AJAX学习总结

AJAX学习

1. ajax的概念：局部刷新技术。不是一门新技术，是多种技术的组合。浏览器端的技术。

2. ajax的作用：实现在当前结果页中显示其他请求的响应内容。

3. ajax的使用：基本流程：

   1. 创建ajax引擎对象；
      所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
      var ajax;
      if(window.XMLHttpRequest)//火狐，谷歌
      {
      ajax = new XMLHttpRequest();
      }else if(window.ActiveXObject){//IE
      ajax = new ActiveXObject(“Msxm12.XMLHTTP”);
      }

   2. 复写onreadystatechange函数
      判断ajax状态码，
      判断响应状态码
      获取相应内容
      处理响应内容
      ajax.onreadystatechange = function (ev) {

           if(ajax.readyState == 4)
           {
               if(ajax.status == 200)
               {
                   var result = ajax.responseText;
                   var showDiv = document.getElementById("showMsg");
                   showDiv.innerHTML = result;
               }else if(ajax.status == 404)
               {
                   var showDiv = document.getElementById("showMsg");
                   showDiv.innerHTML = "资源不存在";
               }else if(ajax.status == 500)
               {
                   var showDiv = document.getElementById("showMsg");
                   showDiv.innerHTML = "服务器繁忙";
        }
      

   }
   };
   ```

4. 发送请求。
   get请求:请求直接在url后面。
   ajax.open(“get”,“ajax?name=zhangsan&password=123”);
   ajax.send(null);
   post请求:请求体需要单独发送。
   ajax.open(“post”,“ajax”);
   ajax.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
   ajax.send(“name=spc&age=50”);

5. readyState的值：

   • 0：表示XMLHttpRequest已建立，但还未初始化，这时尚未调用open方法；
   • 1：表示open方法已经调用，但未调用send方法；
   • 2：表示send方法已经调用，其他数据未知；
   • 3：表示请求已经成功发送，正在接受数据；
   • 4：表示数据已经成功接收。