谈谈 ajax 工作过程那点事

今天看一个面试题 原生Ajax工作原理以及实现过程

• ajax:
  ajax 的全称是Asynchronous JavaScript and XML（异步的JavaScript 和 XML）
  Ajax 相当于在用户和服务器之间加了一个中间层 使用户操作和服务器响应异步化 之前传统的是 一个请求 要用户把所有数据都提交个服务器 其实一些数据验证和数据处理等是可以交给Ajax引擎自来来做 只要确定需要从服务器读取新数据再由Ajax引擎代为向服务器提交请求

• ajax 局部刷新
  ajax利用XMLHttpRequest 对象与服务器通讯 从服务器获得数据 然后由js操作dom来更新页面

• XMLHttpRequest属性

  1. onreadystatechange 每次状态改变时候触发事件
  2. readyState 表示对象状态
  3. responseText 服务器响应文本内容
  4. Status 服务器返回的http状态码
  5. statusText 服务器返回状态文本信息

• 请求服务器过程的5种状态
  1. 0 表示请求服务器之前
  2. 1 表示打开 open() 方法
  3. 2 表示向服务器发送 send方法
  4. 3 表示服务器响应过程还没有结束
  5. 4 表示服务器响应完成
• ajax 优点
  1. 页面局部刷新 在页面内与服务器通讯
  2. 使用异步方式与服务器通信 不需要打断用户操作
  3. 服务器的一些负担转到客户端
  4. 客户端不用从后台拉取所有数据 按需取数据

• ajax 缺点
  ajax干掉了back按钮 对浏览器后退机制破坏

• ajax 请求过程

  1. 创建XMLHtppRequest 对象

     Ie7以及以上都支持原生XHR对象 直接可以 new XMLHttpRequest()
     Ie6之前的 XHR是通过ActiveX对象来实现的 new ActiveXObject('Microsoft.XMLHTTP')

  2. 连接服务

     open() 函数三个参数 请求方式 请求地址 是否异步

  3. 发送数据

     open() 发送数据 get post 将数据提交到服务器

  4. 接收

     接收到响应后 响应数据会自动填充XHR对象
     responseText 响应放回主体内容 为字符串类型
     responseXML 响应类型 text/xml application/xml
     status 响应HTTP状态吗
     statusText HTTP状态码说明

• code 封装

newajax({
    url: 'XXX',
    type: 'GET'
    dataType: 'json'
    success: function (response, xml){

    },
    fail: function (response, xml){

    }
})
 function newajax(options) {
     if (options.data) {
         var body = options.data
     } else {
         var body = ''
     }
     // 按照上述步骤来
     //1. 创建XMLHttpRequest
     if(window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest()
     } else {
        var xhr = new ActiveXOject('Microsoft.XMLTHHP')
     }
     // 2.链接发送
     if(options.type == 'GET') {
         xhr.open('GET', options.url, true)
         xhr.send(null)  //content 不发送数据
     } else if (options.type == 'POST') {
        xhr.open('POST', options.url, true)
        xhr.setRequestHeader("Content-Type", "XXX"); //设置内容类型
        xhr.send(body)
     }

     //接收  onreadystatechange 处理事件
     xhr.onreadystatechange = function  () {
        console.log(xhr.readyState)
         if(xhr.readyState == 4) {
             var status = xhr.status
             if(status >=200 && status<300) {
                 options.success(xhr.responseText, xhr.responseXML)
             } else {
                 options.fail(xhr.responseText, xhr.responseXML)
             }
         }
     }
 }复制代码

就这些了 最核心的就是XHR对象 里面一个属性 可以去了解下

参考阅读:
Ajax的工作原理