Ajax基础

Ajax简介

Ajax 是 Asynchronous JavaScript and XML的缩写。

Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些 JavaScript 代码而不是 直接发送给服务器。相反，JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。

• Ajax的核心对象
  XMLHttpRequerst对象

  • 获取XMLHttpRequest对象
    function getXhr(){

      //设置一个空变量
      var xhr = null;
      
      //判断是否支持XMLHttpReuqest
      if(window.XMLHttpRequest){//支持，非IE的方式
          
         xhr = new XMLHttpRequest();
         
      }else{//不支持,IE的方式
          
         xhr = new ActiveXObject("Microsoft.XMLHttp")
      }
      
      return xhr;
      
    }
    

  • 属性

    1) readyState 请求状态
    
      0 尚未初始化
      1正在发送请求
      2请求完成
      3请求成功，正在接受数据
      4数据接收成功
    
    2) status 请求响应值
    
      200 表示请求成功
      202 请求被接受但处理未完成
      400 错误的请求
      404 资源未找到
      500 内部服务器错误，如asp代码错误等
    
    3) responseText 服务器返回的文本
    
    4) responseXML 服务器返回的xml，可以当做DOM处理
    

  • 方法
    open(method,url) - 与服务端建立连接

    send() - 向服务器端发送请求
    
    abort() - 取消请求
    
    getAllResponseHeaders()
      得到响应的所有http头
    
    getResponseHeader() 
      获取指定的http头
    
    setRequestHeader()
      指定请求的Http头
    

  • 事件
    onreadystatechange事件
    作用 - 监听服务端的通信状态改变

    当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readystatechange事件

• 实现Ajax的异步交互过程，下面给出一个示例：
  //1. 创建ajax对象
  var xhr = getXhr();

    function getXhr(){
        
        //设置一个空变量
        var xhr = null;
        
        //判断是否支持XMLHttpReuqest
        if(window.XMLHttpRequest){//支持，非IE的方式
           xhr = new XMLHttpRequest();
        }else{//不支持,IE的方式
           xhr = new ActiveXObject("Microsoft.XMLHttp")
        }
        return xhr;
    }
    /*2. 跟服务器建立链接,open第三个boolean可以设置同步交互还是异步交互，默认为true，为异步交互，现在ajax已经慢慢的弃用同步交互
     * 
     * 使用get方式提交数据，要将参数拼到url的后面,并且发送时设置发送内容为null
     */
    var input = document.getElementById("user");
    
    xhr.open("get","myPhp01.php?user="+input.value);
    
    //3. 发送数据,格式为key=value,多个参数用&隔开
    xhr.send(null);
    
    //4. 监听服务器的响应
    xhr.onreadystatechange = function(){
        //当数据接受完毕，以及请求成功时，做处理
        if(xhr.readyState == 4 && xhr.status == 200){
            
        //将响应的内容放到div里
        document.getElementById("content").innerHTML = xhr.responseText;
        }
    }