Ajax技术

Ajax技术的核心是XMLHttpRequest

1、var xhr=new XMLHttpRequest();
2、调用xhr的open方法接受3个参数 准备发送
1、请求的类型2、请求的url3、同步还是异步（false同步）
3、 xhr.send(null); //发送请求 get不需要发送数据 所以填null
console.log(xhr.responseText); 得到请求的相应的文本
console.log(xhr.status); 得到请求的状态

get和post的请求

get一般是url提交请求
post 一般是web表单提交的内容

同步和异步的区别

js将请求设置为异步 就是在open的第三个参数设置为true 这就是异步的标志

addEvent(window,'load',function(){
      var xhr=new XMLHttpRequest();
        //异步操作使用到的onreadystatechange事件
       xhr.onreadystatechange=function(){
           //所有对服务器返回的信息的操作必须在readyState为4之后才可以进行
           if(xhr.readyState==4){
               if(xhr.status==200)
               {
                   console.log(1);
               }
               else{
                   console.log(xhr.err)
               }
           }
       }
      xhr.open('get',"demo.php",true);
       xhr.send(null);
    }
)

http的头信息

http的头信息包括两种：
1、响应头信息 服务器返回的信息 客户端可以获取，但是不可以设置
客户端有两种方法获取响应头信息：
1、获取所有的响应头信息
xhr.getAllResponseHeaders())
2、获取指定的响应头信息
xhr.getResponseHeader(‘Content-Type’)
2、请求头信息 客户端发送的信息 客户端可以设置但是不可以获取
xhr.setRequestHeader(‘MyHeader’, ‘Lee’); //放在 open方法之后， send方法之前
在火狐控制台的网络里可以看到

封装一个ajax函数

function ajax(obj){
    var xhr=new XMLHttpRequest();
    obj.url=obj.url+"?random="+Math.random();
    if(obj.method==="get")
        obj.url+=obj.url.indexOf("?")==-1?+"?"+obj.data:+"&"+obj.data
    obj.data=parms(obj.data);
    if(obj.async===true){
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    obj.success(xhr.responseText);
                }
            }
        }
        xhr.open(obj.method,obj.url,obj.async);
        if(obj.method==="post"){
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(obj.data);
        }else{
            xhr.send(null);
        }
    }
    if(obj.async===false){
        if(xhr.readyState==4){
            if(xhr.status==200){
                obj.success(xhr.responseText);
            }
        }
    }
}

使用

 addEvent(document,'click',function(){
              ajax({
                  method:"get",
                  url:"demo.php",
                  data:{"name":"zwj","age":100},
                  success:function(data){
                      console.log(data);
                  },
                  async:true
              })
          })

注意回调函数的使用

function aa(obj){
    obj.success(11)
}

使用

 aa({success:function(data){
                  console.log(data)
              }})