AJAX及其应用笔记

最新推荐文章于 2023-10-24 00:18:24 发布

Zelda＇s bebop

最新推荐文章于 2023-10-24 00:18:24 发布

阅读量59

点赞数

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

本文链接：https://blog.csdn.net/qq_59598895/article/details/129650765

版权

ajax工作原理：

ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。实现了静态页面在不刷新整个页面的情况下与服务器通信，减少了用户的等待时间，增强用户体验的友好程度

创建Ajax对象(XmlHttpRequest)

判断数据的传输方式（get/post）

使用open方法与服务器建立连接；

向服务器端发送数据，发送send()

在回调函数针对不同响应状态进行处理；

检测XMLHttpRequest对象的readyState属性，该属性表示请求/响应过程的当前活动阶段，具体属性如下：

0：未初始化。尚未调用open()方法

1：启动。已经调用open()方法，但尚未调用send()方法

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

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

4: 完成。已经接收到全部响应数据。

属性，方法，事件：

方法：

open(‘method’,‘url’)建立服务器的调用，method：请求的类型；GET 或 POST ，url：文件在服务器上的位置

a、向服务器提交数据的类型，即post还是get。

b、请求的url地址和传递的参数。

c、传输方式，false为同步，true为异步。默认为true。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。

send(content)向服务器发送数据，content：仅用于 POST 请求

XMLHttpReques的属性：

onreadystatechange 每次状态改变所触发事件的事件处理程序。

responseText 从服务器进程返回数据的字符串形式。

responseXML 从服务器进程返回的DOM兼容的文档数据对象。

status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

status Text 伴随状态码的字符串信息

readyState 对象状态值

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

1 (初始化) 对象已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

状态码含义

404请求的服务器资源不存在

500服务器端错误

304请求方式错误

事件：

onreadystatechange每当xhr.readyState改变时触发；但xhr.readyState由非 0 值变为 0 时不触发。

onloadstart调用xhr.send()方法后立即触发，若xhr.send()未被调用则不会触发此事件。

onprogressxhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每 50ms 触发一次；xhr.onprogress在下载阶段（即xhr.readystate=3时）触发，每 50ms 触发一次。

onload当请求成功完成时触发，此时xhr.readystate=4

onloadend当请求结束（包括请求成功和请求失败）时触发

onabort当调用xhr.abort()后触发

ontimeoutxhr.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和新对象：

var xhr = new XMLHttpRequest()

事件处理函数：

xhr.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { succ(this.response);//响应成功函数 } else { fail(newError("HTTP status Rxception"));//响应失败函数 }

};//响应状态变化时触发此函数，可用其他事件代替

发送ajax请求:

xhr.open("GET", “https://jsonplaceholder.typicode.com/posts”);xhr.responseType = "json";//设置返回类型为JOSNxhr.send();

从JSONPlaceholder API获取数据:

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

console.log(this.response);

}

};

xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");

xhr.responseType = "json";