了解XMLHttpRequest

hqman 发布于2019-08-21 16:59 / 1538人阅读

摘要：设置该值能够改变响应类型。响应的状态状态说明。可通过检测变化状态发生变化时，函数被回调成功完成判断响应结果成功，通过拿到响应的文本失败，根据响应码判断失败原因请求还在继续当前请求的活动阶段。调用方法，但尚未收到响应。收到部分响应数据。

前言

最近与后端联调，后端问能不能发送get请求时，把请求参数放入请求体中，HTTP GET 请求在请求体中带参数的问题

ajax介绍

AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。

function success(text) {
    var textarea = document.getElementById("test-response-text");
    textarea.value = text;
}

function fail(code) {
    var textarea = document.getElementById("test-response-text");
    textarea.value = "Error code: " + code;
}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
request.open("GET", "/api/categories");
request.send();

alert("请求已发送，请等待响应...");

XMLHttpRequest对象 Attributes

参数	类型	描述
onreadystatechange	Function	一个JavaScript函数对象，当readyState属性改变时会调用它。回调函数会在user interface线程中调用
readyState	unsigned short	5种状态
response	varies	响应实体的类型由 responseType 来指定，可以是 ArrayBuffer， Blob， Document， JavaScript 对象 (即 "json")，或者是字符串。如果请求未完成或失败，则该值为 null。
responseType	DOMString	设置该值能够改变响应类型。就是告诉服务器你期望的响应格式。1."" (空字符串) 2."arraybuffer"（ArrayBuffer） 3."blob"（Blob）4."document"（Document）5."json"（JavaScript 对象，解析自服务器传递回来的JSON 字符串。） 6."text" （字符串）
responseXML	responseXML Document?	本次请求的响应是一个 Document 对象，如果是以下情况则值为 null：请求未成功，请求未发送，或响应无法被解析成 XML 或 HTML。当响应为text/xml 流时会被解析。当 responseType 设置为"document"，并且请求为异步的，则响应会被当做 text/html 流来解析。只读. 注意: 如果服务器不支持 text/xml Content-Type 头，你可以使用 overrideMimeType() 强制 XMLHttpRequest 将响应解析为 XML。
status	unsigned short	该请求的响应状态码 (例如, 状态码200 表示一个成功的请求).只读.
statusText	DOMString	可以在 upload 上添加一个事件监听来跟踪上传过程。
withCredentials	boolean	表明在进行跨站(cross-site)的访问控制(Access-Control)请求时，是否使用认证信息(例如cookie或授权的header)。默认为 false。注意: 这不会影响同站(same-site)请求.

  // 现代浏览器
  var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

XHR用法

使用XHR对象时，要调用的第一个方法是open(), 接受3个参数（"get", "post" ....），请求的地址url，表示是否异步发送请求的布尔值。

  xhr.open("get", "/advTest", false); // 并不会真正发送请求，而只是启动一个请求以备发送

跨域相关

要发送特定请求需要调用send()方法：

  xhr.open("get", "/advTest", false); // 并不会真正发送请求，而只是启动一个请求以备发送
  xhr.send(null);

xhr.send(null) send()方法必须接收一个参数，即要作为请求主体发送的数据，如果不需要发送则必须发送null,因为这个参数对浏览来说是必须的。调用send()之后请求被发送至服务器。

同步

当第三个为false时发送同步请求，JavaScript代码会等到服务器响应之后在继续执行。
当收到响应后，响应的数据会自动填充XHR对象的属性，相关属性如下

responseText: 作为响应主体被返回的文本

responseXML: 如果响应的内容是 "text/xml" 或 "application/xml",则这个属性中将保存包含着响应数据的XML DOM 文档。

status: 响应的HTTP状态

statusText: HTTP状态说明。

异步

同布发送请求当然没有问题，但多数情况下，我们还是要发送异步请求，才能让js继续执行而不必等待响应。可通过检测readyState变化

request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

readyState当前请求的活动阶段。

0: 请求未开始。未调用open();

1: 启动。调用open()方法，但未调用send()方法。

2：发送。调用send()方法，但尚未收到响应。

3：接收。收到部分响应数据。

4：完成。收到全部响应数据，可在客户端使用。

xhr.abort(); -> xhr停止触发XHR对象

HTTP头部信息

每个http请求和响应都会带有相应的头部。

Accept: 浏览器能处理的内容类型

Cookie: 单前页面设置的任何Cookie

Host: 发出请求的页面所在的域

Referer：请求页面发出的URL

User-Agent：浏览器用户代理字符串
等等。。。

自定义请求头需在open()以后，send()之前发送。

xhr.open("GET", "/api/categories");
// 自定义请求头部信息
xhr.setRequextHeader("myHeader", "myValue");
xhr.send();

getResponseHeader("XX") 获取请求头中特定字段
getAllResponseHeader("XX") 获取请求头中所有字段

GET请求

GET请求常用于向服务器查询信息。添加请求参数于url之后。对于传入open()方法的URL末尾的查询字符的名称和值必须使用encodeURLComponent() 进行编码。

xhr.open("get", "test.php?name=程心&age=24&other=AA", true); // 准备异步请求
// 添加参数工具方法
fucntion addURLParams(url, name, value) {
  url += (url.index("?") == -1 ? "?" : "&");
  url += encodeURLComponent(name) + "=" + encodeURLComponent(value);
  return url; 
}

POST请求

POST常用于向服务器发送需要保存的请求。 POST请求应该将数据作为请求体的主体提交，而GET传统上不是这样

GET POST区别

// post
xhr.open("GET", "/api/categories");
// 自定义请求头部信息
xhr.setRequextHeader("Content-Type", "application/x-www-form-urlencoded");
var from = document.getElementById("user-info");
xhr.send(serialize(from));
xhr.send();

POST 消耗的资源更多， GET最快达到POST的2倍。get url长度有限制

XMLHttpRequest 2级

规范化的XMLHttpRequest

FromData

序列化表单以及创建与表单格式相同的数据

  var data = new FromData();
  data.append("name", "云天明");

超时设定

XHR对象 timeout属性，表示请求在等待响应多久之后停止

xhr.timeout = 1000;
xhr.ontimeout = function() {
    console.log("超时了。。")
}

overrideMimeType() 方法

overrideMimeType() 用于重写MIME类型。

总结

由于这个疑问，借此重新学习了下ajax。url在请求头的Referer中故get请求在请求体中。

参考

HTTP请求行、请求头、请求体详解
XMLHttpRequest

GPU云服务器云服务器 XMLHttpRequest XMLHttpRequest介绍 XMLHttpRequest实例了解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88993.html

从0到1学AJAX，这篇就够了！（进阶三）

摘要：一定在发送请求之前注册不管同步或者异步为了让这个事件可以更加可靠一定触发，一定是先注册了解同步模式即可，切记不要使用同步模式。至此，我们已经大致了解了的基本。一种数据描述手段，基本现在的项目不用了，淘汰的原因数据冗余太多。什么是ajax？ AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程 1、使用 AJAX 的...

CoderDock 2019-08-23 15:32 评论0 收藏0
从0到1学AJAX，这篇就够了！（进阶三）

摘要：一定在发送请求之前注册不管同步或者异步为了让这个事件可以更加可靠一定触发，一定是先注册了解同步模式即可，切记不要使用同步模式。至此，我们已经大致了解了的基本。一种数据描述手段，基本现在的项目不用了，淘汰的原因数据冗余太多。什么是ajax？ AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程 1、使用 AJAX 的...

microelec 2019-07-01 11:24 评论0 收藏0
从0到1学AJAX，这篇就够了！（进阶三）

摘要：一定在发送请求之前注册不管同步或者异步为了让这个事件可以更加可靠一定触发，一定是先注册了解同步模式即可，切记不要使用同步模式。至此，我们已经大致了解了的基本。一种数据描述手段，基本现在的项目不用了，淘汰的原因数据冗余太多。什么是ajax？ AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程 1、使用 AJAX 的...

dingda 2019-08-02 14:23 评论0 收藏0
初学NodeJS（一）

摘要：这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新创建对象实例的传输方式传输数据方式有两种，一种，一种。 Ajax 介绍在node.js中前后台交互数据经常会用到这个东西，Ajax不是新的编程语言，而是一种使用现有标准的新方法，他可以实现不刷新网页部分更新数据。 Ajax数据格式 ajax封装使用封装Ajax需要了解什么是XMLHttpRequest；什么是XML...

曹金海 2019-08-23 18:03 评论0 收藏0
【译】通过JavaScript发送表单

摘要：能异步地发送任意数据的技术称为，表示异步的和。若你使用，使用发送表单还会影响同源策略，并导致内容被发送到一个无法访问的中。但要手动发送二进制数据的话，还有很多额外工作要做。用来发送二进制是很直接的，使用方法就好了。系列文章说明原文在[发送表单数据]()一文中，HTML表单可以声明式地发送一个HTTP请求。但表单也可以用JavaScript来准备一个HTTP请求。本文将探索如何...

chinafgj 2019-08-20 17:52 评论0 收藏0