Ajax及其应用

最新推荐文章于 2024-08-30 20:29:15 发布

KKHW

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量76

点赞数

文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/K2356/article/details/129655024

版权

对Ajax工作原理的分析

对XMLHttpRequest对象的属性、方法和事件进行深入理解。

属性

方法

事件

以JSONPlaceHolder为数据服务，编写案例，以进一步阐述Ajax及XMLHttpRequest对象的用法，尽可能涉及更多的应用场景。

参考资料：

对Ajax工作原理的分析

通过XMLHttpRequest对象向服务器发送异步请求,从服务器获得数据，然后用Javascript来操作DOM而更新页面

实现流程：

实现Ajax异步交互需要服务器逻辑进行配合，需要完成以下步骤：

创建Ajax的核心对象XMLHttpRequest对象
通过XMLHttpRequest对象的open()方法与服务器端建立连接
构建请求所需要的数据内容，并通过XMLHttpRequest对象的send()方法发送给服务器端
通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端你的通信状态
接受并且处理服务器端向客户端响应的数据结果
将处理的结果更新到HTML页面中

对XMLHttpRequest对象的属性、方法和事件进行深入理解。

XMLHttpRequest 对象用于在后台与服务器交换数据。

创建XMLHttpRequest 对象语法：

xmlhttp=new XMLHttpRequest();

属性

readyState：

HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

状态	名称	描述
0	UNSENT (初始状态，未打开)	初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。open()方法还未被调用。
1	OPENED (已打开，未发送)	open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2	HEADERS_RECEIVED(已获取响应头)	send()方法已经被调用, 响应头和响应状态已经返回
3	LOADING (正在下载响应体)	响应体(response entity body)正在下载中，此状态下通过xhr.response可能已经有了响应数据
4	DONE (整个数据传输过程结束)	整个数据传输过程结束，不管本次请求是成功还是失败

responseText：

目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。

readyState < 3	responseText属性为空字符串
readyState = 3	该属性返回目前已经接收的响应部分
readyState =4	该属性保存了完整的响应体

responseXML：

对请求的响应，解析为XML并作为Document 都对象返回

status：

由服务器返回的HTTP状态码，如200为成功；404为“Not Found”错误；readyState < 3读取该属性会异常

statusText：

这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。

方法

方法	含义
abort()	取消当前响应，关闭连接并且结束任何未决的网络活动。readyState 重置为0
getAllResponseHeaders()	把 HTTP 响应头部作为未解析的字符串返回。readyState < 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。
getResponseHeader()	返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
open(method,url,async)	初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。method:请求的类型，url:文件在服务器的位置，async:ture(异步)，false（同步）
send()	发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
setRequestHeader()	向一个打开但未发送的请求设置或添加一个 HTTP 请求。

事件

事件	触发条件
onreadystatechange	每当xhr.readyState改变时触发；但xhr.readyState由非0值变为0时不触发。
onloadstart	调用xhr.send()方法后立即触发，若xhr.send() 未被调用则不会触发此事件。
onprogress	xhr.upload.onprogress在上传阶段(xhr.send() 之后，xhr.readystate=2之前)触发，每50ms触发一次；xhr.onprogress在下载阶段（即 xhr.readystate=3时）触发，每50ms触发一次。
onload	当请求成功完成时触发，此xhr.readystate=4
onloadend	当请求结束（包括请求成功和请求失败）时触发
onabort	当调用xhr.abort()后触发
ontimeout	xhr.timeout不等于0，由请求开始onloadstart 开始算起，当到达xhr.timeout所设置时间请求还未结束即onloadend，则触发此事件。
onerror	在请求过程中，若发生Network error则会触发此事件（若发生Network error时,上传还没有结束，则会先触发xhr.upload.onerror，再触发xhr.onerror；若发生Network error时，上传已经结束，则只会触发xhr.onerror）。注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的xhr.statusCode是4xx时，并不属于Network error，所以不会触发onerror事件，而是会触发onload事件。

以JSONPlaceHolder为数据服务，编写案例，以进一步阐述Ajax及XMLHttpRequest对象的用法，尽可能涉及更多的应用场景。

//创建Ajax核心对象 
var xhr=new XMLHttpRequest() 

//事件处理函数 
xhr.onreadystatechange=function(){ 
if(this.readyState==4 && this.status==200)
{ 
    console.log(this.response);    
}
else{ 
    //fail(new Error("HTTP status Rxception")); 
    console.log(this.status); 
} };     

//发送Ajax请求 
xhr.open("GET","http://1.14.69.117:5000/posts"); 
xhr.responseType="json"; 
xhr.send();