ajax详解（marksheng整合版）

清疚 2023-01-21 14:22 132阅读 0赞

# 一、简介  #

> Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），**是指一种创建交互式网页应用的网页开发技术**。 Ajax = 异步JavaScript和XML（标准通用标记语言的子集）。 Ajax 是一种用于**创建快速动态网页**的技术。 Ajax 是一种在**无需重新加载整个网页的情况下，能够更新部分网页的技术**。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

--------------------

# 二、到底什么是 AJAX #

> 再说一遍，就是用 **JS 发起一个请求，并得到服务器返回的内容**。
> 
> 这跟以前的技术最大的不同点在于「页面没有刷新」，仅此而已。
> 
> 想要用 JS 发起一个请求很简单，一共 4 步。
> 
> **1. 创建一个对象**
> 
>     var request = new XMLHttpRequest()
> 
> **2. 监听请求成功后的状态变化**
> 
>     request.onreadystatechange = function() {
>       if (this.readyState == 4 && this.status == 200) {
>         console.log(request.responseText)
>       }
>     };
> 
> 第三行的 request.responseText 就是服务器返回的内容了（默认是字符串）
> 
> **3. 设置请求参数**
> 
>     request.open("GET", "filename", true);
> 
> **4. 发送请求**
> 
>     request.send();
> 
> 这 4 步看起来是有些复杂的，不要紧，jQuery.ajax 对这 4 步进行了封装，只需要一步就可以了：
> 
>     $.get('filename').then(function(response){
>       // 这里的 response 就是返回的内容
>     })
> 
>

--------------------

# 三、用 AJAX 请求什么？ #

> 目前最常见的情况是用 AJAX **请求 JSON 格式的数据**，比如：
> 
>     $.get('/data.php').then(function(response){
>       // response 是 { "name": "小谷" }
>     })
> 
> 其实，你可以用 AJAX 请求任何内容，包括
> 
>  *  XML 内容
>  *  HTML 内容
>  *  CSS 内容
>  *  JavaScript 内容
>  *  ……

--------------------

# 四、XMLHttpRequest分析 #

参考资料： [XMLHttpRequest Level 2 使用指南][XMLHttpRequest Level 2]\---阮一峰

[回答原理题流程][Link 1]：

1.  如果是英文词汇就**先翻译成中文**
2.  **一句话描述该技术的用途**
3.  描述该技术的**核心概念**或运作流程
4.  口述该技术的**代码书写思路**
5.  该技术的**优点**
6.  该技术的**缺点**
7.  如何**弥补**缺点

现在我们正式开始了解XMLHTTPRequest对象，顾名思义：是基于XML的HTTP请求。[XMLHttpRequest][]是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。自从浏览器提供有了XMLHTTPRequest这个接口之后，ajax操作就此诞生。

我们再来说说什么是[AJAX][]，AJAX = Asynchronous JavaScript and XML，翻译为：异步的 JavaScript 和 XML。ajax就是基于浏览器提供的XMLHttpRequest对象来实现的。这下明白他们的关系了吧。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。自从有了ajax之后，我们就可以实现异步的加载网页。

什么叫异步？

异步，异嘛，不同的意思，这里也就是指不跟浏览器加载执行网页代码的步伐一致，也就是说在一个网页中需要用户操作来触发执行代码，而不是整个网页代码一次性执行完毕。（这里的用户操作是指在同一个网页下面请求代码执行渲染，而不是让浏览器直接跳转渲染另一个页面）

[AJAX][] 工作原理：

![166b23c239b9e4723edd57ab00133ed3.png][]

这里面都提到了一个概念XML，那什么是XML呢？

[XML][] 指可扩展标记语言（e**X**tensible **M**arkup **L**anguage）。

我们在浏览器中使用XMLHTTPRequest对象在服务器之间通信，传输的数据是使用XML的方式，但最终还是会被转换成json数据格式来被我们使用。

我们再来看看XHR的使用流程：

*  首先我们需要新建一个XMLHttpRequest实例

var xhr = new XMLHttpRequest();

*  然后，向远程主机发出一个HTTP请求

xhr.open('GET', 'example.php');
    xhr.send();

*  接着，就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化，指定回调函数

xhr.onreadystatechange = function(){
    　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {
    　　　　　　alert( xhr.responseText );
    　　　　} else {
    　　　　　　alert( xhr.statusText );
    　　　　}
    　　};

*  上面的代码包含了**老版本XMLHttpRequest**对象的主要属性：

* xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。
    * xhr.status：服务器返回的状态码，等于200表示一切正常。
    * xhr.responseText：服务器返回的文本数据
    * xhr.responseXML：服务器返回的XML格式的数据
    * xhr.statusText：服务器返回的状态文本。

老版本的XMLHttpRequest对象有以下几个缺点：

> \* 只支持文本数据的传送，无法用来读取和上传二进制文件。  
> \* 传送和接收数据时，没有进度信息，只能提示有没有完成。  
> \* 受到 ["同域限制"][Link 2]（Same Origin Policy），只能向同一域名的服务器请求数据。

以上都是2010年以前使用的出来的过时的XMLHttpRequest对象了，现在我们都基本上使用的是**HTML5中的新版本XMLHttpRequest对象**。

**新版本的功能**：

新版本的XMLHttpRequest对象，针对老版本的缺点，做出了大幅改进。

> \* 可以 **设置HTTP请求的时限**。  
> \* 可以 **使用FormData对象管理表单数据**。  
> \* 可以 **上传文件**。  
> \* 可以 **请求不同域名下的数据（跨域请求）**，CORS。  
> \* 可以 **获取服务器端的二进制数据**。  
> \* 可以 **获得数据传输的进度信息**。

### 1】HTTP请求的时限 ###

xhr.timeout = 3000;
    xhr.ontimeout = function(event){
      alert('请求超时！');
    }

上面的语句，将最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数。

### 2】FormData对象 ###

ajax操作往往用来传递表单数据。为了方便表单处理，HTML 5新增了一个FormData对象，可以**模拟表单**。

//首先，新建一个FormData对象。
    var formData = new FormData();
    
    //然后，为它添加表单项。
    formData.append('username', '张三');
    formData.append('id', 123456);
    
    //最后，直接传送这个FormData对象。这与提交网页表单的效果，完全一样。
    xhr.send(formData);

FormData对象也可以**用来获取网页表单的值**：

var form = document.getElementById('myform');
    var formData = new FormData(form);
    formData.append('secret', '123456'); // 添加一个表单项
    xhr.open('POST', form.action);
    xhr.send(formData);

### 3】上传文件 ###

新版XMLHttpRequest对象，不仅可以发送文本信息，还可以**上传文件**。

假定files是一个"选择文件"的表单元素（input\[type="file"\]），我们将它装入FormData对象。

var formData = new FormData();
    
    for (var i = 0; i < files.length;i++) {
      formData.append('files[]', files[i]);
    }
    
    xhr.send(formData);

### 4】跨域资源共享（CORS） ###

新版本的XMLHttpRequest对象，可以向不同域名的服务器发出HTTP请求。这叫做["跨域资源共享"][Link 3]（Cross-origin resource sharing，简称CORS）。

使用"跨域资源共享"的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种"跨域"。如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。

跨域之前我们都讲过了，这里就不多提了，其他的新XMLHttpRequest对象的功能，个人觉得日常开发中可能遇到很少，就不去总结了。

--------------------

# **五、总结**  #

> ## **ajax:** ##
> 
> **浏览器的一种局部刷新的技术**
> 
> **只要是JS调用异步通讯组件并使用格式化的数据来更新web页面上的内容或操作过程，那么我们用的方法就可算是AJAX。**

[XMLHttpRequest Level 2]: https://link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html
[Link 1]: https://www.zhihu.com/question/64764473/answer/1223383382
[XMLHttpRequest]: https://link.zhihu.com/?target=http%3A//en.wikipedia.org/wiki/XMLHttpRequest
[AJAX]: https://link.zhihu.com/?target=https%3A//www.runoob.com/ajax/ajax-intro.html
[166b23c239b9e4723edd57ab00133ed3.png]: /images/20221020/9a4a6eca86fc4ce584c1cee825e55ac3.png
[XML]: https://link.zhihu.com/?target=https%3A//www.runoob.com/xml/xml-tutorial.html
[Link 2]: https://link.zhihu.com/?target=http%3A//www.w3.org/Security/wiki/Same_Origin_Policy
[Link 3]: https://link.zhihu.com/?target=http%3A//en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing