HTTP-XMLHttpRequest

AJAX 步骤#
创建 XMLHttpRequest 实例
发出 Http 请求
接收服务器传回的数据
更新网页数据
XMLHttpRequest 实例属性
readyState：返回一个整数，表示实例对象的当前状态
0，表示 XMLHttpRequest 实例已经生成，但实例的 open() 方法还没有被调用
1，表示 open() 方法已经调用，但是实例的 send() 方法还没有调用，仍然可以使用实例的 setRequestHeader() 方法，设定 HTTP 请求的头信息
2，表示实例的 send() 方法已经调用，并且服务器返回的头信息和状态码已经收到
3，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的 responseType 属性等于 text 或者空字符串，responseText 就会包含已经接收到的部分
4，表示服务器返回的信息已经完全接收，或者本次请求已经失败

onreadystatechange：指向一个监听函数，readystatechange 事件发生时，就会执行这个属性。如果使用 abort 方法，终止 XMLHttpRequest 请求，也会造成 readyState 属性变化，下面是一个例子：

const xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘http://example.com’, true);
xhr.onreadystatechange = function () {
if (xhr.readystate !== 4 || xhr.status !== 200) {
return;
}
console.log(xhr.responseText)
}
xhr.send()
response 服务器返回的数据体

responseType 服务器返回数据的类型

responseText 从服务器接收的字符串

responseXML 从服务器接收的 XML 或 HTML 文档

responseURL 发送数据的服务器网址

status HTTP 响应状态码

statusText HTTP 响应状态码文字描述

timeout 请求时间限制

ontimeout timeout 的监听事件

事件监听属性
onloadstart （HTTP 请求发出）的监听函数
onprogress （正在发送和加载数据）的监听函数
onabort 请求中止，比如用户调用了 abort () 方法）的监听函数
onerror （请求失败）的监听函数
onload （请求成功完成）的监听函数
ontimeout （用户指定的时限超过了，请求还未完成）的监听函数
onloadend（请求完成，不管成功或失败）的监听函数
withCredentials
这是一个布尔值，表示跨域请求时，用户信息（如 Cookie 和认证的 HTTP 头信息）是否会包含在请求之中，默认为 false
如果需要跨域 AJAX 请求发送 Cookie，需要设置 withCredentials 为 true，同源请求不需要。

const xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘http://example.com’, true);
xhr.withCredentials = true;
xhr.send(null);
为了让这个属性生效，服务器必须显式返回 Access-Control-Allow-Credentials 这个头信息

upload
可以获得一个监听上传文件的对象，主要方法就是监听这个对象的各种事件：loadstart、loadend、load、abort、error、progress、timeout

实例方法
open
用于指定 HTTP 请求的参数

method HTTP 动词方法，如 GET，POST，PUT，DELETE，HEAD
url：表示请求发送目标 URL
async：布尔值，表示请求是否异步
send
用于实际发出 HTTP 请求

setRequestHeader
用于设置浏览器发送的 HTTP 请求的头信息

overrideMImeType
指定 MIME 类型，覆盖服务器返回的真正的 MIME 类型，从而让浏览器有不一样的处理。

getResponseHeader
返回 HTTP 头信息指定字段的值

getAllResponseHeaders
表示服务器发来的所有 HTTP 头信息

abort
终止已经发出的 HTTP 请求

————————————————
原文作者：LeoYao
转自链接：https://learnku.com/articles/47146
版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请保留以上作者信息和原文链接。

HTTP-XMLHttpRequest相关推荐

Access to XMLHttpRequest at file from origin ‘null‘ has been blocked by CORS policy谷歌浏览器本地打开项目js文件报错
Access to XMLHttpRequest at 'file:///xxxxx/PQ.BaseInfo.proto' from origin 'null' has been blocked by ...
异步请求之XMLHttpRequest篇
XMLHttpRequest 简介 XMLHttpRequest对象可以实现页面无刷新来实现与服务端进行数据交互.最先有微软公司设计,随后被Google,Mozilla等使用.现在已成为异步请求的标准 ...
Ajax异步XMLHttpRequest对象
示例Ajax: <%@ page language="java" contentType="text/html; charset=utf-8"pageEn ...
原生ajax XMLHTTPRequest()
原生ajax XMLHTTPRequest() 视频 https://www.bilibili.com/video/BV1WC4y1b78y?p=10 代码 <!DOCTYPE html> ...
【跨域报错解决方案】Access to XMLHttpRequest at ‘http://xxx.com/xxx‘ from origin ‘null‘ has been blocked by
错误背景描述: 在使用ajax调用api接口的时候:发生错误如下 Access to XMLHttpRequest at 'http://xxxx.com/xxx' from origin 'null ...
转载 Xmlhttprequest对象池
2019独角兽企业重金招聘Python工程师标准>>> 在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就 ...
AJAX初探,XMLHttpRequest介绍
AJAX初探,XMLHttpRequest介绍 AJAX AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML. AJ ...
xmlHttpRequest避免缓存的办法
这几天被xmlHttpRequest缓存折腾的挺郁闷,第一次用Ajax做一个定时刷新的东西,结果每次返回值都和第一次一样,考虑到应该是缓存搞的鬼,然后经人指点,在url后面加一个随机数就可以解决了,因 ...
[转]建一个XMLHttpRequest对象池
在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也 ...
实现jquery.ajax及原生的XMLHttpRequest调用WCF服务的方法
废话不多说,直接讲解实现步骤一.首先我们需定义支持WEB HTTP方法调用的WCF服务契约及实现服务契约类(重点关注各attribute),代码如下: //IAddService.cs namesp ...

HTTP-XMLHttpRequest

HTTP-XMLHttpRequest相关推荐

最新文章

热门文章