ajax工作原理:
Ajax 的工作原理相当于在用户和服务器之间加了—个中间层(AJAX 引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax 引擎自己来做, 只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求.
Ajax 其核心有JavaScript、XMLHTTPRequest、DOM 对象组成,通过 XmlHttpRequest 对象来向服务器发异步请求,从服务器获得数据,然后用 JavaScript 来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。
XMLHTTPRequest:
属性:
readyState
[只读属性]用于追踪 xhr 当前的状态,共有 5 种可能的值,分别对应 xhr不同的阶段。
![](https://i-blog.csdnimg.cn/blog_migrate/d6074bd04cc03b812c93d219642ebebb.png)
status 和 statusText
status 属性表示 HTTP 响应状态码,如 200、302、400等。
statusText 属性表示 HTTP响应状态的描述文本,如 OK、NotFound等。
responseType 和 response
可在 xhr.send() 前设置 responseType ,用于指定返回的响应数据类型。和 xhr.overrideMimeType() 方法效果相同,推荐使用 responseType。
responseText
默认值为空字符串 ""
只有当 responseType 为 text、""时,xhr 对象上才有此属性,此时才能调用 xhr.responseText ,否则抛错。
只有当请求成功时,才能拿到正确值。以下 2 种情况下值都为空字符串 "":请求未完成、请求失败。
responseXML
默认值为 null
只有当 responseType 为 text、""、document时,xhr 对象上才有此属性,此时才能调用 xhr.responseXML,否则抛错。
只有当请求成功且返回数据被正确解析时,才能拿到正确值。以下 3 种情况下值都为 null :请求未完成、请求失败、请求成功但返回数据无法被正确解析时。
upload
是一个XMLHttpRequestUpload对象,用于收集传输信息。支持事件:
onloadstart
onprogress
onabort
ontimeout
onerror
onload
Onloadend
timeout
单位毫秒,默认值 0 ,即不设置超时。
计时从onloadstart 事件触发开始(即xhr.send()开始),以onloadend 事件触发为结束。
在 IE中,只能在调用open()方法后send()方法前设置。其他浏览器无此限制,但仍然从xhr.send()方法调用计时。
不能为同步请求设置 timeout ,否则会报错。
早期较多浏览器不支持,可通过 setTImeOut 实现。
方法:
open(method:string,url:string, async?:boolean=true, username?:string, password: string)
用于创建 HTTP 请求,但请求并未发送。
method,请求类型,如 GET 、POST 等,大小写不敏感。
url, URL 地址
async,是否异步,默认 true。
若为同步请求时
xhr.timeout值必须为0。
xhr.withCredentials值必须为false。
xhr.responseType值必须为"",(text 也不允许)。
username,用户名,一般不用。
password,密码,一般不用。
send(body?:Object=null)
定义 HTTP 请求的数据( body ),当 method 为 GET、HEAD 时,该参数忽略。body 可为 ArrayBuffer、Blob、Document(类似 XML 格式数据)、DOMString(字符串)、FormData(表单)。
注意:body 参数会影响请求头部的 content-type 默认值。
如果 data 是 Document 类型,同时也是 HTMLDocument 类型,则 content-type 默认值为 text/html;charset=UTF-8 ;否则为 application/xml;charset=UTF-8;
如果 data 是 DOMString 类型,content-type 默认值为 text/plain;charset=UTF-8 ;
如果 data 是 FormData 类型,content-type 默认值为 multipart/form-data;boundary=[xxx]
如果 data 是其他类型,则不会设置 content-type 的默认值
abort()
若请求已发出,则会终止请求,并将readyState 置为 0.
调用后,应将 xhr 对象置为null 以促进垃圾回收。
setRequestHeader(header:string,value:string)
设置请求 HTTP请求头信息。如content-type、cookie、accept-xxx等。
header 参数大小写不敏感。
必须在open()方法后,send()方法前调用,否则会抛错。
可调用多次,最终值不会覆盖,而是采用追加append方式。
getResponseHeader(header:string)
获取某个指定 header字段的值。
header 字段不区分大小写。
getAllResponseHeaders()
获取 response 中所有header 字段。
有严格安全限制。如下:
无论跨域或同域请求,无法获取Set-Cookie、Set-Cookie2字段值。
跨域请求,只可获取simple response header和Access-Control-Expose-Headers(名词解释见下方),否则会报错:Refused to get unsafeheader。故若想访问其他字段,需后端添加到 Access-Control-Expose-Headers 中。
>
事件:
![](https://i-blog.csdnimg.cn/blog_migrate/cefbd0b60ffcebff35fa934341308aa5.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
varxhr = new XMLHttpRequest();
xhr.addEventListener("load", function () {
console.log("recelve message from server");
if (xhr.status === 200) {
console.log(xhr.response);
} else {
console.log("other case:",xhr.status);
}
});
xhr.open("GET", "https://jsonplaceholder.typicode.com/comments?postId=1");
xhr.send();
//发送之后的打印
console.log("aftersend");
</script>
</body>
</html>
>
>