1、AJAX 教程_w3cshool

2、AJAX 面试问题

一、什么是ajax？ajax作用是什么？

​ AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

二、Ajax的原理

​ 在用户和服务器之间加了一个中间层( AJAX 引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中关键的一步就是从服务器获得请求数据。

三、Ajax的使用

• Ajax的流程

  • 客户端产生js的事件

  • 创建xhr对象（XMLHttpRequest）

  • 对xhr进行配置（指定该HTTP请求的方法、URL及验证信息）

  • 通过ajax引擎发送异步请求

  • 服务器端接受请求并且处理请求，返回html或xml内容

  • xml调用一个callback()处理响应回来的内容

  • 页面局部刷新

    //1、创建连接 创建Ajax核心对象 XMLHttpRequest（一定考虑兼容性）
    // 前面兼容ie6+，后面兼容ie6-
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
    
    // 2、规定请求的类型、URL 以及是否异步处理请求。例如：xhr.open("GET","test.html",false);
    // method：请求的类型；GET 或 POST
    // url：文件在服务器上的位置
    // async：true（异步）或 false（同步）
    xhr.open(method, url, async)
    
    // 3、向服务器发送请求
    xhr.send(null)
    
    // 4、接受服务器响应数据
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { 
            
        }
    }
    // onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用此方法），一般用于指定回调函数
    // readyState：请求状态readyState一改变，回调函数被调用，它有5个状态
    

    1、注意一
    a、xhr.send(null) 当时POST请求时才使用字符串参数，否则不用带参数。
    b、POST请求一定要设置请求头的格式内容
    

    GET请求
    POST请求

    2、注意二：等待服务响应并渲染页面时（区分同步跟异步两种情况）

    • 同步处理

      xhr.open("GET","info.txt",false);
      
      xhr.send();
      
      // 获取数据直接显示在页面上
      document.getElementById("myDiv").innerHTML = xhr.responseText; 
      

    • 异步处理：要在请求状态改变事件中处理

      xhr.onreadystatechange = function(){
          if (xhr.readyState == 4 && xhr.status == 200) { 
              document.getElementById("myDiv").innerHTML = xhr.responseText;
          }
      }
      

      a、responseText：获得字符串形式的响应数据，responseText获得XML形式的响应数据。

      b、readyState：表明客户端与客户的交互状态过程。

四、readyState的状态码

• 0：UNSENT 未初始化（xhr被创建，但未调用open()方法）
• 1：OPENED open()方法成功调用，建立了连接
• 2：HEADERS_RECEIVED send()方法被调用，并已可以回去状态行和响应头
• 3：LOADING 响应体下载中，responseText属性可能已包含部分数据
• 4：DONE 响应体下载完成，可以直接使用responseText

五、Ajax的优缺点

• 优点：
  • 通过异步模式，提升了用户体验；
  • 优化浏览器和服务器之间的传输，减少不必要的数据往返；
  • Ajax在客户端运行，承担了服务器的部分工作，减少服务器负载；
  • Ajax可以实现局部刷新。
• 缺点：
  • 安全问题，Ajax暴露了与服务器交互的细节；
  • 对搜索引擎的支持比较弱；
  • 不容易调试；
  • ajax不支持浏览器back按钮（ajax干掉了back按钮，即对浏览器后退机制的破坏）