JavaScript的AJAX

最新推荐文章于 2024-05-30 09:00:00 发布

不睡觉的怪叔叔

最新推荐文章于 2024-05-30 09:00:00 发布

阅读量3.2k

点赞数 3

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_35732147/article/details/83113882

版权

Javascript 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

一、传统的前后端交互方式

1.1、异步和同步的概念

同步（synchronous） —— 指一个时间段内系统只能有一个进程在执行
异步（asynchronous） —— 指一个时间段内系统可以有多个进程在执行

1.2、传统前后端交互的原理

传统的前后端交互过程：

传统的前后端交互方式（无AJAX）是同步交互的方式，同步的过程只允许有一个进程在执行。

服务器在处理数据的时候，客户端不能进行任何操作，处于一个阻塞的状态。

1.3、传统前后端交互方式的缺点

传统的Web网站，提交表单，需要重新加载整个页面
如果服务器长时间未能返回Response，则客户端将会无响应，用户体验很差
服务器返回Response后，浏览器需要加载整个页面，对浏览器的负担也是很大的
浏览器提交表单后，发送的数据量大，造成网络的性能问题

二、AJAX简介

2.1、Ajax概念

AJAX = 异步JavaScript和XML

AJAX为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。也就说可以使用AJAX技术取得新数据，然后再通过DOM将新数据插入到页面中。

AJAX将浏览器原生的通信能力提供给了开发人员，简化了实现同样操作的任务。同时可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.2、Ajax原理

在解释Ajax之前，可以先看一个"领导想找小李汇报工作"的例子：

领导想找小李问点事，就委托秘书去叫小李，自己就接着做其他事件，直到秘书告诉他小李已经到了，最后小李跟领导汇报工作。

Ajax请求数据流程与"领导想找小李汇报一下工作"类似：

使用Ajax的程序，服务端在处理数据的时候，客户端浏览器依然可以执行其他的操作，并没有阻塞状态，也就是一个时间段内可以有多个进程在执行。

Ajax技术的核心是XMLHttpRequest对象（简称XHR），XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。

XHR扮演的角色相当于秘书，使得浏览器可以发出HTTP请求和接收HTTP响应。

XHR能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。也就是说可以使用XHR对象取得新数据，然后再通过DOM将新数据插入到页面中。

Ajax虽然名字中包含XML的成分，但Ajax通信与数据格式无关；这种技术就是无须刷新页面即可从服务器取得数据，但不一定是XML数据。

Ajax的应用案例：

搜索引擎的搜索词动态提示

无刷新验证用户名的唯一性

2.3、Ajax的优缺点

①Ajax优点：

使用异步方式与服务器通信，页面不需要重新加载，页面无刷新，用户体验好
按需求取数据，减少服务器的负担
使得Web应用程序更为迅捷地响应用户交互
Ajax基于标准化的、并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行
浏览器的内容和服务器代码进行分离。页面的内容全部由JavaScript来控制，服务器端负责逻辑的校验和从数据库中拿数据

②缺点：

安全问题：将服务器端的方法暴露出来，黑客可利用这一点进行攻击
大量JS代码，容易出错
Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰——用户不太清楚现在的数据是新的还是已经更新过多；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等
可能破坏浏览器后退按钮的正常行为
一些手持设备（如手机、PAD等）自带的浏览器现在还不能很好的支持Ajax

三、使用AJAX

AJAX的技术核心是XMLHttpRequest对象（简称XHR），现在几乎所有浏览器都提供这个原生内置对象，在JavaScript中通过操作XHR对象来使用AJAX。

3.1、创建XMLHttpRequest对象

创建XMLHttpRequest对象的方式非常简单：

var xhr = new XMLHttpRequest();

3.2、发送请求

首先需要调用XHR对象的open()方法启动一个请求以备发送（此时没有发送），它接受3个参数：

要发送的HTTP请求类型，比如"GET", "POST"等。
请求的URL
表示是否异步发送请求的布尔值

示例：

// 启动一个GET请求，并没有发送
xhr.open("get", "http://localhost:8080/AjaxTest/AjaxServlet", false);

如果确认要发送请求，则需要调用send()方法。

send()方法接受一个参数，即要作为请求主体发送的数据，如果不需要通过请求主体发送数据，则必须传入null。使用Post方式请求就需要传入实体数据，使用Get方式请求就直接传入null。

// 启动一个GET请求，并没有发送
xhr.open("get", "http://localhost:8080/AjaxTest/AjaxServlet", true);
// 发送请求
xhr.send(null);

由于这次请求是同步的，JavaScript代码会等到服务器响应之后再继续执行。

3.3、接收响应

XHR对象有许多属性和响应有关：

responseText —— 作为响应主体被返回的文本
responseXML —— 如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM文档。
status —— 响应的HTTP状态（HTTP状态码）
statusText —— HTTP状态的说明（HTTP状态码的相应文本）
readyState —— 表示请求/响应过程的当前活动阶段，只有异步请求的情况下才可以检测到

在收到响应后，响应的数据会自动填充XHR对象的属性。

其中readyState属性表示请求/响应过程的当前活动状态，这个属性可取的值如下：

0 —— 未初始化。尚未调用open()方法
1 —— 启动。已经调用open()方法，但尚未调用send()方法
2 —— 发送。已经调用send()方法，但尚未接收到响应
3 —— 接收。已经接收到部分响应数据
4 —— 完成。已经接收到全部响应数据，而且已经可以在客户端使用了

为确保接收到适当的响应，应该像下面这样检查上述这两种状态代码：

只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。

因此，一个完整的XHR发送请求和接收响应应该是这样的：

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

// 先为XHR对象绑定事件，监听readyState属性变化，也即监听请求/响应的活动过程
xhr.addEventListener("readystatechange", () => {
    // 如果readyState属性等于4，表示已经接收到全部响应数据
    if(xhr.readyState === 4){       
        // 如果请求成功和重定向就打印响应数据，如果给出错误提示
        if((xhr.status === 200) || xhr.status === 304){
            console.log(xhr.responseText);
        }else{
            console("Request was unsuccessful: " + xhr.status);
        }
    }
});

// 启动一个GET请求，并没有发送
xhr.open("get", "http://localhost:8080/AjaxTest/AjaxServlet", true);

// 发送请求
xhr.send(null);

另外，在接收到响应之前还可以调用abort()方法来取消异步请求：

// 取消异步请求
xhr.abort();

调用这个方法后，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。

4.4、HTTP头部信息

每个HTTP请求和响应都会带有相应的头部信息，其中有的对开发人员有用，有的也没有什么用。

XHR对象也提供了操作这两种头部（即请求头部和响应头部）信息的方法。

默认情况下，在发送XHR请求的同时，还会发送下列头部信息：

Accept —— 浏览器能够处理的内容类型
Accept-Charset —— 浏览器能够显示的字符集
Accept-Encoding —— 浏览器能够处理的压缩编码
Accept-Language —— 浏览器当前设置的语言
Connection —— 浏览器与服务器之间连接的类型
Cookie —— 当前页面设置的任何Cookie
Host —— 发出请求的页面所在的域
Referer —— 发出请求的页面的URL。注意，HTTP规范将这个头部字段拼写错了，为了保证与规范一致，也只能将错就错了。这个英文单词的正确拼法应该是referrer
User-Agent —— 浏览器的用户代理字符串

使用setRequestHeader()方法可以设置自定义的请求头部信息。这个方法接收两个参数：

头部字段的名称
头部字段的值。

服务器在接收到这种自定义的头部信息之后，可以执行相应的后续操作。

要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()。

示例：

        //启动一个请求，以备发送
        xhr.open("get", "example.txt", true);   //异步请求

        xhr.setRequestHeader("MyHeader", "MyValue");

        //发送请求
        xhr.send(null);

调用XHR对象的getResponseHeader()方法并传入头部字段名称，可以取得相应的响应头部信息。

调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串。

示例：

                    var myHeader = xhr.getResponseHeader("MyHeader");
                    var allHeaders = xhr.getAllResponseHeaders();

在服务器端，也可以利用头部信息向浏览器发送额外的、结构化的数据。

在没有自定义信息的情况下，getAllResponseHeaders()方法通常会返回如下所示的多行文本内容：

4.5、GET请求

GET是最常见的请求类型，最常用于向服务器查询某些信息。

必要时，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。

对XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。

查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾。

而且所有名-值对都必须由和号（&）分隔，例如：

        xhr.open("get", "example.php?name1=value1&name2=value2", true);

下面这个函数可以辅助向现有URL的末尾添加查询字符串参数：

        function addURLParam(url, name, value){
            url += (url.indexOf("?") == -1 ? "?" : "&");
            url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
            return url;
        }

这个函数接受三个参数：

要添加参数的URL
参数的名称
参数的值

下面是使用这个函数来构建请求URL的示例：

        var url = "example.php";

        //添加参数
        url = addURLParam(url, "name", "Nicholas");
        url = addURLParam(url, "book", "Professional JavaScript");

        //初始化请求
        xhr.open("get", url, false);

4.6、POST请求

POST请求通常用于向服务器发送应该被保存的数据。

POST请求应该把数据作为请求的主体提交。

POST请求的主体可以包含非常多的数据，而且格式不限。

在open()方法第一个参数的位置传入"post"，就可以初始化一个POST请求，例如：

        xhr.open("post", "example.php", true);

发送POST请求的第二步就是向send()方法中传入某些数据。

由于XHR最初的设计主要是为了处理XML，因此可以在send()中传入XML DOM文档，传入的文档经序列化之后将作为请求主体被提交到服务器。

当然，也可以在此传入任何想发送到服务器的字符串。

默认情况下，服务器对POST请求和提交Web表单的请求并不会一视同仁，因此，服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。

可以使用XHR来模仿表单提交：

首先，将Content-Type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型。

其次，使用serialize()函数将页面中表单的数据序列化为字符串。

示例：

        function submitData(){
            var xhr = createXHR();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                        alert(xhr.responseText);
                    }else{
                        alert("Request was unsuccessful: " + xhr.status);
                    }
                }
            };

            xhr.open("post", "postexample.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            var form = document.getElementById("user-info");
            xhr.send(serialize(form));
        }

这个函数可以将ID为"user-info"的表单中的数据序列化之后发送给服务器。

与GET请求相比，POST请求消耗的资源会更多一些。

从性能角度来看，以发送相同的数据计，GET请求的速度最多可达到POST请求的两倍。

五、XMLHttpRequest 2级

XMLHttpRequest 1级只是把已有的XHR对象的实现细节描述了出来，而XMLHttpRequest 2级则进一步发展了XHR。

5.1、FormData

现代Web应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest 2级为此定义了FormData类型。

FormData为序列化表单以及创建于表单格式相同的数据（用于通过XHR传输）提供了便利。

下面的代码创建了一个FormData对象，并向其中添加了一些数据：

        var data = new FormData();
        data.append("name", "Nicholas");

这个append()方法接收两个参数：键和值。

分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。

通过向FormData构造函数中传入表单元素，也可以用表单元素的数据预先向其中填入键值对：

        var data = new FromData(document.forms[0]);

创建了FormData的实例后，可以将它直接传给XHR的send()方法，如下所示：

        xhr.open("post", "postexample.php", true);
        var form = document.getElementById("user-info");
        xhr.send(new FormData(form));

使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。

XHR对象能够识别传入的数据类型是FormData的实例，并配置适当的头部信息。

5.2、超时设定

XMLHttpRequest 2级规范为XHR对象添加了一个timeout属性，表示请求在等待响应多少毫秒之后就终止。

在给timeout设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout事件。

示例:

        //启动一个请求，以备发送
        xhr.open("get", "example.txt", true);   

        xhr.timeout = 1;    //将超时设置为1秒钟
        xhr.ontimeout = function(){
            alert("Request did not return in a second.");
        }

        //发送请求
        xhr.send(null);

5.3、overrideMimeType()方法

overrideMimeType()方法用于重写XHR响应的MIME类型。

因为返回响应的MIME类型决定了XHR对象如何处理它，所以提供一种方法能够重写服务器返回的MIME类型是很有用的。

示例：

假设，服务器返回的MIME类型是text/plain，但数据中实际包含的是XML。

根据MIME类型，即使数据是XML，responseXML属性中仍然是null。

通过调用overrideMimeType()方法，可以保证把响应当作XML而非纯文本来处理。

        //启动一个请求，以备发送
        xhr.open("get", "text.php", true);   

        xhr.overrideMimeType("text/xml");

        //发送请求
        xhr.send(null);

5.4、进度事件

Progress Events规范定义了客户端服务器通信有关的事件。

有以下6个进度事件：

loadstart —— 在接收到响应数据的第一个字节时触发
progress —— 在接收响应期间持续不断地触发
error —— 在请求发生错误时触发
abort —— 在因为调用abort()方法而终止连接时触发
load —— 在接收到完整的响应数据时触发
loadend —— 在通信完成或者触发error、abort或load事件后触发

每个请求都从触发loadstart事件开始，

接下来是一或多个progress事件，

然后触发error、abort或load事件中的一个，

最后以触发loadend事件结束。

①load事件

load事件可以用于替换readystatechange事件。

load事件处理程序会接收到一个event对象，其target属性就指向XHR对象实例。

因而可以访问到XHR对象的所有方法和属性。

示例：

        //创建XHR对象
        var xhr = createXHR();
        
        xhr.onload = function(event){
            if((event.target.status >= 200 && event.target.status < 300) || event.target.status == 304){
                alert(event.target.responseText);
            }else{
                alert("Request was unsuccessful: " + event.target.status);
            }
        };
        
        
        //启动一个请求，以备发送
        xhr.open("get", "example.txt", true);   

        //发送请求
        xhr.send(null);

②progress事件

progress事件会在浏览器接收新数据期间周期性地触发。

onprogress事件处理程序会接收到一个event对象，它包含这四个属性：

target —— 指向XHR对象
lengthComputable —— 表示进度信息是否可用的布尔值
position —— 表示已经接收的字节数
totalSize —— 表示根据Content-Length响应头部确定的预期字节数

有了这些信息，就可以为用户创建一个进度指示器：

不睡觉的怪叔叔

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的AJAX

一、传统的前后端交互方式1.1、异步和同步的概念同步（synchronous） —— 指一个时间段内系统只能有一个进程在执行异步（asynchronous） —— 指一个时间段内系统可以有多个进程在执行1.2、传统前后端交互的原理传统的前后端交互过程：传统的前后端交互方式（无AJAX）是同步交互的方式，同步的过程只允...
复制链接

扫一扫