乐趣区

关于前端:简述xhr-xhr的基本使用

jiezi

XMLHttpRequest API 总结

属性：

  1. readyState xhr 的状态码 4 响应体接管结束
  2. status 获取状态码
  3. responseText 获取响应体，文本格式
  4. responseXML 获取响应体，xml 格局
  5. onreadtstatechange 事件，当 xhr.readyState 属性产生扭转触发
  6. onload 事件，响应接管结束

办法：

  1. open(method, url, async) 设置申请的形式，申请的门路，同步 / 异步
  2. send(requestBody) 发送申请体
  3. setRequestHeader(key, value) 设置申请头
  4. getResponseHeader(key) 获取响应头

申请的形式

onload：不便获取响应的事件

GET

  1. 创立 xhr 对象
  2. 调用 open 办法，设置申请形式和URL
  3. 调用 send 办法，发送
  4. 当申请响应过程完结了（调用了 xhr.onload 事件），通过 responseText 属性接管服务器返回的数据
  5. ajax的 get 申请
 document.getElementById('btn').onclick = function () {
      // 创立 xhr 对象
      let xhr = new XMLHttpRequest()
      // 调用 open 办法，设置申请形式和 URL
      xhr.open('GET', 'http://127.0.0.1:3000/search')
      // 调用 send 办法，发送
      xhr.send()
      // 当申请响应过程完结了（调用了 xhr.onload 事件），通过 responseText 属性接管服务器返回的数据
      xhr.onload = function () {console.log(xhr.responseText)
      }
    }

留神：GET 申请 IE 缓存及解决方案

  • 起因：两次申请的 url 完全一致，第二次申请的时候，IE 不会向服务器再次发申请了，而是应用第一次请返回的后果
  • 解决：让每次申请的 url 不统一，能够加工夫戳参数

POST

  1. 创立 xhr 对象
  2. 调用 open 办法，设置申请形式和URL
  3. 调用 setRequestHeader() 办法，设置 header 头，指定content-type
  4. 调用 send 办法，发送
  5. 当申请响应结束，接管服务器返回的数据
    // 创立 xhr 对象
    let xhr=new XMLHttpRequest()
     // 调用 open 办法，设置申请形式和 URL
    xhr.open('POST', 'http://127.0.0.1:3000/search')
    // 调用 setRequestHeader( )办法，设置 header 头，指定 content-type
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
     // 调用 send 办法，发送
    xhr.send('x=11111')
     // 当申请响应结束，接管服务器返回的数据
    xhr.onreadystatechange=function(){if (xhr.readyState===4 || xhr.status===200) {console.log(xhr.responseText);
      }
    }

根底 get 形式和 post 形式的区别

  1. ajax 的 GET 申请和 ajax 的 post 申请，传递参数的地位不一样
  2. GET申请只能携带大量的参数，POST 申请携带的数据没有限度
  3. 只有 POST 形式的申请才可能上传文件

onreadystatechange 和 readyState

readyState

xhr的 5 种状态

readyState 的值为 4，示意浏览器曾经齐全接管到了服务器返回的数据

readyState 状态形容 阐明
0 UNSENT 代理（XHR）被创立，但尚未调用 open() 办法
1 OPENED open() 办法曾经被调用，建设了连贯。
2 HEADERS_RECEIVED send() 办法曾经被调用，并且曾经能够获取状态行和响应头。
3 LOADING 响应体下载中，responseText属性可能曾经蕴含局部数据。
4 DONE 响应体下载实现，能够间接应用responseText。

onreadystatechange

  • ajax 执行状态产生扭转（当 readyState 的值发生变化的时候）会触发
  • 当接管到的数据发生变化，也会触发该事件
  • 他能够代替 onload 事件

同步与异步

  1. xhr.open() 第三个参数传入布尔值
  2. 作用就是设置此次申请是否采纳异步形式执行，默认为 true 异步，false 为同步

  3. 同步申请

    • ajax 的同步申请，会在 send 办法那里被卡住，什么时候服务器返回数据了，后续代码能力执行，不赞成应用
    • 异步申请
  4. ajax 的异步申请，不会阻塞后续代码执行，赞成应用

兼容

  • IE5、IE6：没有 XMLHttpRequest 对象

    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

总结

Ajax 就是浏览器提供的一套 API，能够通过 JavaScript 调用，从而实现通过代码管制申请与响应，实现网络编程。
本篇到此结束，大家感觉还实用的话，关注或者点个赞都能够，谢谢啦！

退出移动版