AJAX笔记（一）

1. 什么是AJAX?

AJAX (Asynchronous JavaScript And XML 即异步的JavaScript和XML)是一种技术方案，用来实现在不刷新整个页面的情况下，向服务器请求数据，动态的替换页面中展示的数据。

2. AJAX的意义？

• 使浏览器在不刷新页面的情况下，获取服务器响应的数据，提升用户体验
• 由于AJAX请求获取的是数据而不是HTML文档，因此它也节省了网络带宽，减少用户等待时间

3. AJAX如何实现？

AJAX核心依赖的是浏览器提供的XMLHttpRequest对象，这个对象使得浏览器可以发出HTTP请求和接收HTTP响应，我们使用XMLHttpRequest对象来发送一个AJAX请求。

3.1 XMLHttpRequest对象

• XMLHttpRequest对象是浏览器提供的一个API，用来向服务器发送请求并解析服务器响应，在整个过程中，浏览器页面不会被刷新。
• XMLHttpRequest对象属性与方法
  • 属性
    • .readyState: 返回一个 XMLHttpRequest 代理(代理即XMLHttpRequest对象)当前所处的状态。一个 XHR 代理总是处于下列状态中的一个 readyState.png
    • .responseText：包含响应主体返回文本；
    • .responseXML：如果响应的内容类型时text/xml或application/xml，该属性将保存包含着相应数据的XML DOM文档；
    • .status：响应的HTTP状态；
    • .statusText：HTTP状态的说明；
  • 方法
    • .open()：准备启动一个AJAX请求；
    • .setRequestHeader()：设置请求头部信息；
    • .send()：发送AJAX请求；
    • .getResponseHeader(): 获得响应头部信息；
    • .getAllResponseHeader()：获得一个包含所有头部信息的长字符串；
    • .abort()：取消异步请求；
• 事件触发条件 事件触发条件.png

3.2 简单封装一个AJAX

    ajax({
      url:'some.json',
      type:'POST',
      dataType:'text',
      data: {
        name:'Pinger',
        password:'5251314'
      },
      onsuccess: function(ret){
        console.log(ret)
        render(ret)
      },
      onerror: function(){
        showError()
      }
    }) 
    
    function render(data){
      console.log(data.name + data.password)
    }

    function showError(){
      alert('网络出错啦')
    }

    function ajax(opts){
      let url = opts.url,
      type = opts.type || 'GET',
      dataType = opts.dataType || 'json',
      onsuccess = opts.onsuccess || (ret => console.log(ret)),
      onerror = opts.onerror || (() => console.log('出错啦')),
      data = opts.data || {}
      console.log(opts.data)
      let datastr = []
      for(let key in data){
        datastr.push(key +'='+ data[key])
      }
      
      datastr = datastr.join('&')
      console.log(datastr)
      if(type === 'GET'){
        url += '?'+datastr
      }

      //1. 创建一个 XMLHttpRequest对象
      const xhr = new XMLHttpRequest()   
      // 2. 使用open方法，准备启动一个AJAX请求 该方法接受三个参数：xhr.open(请求方式，请求地址，是否为异步请求的布尔值[true为异步，false为同步])
      xhr.open(type,url,true)     
     
      xhr.onerror = onerror
     // 3. 发送AJAX请求 xhr.send()方法，若请求方式为POST，则要在里面传参，GET则不需要
      if(type === 'POST'){
        // xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8"); 
        xhr.send(datastr) 
      }else{
        xhr.send()
      }
    // 4. 处理浏览器响应的数据，当xhr.readyState === 4时，触发load事件
      xhr.onload = function(){     // 
        if((this.status >= 200 && this.status < 300) || this.status === 304){  //status满足对应条件，请求成功，得到返回数据xhr.responseText
          if(dataType === 'json'){
            onsuccess(JSON.parse(this.responseText)) //处理返回的数据
          }else {
            onsuccess(this.responseText)
          }
        }else {
          console.log(this.status)
          onerror() //数据请求失败，调用对应的函数处理
        }
      }
    }

// some.json文件
{
  "name":"hello",
  "password":"654321"
}

参考
你真的会使用XMLHttpRequest吗？
https://juejin.im/post/5a20b1f1f265da432529179c