ajax及其应用小论文

最新推荐文章于 2024-08-15 22:10:13 发布

ssss121111

最新推荐文章于 2024-08-15 22:10:13 发布

阅读量79

点赞数

文章标签： ajax Powered by 金山文档

原文链接：https://blog.csdn.net/weixin_43582101/article/details/89278255 https://segmentfault.com/a/1190000019891237

版权

ajax工作原理：

Ajax 的工作原理相当于在用户和服务器之间加了—个中间层(AJAX 引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax 引擎自己来做, 只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求.

Ajax 其核心有JavaScript、XMLHTTPRequest、DOM 对象组成，通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 JavaScript 来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。

XMLHTTPRequest：

属性：

readyState

[只读属性]用于追踪 xhr 当前的状态，共有 5 种可能的值，分别对应 xhr不同的阶段。

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 中。

事件：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

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>

ssss121111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax及其应用小论文

定义 HTTP 请求的数据（ body ），当 method 为 GET、HEAD 时，该参数忽略。只有当 responseType 为 text、""、document时，xhr 对象上才有此属性，此时才能调用 xhr.responseXML，否则抛错。以下 3 种情况下值都为 null ：请求未完成、请求失败、请求成功但返回数据无法被正确解析时。只有当 responseType 为 text、""时，xhr 对象上才有此属性，此时才能调用 xhr.responseText ，否则抛错。
复制链接

扫一扫