AJAX是什么

AJAX是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

创建AJAX请求的步骤

window.onload=function(){
   var oBtn = document.querySelector("button");
   oBtn.onclick = function() {
      //1.创建一个异步对象
      var xmlhttp;
      if(window.XMLHttpRequest){
         xmlhttp=new XMLHttpRequest();
      }else{
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//兼容IE5和6
      }
      //2.设置请求方式和请求地址
      /*
            method:请求的类型 GET或POST
            rl:文件在服务器上的位置
           async:true(异步) 或 false(同步) 
           AJAX的意义就是异步，所以只填true
         */
      xmlhttp.open("GET","03-AJAX_1.php",true);
      //3.发送请求
      xmlhttp.send();
      //4.监听状态的变化
      xmlhttp.onreadystatechange=function(){
         /*状态变化的四个代号
                0：请求未初始化
                1：服务器连接已建立
                2：请求已接收
                3：请求处理中
                4：请求已完成，且响应已就绪
            */
         /*HTTP状态码
               200<=状态码<300或状态码==304均算成功
             */
         f(xmlhttp.readyState == 4){
            //表示是否请求成功
            if(xmlhttp.status>=200&&xmlhttp.status<300||xmlhttp.status==304){
               //5.处理返回的结果
               console.log(xmlhttp.responseText);
            }
            else{
               console.log("没有接受到服务器返回的数据");
            }
         }
      };
   };
}
复制代码

IE中的兼容

//IE中不支持XMLHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//兼容IE5和6
}
//在GET请求方式中，IE会把同一个URL当作一种返回结果，
//不会因服务器内容变化而实时变化，解决方法：不停变化url
    //日期(推荐)
xmlhttp.open("GET","03-AJAX_1.php?t="+(new Date).getTime(),true);
    //随机数
xmlhttp.open("GET","03-AJAX_1.php?t="+Math.random(),true);
复制代码

封装AJAX

//myAjax.js
function objToStr(obj){
   //将对象中的键值对转换为 key=value&key=value... 格式
   var res=[];
   obj.time=(new Date).getTime();
   for(var key in obj){
      //将url中的中文转码为url所需格式
      //运用encodeURIComponent方法
      //url中只可以出现字母/数字/下划线/ASCII码
      res.push(encodeURIComponent(key) +"="+ encodeURIComponent(obj[key]));
   }
   return res.join("&");
}
//type: 请求类型 "get"或 "post"
//url: PHP文件路径
//data: 发送给服务器的信息 封装成对象发送
//timeout: 请求超时时间(毫秒)
//success: 回调函数 若请求成功 则执行
//error: 回调函数 若请求失败 则执行
function ajax(option){
   //0.将对象转换为字符串
   //1.创建一个异步对象
   var xmlhttp;
   var str=objToStr(option.data);
   var timer;
   if(window.XMLHttpRequest){
      xmlhttp=new XMLHttpRequest();
   }
   else{
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//兼容IE5和6
   }
   //2.设置请求方式和请求地址

   //method:请求的类型 GET或POST
   //url:文件在服务器上的位置
   //async:true(异步) 或 false(同步) 
   //AJAX的意义就是异步，所以只填true

   if(option.type.toLowerCase()=="get"){
      xmlhttp.open("GET",option.url+"?"+str,true);
      //3.发送请求
      xmlhttp.send();
   }
   else if(option.type.toLowerCase()=="post"){
      xmlhttp.open("POST",option.url,true);
      //注意点：以下代码必须放到open和send之间
      xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")
      //3.发送请求
      xmlhttp.send(str);
   }
   //4.监听状态的变化
   xmlhttp.onreadystatechange=function(){
      /*状态变化的四个代号
            0：请求未初始化
            1：服务器连接已建立
            2：请求已接收
            3：请求处理中
            4：请求已完成，且响应已就绪
        */
      /*HTTP状态码
            200<=状态码<300或状态码==304均算成功
        */
      if(xmlhttp.readyState == 4){
         //请求完成 清除中止
         clearInterval(timer);
         //表示是否请求成功
         if(xmlhttp.status>=200&&xmlhttp.status<300||xmlhttp.status==304){
            //5.处理返回的结果
            option.success(xmlhttp);
         }
         else{
            option.error(xmlhttp);
         }
      }
   };
   //设置超时中止
   if(option.timeout){
      timer=setInterval(function(){
         console.log("中断请求");
         xmlhttp.abort();
         clearInterval(timer);
      },option.timeout);
   }
}
复制代码

jQuery中的AJAX

$.ajax({
   type:"get",
   url:"03-AJAX_1.php",
   data:"name=wc&face=noenemy",
   success:function(x){
      console.log(x);
      console.log("请求成功");
   },
   error:function(){
      console.log("请求失败");
   }
});
复制代码

通过AJAX返回的数据一般用XML和JSON（体积小，常用）

XML

<!--  fileNmae: Info.xml  -->
<?xml version='1.0' encoding='UTF-8'?>
<!--XML开头必写-->
<person>  <!--XML根部 随意取名-->
<name>王灿</name>  <!--XML内容 随意取名-->
<age>19</age>
</person>
复制代码

//在PHP文件中获取XML前，需要以下代码，防止乱码
header("content-type:text/xml;charset=utf-8");
//打印获得XML文档内容
//在JS中使用时，通过 异步对象.responseXML 访问
//再通过标签名获取元素
echo file_get_contents("info.xml");
复制代码

JSON

{
   "name":"volcano",
   "age":"19"
}
复制代码

//打印获得JSON内容
//在JS中使用时，通过 异步对象.responseText 访问
//再通过原生JS工具类JSON中的方法，JSON.parse(json)转化为对象访问
echo file_get_contents("info.json");
复制代码