简述xhr -xhr的基本使用

---

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 调用，从而实现通过代码控制请求与响应，实现网络编程。
本篇到此结束，大家感觉还实用的话，关注或者点个赞都可以，谢谢啦！