1.基本概念

  • 浏览器通过XMLHttpRequest对象进行http通信
  • 而平时我们用的请求类似于ajax axios都是基于这个这个所封装的框架
  • 通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容
  • XMLHttpRequest实际上也是js的方法，XMLHttpRequest是一个构造函数（实质是对象）
  • 它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。

举例：一个稍微简单点的请求

  1. let xhr = new XMLHttpRequest();
  2. xhr.open('GET', '/url', true);
  3. xhr.send();

举例：一个完整的请求

  1.  let xhr = new XMLHttpRequest();
  2. // 请求成功回调函数
  3. xhr.onload = e => {
  4.     console.log('request success');
  5. };
  6. // 请求结束
  7. xhr.onloadend = e => {
  8.     console.log('request loadend');
  9. };
  10. // 请求出错
  11. xhr.onerror = e => {
  12.     console.log('request error');
  13. };
  14. // 请求超时
  15. xhr.ontimeout = e => {
  16.     console.log('request timeout');
  17. };
  18. // 请求回调函数.XMLHttpRequest标准又分为Level 1和Level 2,这是Level 1和的回调处理方式
  19. // xhr.onreadystatechange = () => {
  20. //  if (xhr.readyState !== 4) {
  21. //  return;
  22. //  }
  23. //  const status = xhr.status;
  24. //  if ((status >= 200 && status < 300) || status === 304) {
  25. //  console.log('request success');
  26. //  } else {
  27. //  console.log('request error');
  28. //  }
  29. //  };
  31. xhr.timeout = 0; // 设置超时时间,0表示永不超时
  32. // 初始化请求
  33. xhr.open('GET/POST/DELETE/...', '/url', true || false);
  34. // 设置期望的返回数据类型 'json' 'text' 'document' ...
  35. xhr.responseType = '';
  36. // 设置请求头
  37. xhr.setRequestHeader('', '');
  38. // 发送请求
  39. xhr.send(null || new FormData || 'a=1&b=2' || 'json字符串');

2.一些使用方法

请求

get

  1. const xhr=new XMLHttpRequest()
  3. xhr.open(methed,url,async,username,password)   //建立连接
  5. //method：HTTP 请求方法，必须参数，值包括 POST、GET 和 HEAD，大小写不敏感。
  7. //url：请求的 URL 字符串，必须参数，大部分浏览器仅支持同源请求。
  9. //async：指定请求是否为异步方式，默认为 true。如果为 false，当状态改变时会立即调用            onreadystatechange 属性指定的回调函数。
  11. //username：可选参数，如果服务器需要验证，该参数指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
  13. //password：可选参数，验证信息中的密码部分，如果用户名为空，则该值将被忽略。
  16. xhr.send(body);   //利用send方法发送，如果body为空则可以传null或者不传

post

image.png

  1. window.onload = function () {  //页面初始化
  2.     var b = document.getElementsByTagName("input")[0];
  3.     b.onclick = function () {
  4.         var url = "server.php";  //设置请求的地址
  5.         var xhr = createXHR();  //实例化XMLHttpRequest 对象
  6.         xhr.open("POST", url, false);  //建立连接，要求同步响应
  7.         xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded');  //设置为表单方式提交
  8.         xhr.send("callback=functionName");  //发送请求
  9.         console.log(xhr.responseText);  //接收数据
  10.     }
  11. }

使用 setRequestHeader() 方法设置请求消息的内容类型为“application/x-www-form-urlencoded”，它表示传递的是表单值，一般使用 POST 发送请求时都必须设置该选项，否则服务器无法识别传递过来的数据。

响应

响应状态

首先xhr是一个异步响应的对象，而他有个属性 readyState 可以实时跟踪异步响应状态
参数对应值如下：
image.png

有这么个属性onreadystatechange: Function - 当 readyState 属性改变时会调用它。

建议响应状态与http返回的状态码同时配合检测，结果值会更为准确
image.png

中止请求

image.png

响应数据

（返回的数据可以设置响应格式）
image.png
在实际应用中，一般将格式设置为 XML、HTML、JSON 或其他纯文本格式。具体使用哪种响应格式，可以参考下面几条原则。

  • 如果向页面中添加大块数据，选择 HTML 格式会比较方便。
  • 如果需要协作开发，且项目庞杂，选择 XML 格式会更通用。
  • 如果要检索复杂的数据，且结构复杂，那么选择 JSON 格式更加轻便。

获取 XML 数据

  1. <input name="submit" type="button" id="submit" value="向服务器发出请求" />
  2. <script>
  3.     window.onload = function () {  //页面初始化
  4.         var b = document.getElementsByTagName("input")[0];
  5.         b.onclick = function () {
  6.             var xhr = createXHR();  //实例化XMLHttpRequest对象
  7.             xhr.open("GET", "server.xml", true);  //建立连接，要求异步响应
  8.             xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
  9.                 if (xhr.readyState == 4) {  //监听readyState状态
  10.                     if (xhr.state == 200 || xhr.status == 0) {  //监听HTTP状态码
  11.                         var o = document.getElementById("grid");
  12.                         o.innerHTML = xhr.responseText;  //直接插入到页面中
  13.                     }
  14.                 }
  15.             }
  16.             xhr.send();  //发送请求
  17.         }
  18.     }
  19. </script>

优缺点：
在某些情况下，HTML 字符串可能为客户端解析响应信息节省了一些 JavaScript 脚本，但是也带来了一些问题。

  • 响应信息中包含大量无用的字符，响应数据会变得很臃肿。因为 HTML 标记不含有信息，完全可以把它们放置在客户端，由 JavaScript 脚本负责生成。
  • 响应信息中包含的 HTML 结构无法有效利用，对于 JavaScript 脚本来说，它们仅仅是一堆字符串。同时结构和信息混合在一起，也不符合标准化设计原则。

获取js脚本

image.png

  1. <input name="submit" type="button" id="submit" value="向服务器发出请求" />
  2. <script>
  3.     window.onload = function () {  //页面初始化
  4.         var b = document.getElementsByTagName("input")[0];
  5.         b.onclick = function () {
  6.             var xhr = createXHR();  //实例化XMLHttpRequest对象
  7.             xhr.open("GET", "server.xml", true);  //建立连接，要求异步响应
  8.             xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
  9.                 if (xhr.readyState == 4) {  //监听readyState状态
  10.                     if (xhr.state == 200 || xhr.status == 0) {  //监听HTTP状态码
  11.                         var info = xhr.responseText;
  12.                         var o = eval("(" + info + ")" + "()");  //用eval()把字符串转换为脚本
  13.                         console.log(o);  //返回客户端当前信息
  14.                     }
  15.                 }
  16.             }
  17.             xhr.send();  //发送请求
  18.         }
  19.     }
  20. </script>

使用 eval() 方法时，在字符串前后附加两个小括号：一个是包含函数结构体的，一个是表示调用函数的。不建议直接使用 JavaScript 代码作为响应格式，因为它不能传递更丰富的信息，同时 JavaScript 脚本极易引发安全隐患。

补充知识点：eval函数

eval函数会将传入的字符串当作js代码执行，如果传入的字符是表达式，则直接返回undefined，传入的参数不是字符串也会直接返回改参数

获取json字符串

使用 responseText 可以获取 JSON 格式的字符串，然后使用 eval() 方法将其解析为本地 JavaScript 脚本，再从该数据对象中读取信息。
image.png
eval() 方法在解析 JSON 字符串时存在安全隐患。如果 JSON 字符串中包含恶意代码，在调用回调函数时可能会被执行。解决方法：先对 JSON 字符串进行过滤，屏蔽掉敏感或恶意代码。不过，确信所响应的 JSON 字符串是安全的，没有被人恶意攻击，那么可以使用 eval() 方法解析 JSON 字符串。

获取文本信息

image.png

获取头部信息

image.png

3.一些补充

image.png

参考文档：