AJAX--通俗简单的分享笔记

最新推荐文章于 2024-05-02 11:08:45 发布

PZPD

最新推荐文章于 2024-05-02 11:08:45 发布

阅读量105

点赞数

分类专栏： web前端文章标签： AJAX web前端

本文链接：https://blog.csdn.net/qq_41380071/article/details/101064006

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是AJAX?它有什么作用？

AJAX 的全称是 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

异步通俗的说法就是：我在更新网页的时候不需要跟着页面载入一起等，可以去看看其他地方或者做点其他的事，等他整个弄好了我再回来看，即不同步

没用 AJAX 的网页，在更新内容时，必须要重新载入整个页面，有时候需要更新的就只有那一小行，而刷新页面要把全部的数据重新载入一遍，这样不仅浪费了服务器资源，你还要傻憨憨的再等网页重新刷半天。使用AJAX就能很好的解决这些问题，提高用户体验。

举个例子就像你去买电影票，买完后就自动更新数据显示你买的那个位置已经被占用了，而不用重新刷一遍网页来再次确定你到底买没买上。

XMLHttpRequest （XHR）

XMLHttpRequest(XHR) 类是 AJAX 核心，它允许脚本异步调用 HTTP API

现在绝大多数的浏览器都支持 XHR

var xhr = new XMLHttpRequest();  
//创建一个 XHR 对象

但是还是有一些小机灵鬼它并不兼容怎么办呢（说的就是你 IE5 IE6！）

var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
//创建一个 ActiveXObject 对象来应对不兼容的浏览器

为了谨防那些小机灵鬼出来搞事只好使用兼容写法来通吃

var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 
//条件判断决定创建方式

AJAX的工作原理

当页面需要更新数据时，由 AJAX 引擎向服务器发送请求数据，服务器获取并处理请求后，将更改的数据重新返回，AJAX 获取服务器的响应，使用新数据来更新页面、或进行其它操作。

向服务器发送请求

向服务器发送请求时先使用 open 方法指定请求，格式为 XHR.open(method, url, async)；

method（请求的方法）
- get 请求和 post 请求
url（请求的 url 地址）
async（可选，布尔值）
- true 为异步，flase 为同步，建议使用异步

open 方法其实还可以有第四、第五个参数，分别是用于 HTTP 请求访问认证的用户名和密码，使用它们需要在服务器做相应的配置，较为少用。

如果你的 HTTP 请求需要设置请求头，那么调用open方法之后的下个步骤就是设置它，格式为 XHR.setRequestHeader(name, value);

指定完请求后再使用send方法发送请求，格式为XHR.send()；

方法	概述
get 请求	get 请求没有请求主体，所以在调用 send 方法时可以传递 null 或省略这个参数，如 get()
post 请求	post 请求通常都拥有请求主体,如果你设置了请求头那 post 请求的主体为请求头的 name 属性，如 post(name)

大部分情况下使用的都是get请求，但是由于get请求没有请求主体的特性，使用get请求会向服务器发送大量数据，而post请求相对更加简单安全可靠，可以根据个人情况选择使用。

获取服务器响应

你向服务器发送请求后需要等待服务器的响应，可是由于网络差等各种原因，回应请求的时间可能会很长，你也不知道是个啥情况，但也总不能干等着吧，这时候你就得看看XHR对象上是否触发了 readyStateChange 事件，而 readyStateChange 事件则是用来监听 readyState 属性值的变化。

var xhr = new XMLHttpRequest();
// readyState 初始为 0

alert(xhr.readyState);
xhr.onreadystatechange = function () {  
    alert(xhr.readyState);
    // 监听 readyState 属性的改变
}

readyState 属性值代表的是指定请求的请求状态，分别用0 - 4五个数字来表示五种状态：

0：请求未初始化，open 方法尚未调用
1：启动请求，send 方法尚未调用
2：尚未接收到响应
3：接收响应
4：响应完成

不仅如此，当你访问一个网页时，此网页所在的服务器会返回一个包含HTTP状态码的信息头用以响应浏览器的请求。status 属性会以数字的形式保存服务器响应的 HTTP 状态码，比如使用最频繁的 “200” 表示请求成功，“404” 表请求的资源url不存在，"500"表示内部服务器出现错误。其中"2XX"和"304"状态码都表示请求成功，"304"是对客户端可读取缓存的一种响应，同样能获取到 HTTP 的响应数据。

HTTP状态码共分为5种类型：

1xx：零时响应，服务器收到请求，需要请求者继续执行操作
2xx：成功，操作被成功接收并处理
3xx：重定向，需要进一步的操作以完成请求
4xx：请求错误，请求包含语法错误或无法完成请求
5xx：服务器错误，服务器在处理请求的过程中发生了错误

根据这一特性即可用 status 属性来验证请求是否成功。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        // 获取到响应数据，可执行一些请求成功的回调函数
    }
};

当收到来自服务器的响应时，可以使用 responseText 或 responseXML 属性来储存服务器响应的数据。

属性	概述
responseText	无论返回的数据类型是什么，响应主体的内容都会保存
responseXML	只对 XML 数据有效，若响应主体是非 XML 数据，该属性值为null

以上是我个人学习AJAX时的个人理解和摘录，在学习AJAX时始终觉得有点不明所以，在观看了各种学习贴和大佬博客后做了个归纳和总结，希望通过简单通俗的说法来概括整个内容，留作学习笔记供日后复习，也同时也把自己的一点想法分享给大家，希望能有所用处，感谢观看！