Ajax - 异步原理及Js/Jquery两种使用方式

Posted 2021-04-08 大数据和人工智能技术

AJAX（Asynchronous javascript And XML，异步JavaScript和XML），是一种用于创建快速动态网页的技术。从名字可以发现，Ajax并不是一种全新的技术，而是整合了JavaScript和XML等现有技术。

1.Ajax的作用 

  Ajax 通过在后台与服务器之间交换少量数据的方式，实现网页的异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的局部内容进行更新，例如：我们在网页中观看电影时，如果点击了左下角的“赞”图标，那么“赞”的数量会从5353增加到5354（即局部内容进行了更新），而当前网页并不会被刷新，如图所示。

图  网页中的视频

而传统的网页（不使用 AJAX）如果需要更新内容，就必须重新加载整个网页。试想如果点击一下“赞”网页就刷新、视频就得从头开始看，肯定是非常不方便的。

AJAX的应用非常广泛，再如当我们在百度搜索框输入内容时，搜索框会自动查询并显示列表，但搜索框以外的网页不会发生变化，如图所示。

图 百度搜索框

还有百度地图、微博等，都大量使用到了AJAX技术。

2.使用JavaScript实现Ajax  

      使用JavaScript来实现Ajax，主要是借助XMLHttpRequest对象向服务器发送请求，并获取返回结果。

2.1XMLHttpRequest对象的常用方法  

(1) open(methodName,URL,isAsync)

(2) send(content)

发送HTTP请求。content是可选项，用来指定请求参数，将请求参数作为请求体的一部分一起发送给服务器。通常只在POST方式下才使用content参数（GET请求方式不携带请求体）。

(3) setRequestHeader(header,value)

在HTTP请求头中设置key/value对：①若为GET请求方式：则不用设置；②若为POST方式，a.当请求中包含文件上传元素时，设置为：

XMLHttpRequest.setRequestHeader("Content-Type", "mulipart/form-data");

b.当请求中不包含文件上传元素时，设置为：

XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

2.2XMLHttpRequest对象的常用属性  

(1)readystate

readystate表示XMLHttpRequest 对象发送的HTTP请求状态，共有五种状态，如表所示。

(2) status

status 表示HTTP响应中的状态码，各状态码的含义如表所示。

状态码	含义
200	服务器正常响应。
400	无法找到请求的资源。
403	没有访问权限。
404	访问的资源不存在。
500	服务器内部错误，很可能是服务器代码有错。

表 HTTP响应状态码

可以发现，只有当状态码为200时才表示响应成功；否则，说明HTTP响应不正常。

 (3) onreadystatechange

指定XMLHttpRequest对象的回调函数。每当readyState的属性值改变时，此回调函数就会被调用一次。

(4) responseText

从服务器端返回的string格式的响应内容。

(5) responseXML

从服务器端返回的XML格式的数据，可以直接被当作DOM对象使用。

2.3使用Ajax实现异步请求  

使用JavaScript实现Ajax，分为POST或GET两种方式，但大体的步骤都相同，如下：

     ①创建XMLHttpRequest对象，即创建一个异步调用对象.

     ②设置并编写回调函数

     ③初始化XMLHttpRequest对象的参数值（若是POST方式，还需要设置“请求头”）

     ④发送HTTP请求

再在回调函数中编写： 

     ⑤获取异步调用返回的数据

     ⑥使用JavaScript或Jquery等实现局部刷新

示例：

很多手机软件、网站都会要求我们绑定手机号码，并且一个手机号码只能绑定一个账号。因此，我们在绑定手机号码之前，程序会先检验此号码是否已经被绑定：若已经被绑定，则提示“此号码已经被绑定，请尝试其他号码”；否则提示“绑定成功”。 现在我们就用Ajax作为前端技术，来实现此功能。

(1)采用POST方式

服务器端MobileServlet.java

客户端index.jsp

可以发现，服务器端是通过PrintWriter对象out，将结果以字符串的形式，传递给客户端；而客户端通过XMLHttpRequest对象的responseText属性，来获取该结果；此外，客户端中responseText属性的返回值是string类型，所以在服务器端也应该传递String类型的结果。

运行结果：

①输入已存在的号码18888888888，如图所示。

图  输入已存在的号码

②输入暂不存在的号码，如图所示。

图 输入不存在的号码

图 输入格式错误的号码

(2)采用GET方式

如果将上例改为GET方式的Ajax，则只需要做四处更改，具体如下：

①将XMLHttpRequest对象的open()方法中的method参数值改为”get”；

③删除设置XMLHttpRequest对象头信息的代码

④将XMLHttpRequest对象的send(data)方法中的data，改为null（即将data的值，转移到了send()方法的url参数中）。

可以发现，将POST方式改为GET方式后，把需要发送的参数从send()方法转移到open方法中的url参数中，并且不需要再设置头信息。

具体如代码下：

服务器端MobileServlet.java

 与POST方式完全相同

客户端index_get.jsp

   与POST方式的不同之处如下：

读者可以结合POST方式（index.jsp）和GET方式（index_get.jsp）中的源代码，仔细对比。

4.使用JQuery实现Ajax 

除了使用JavaScript以外，我们还可以使用JQuery来实现Ajax，而且更加简洁、方便。JQuery方式的Ajax，主要是通过JQuery提供的$.ajax()、$.get()、$.post()、load()等方法来实现的。

4.1$.ajax()方法

语法：

基本格式是：所有参数写在$.ajax({…})中，不同参数之间用逗号隔开，每个参数以“参数名：参数值”的方式书写。

本质就是将JavaScript中XMLHttpRequest的属性和方法，以参数化的形式集中管理，如表所示。

除了表中介绍的以外，还有cache、async、beforeSend、complete、contentType等其他参数，读者可以访问http://www.w3school.com.cn/jquery/ajax_ajax.asp进行学习。

现在用jQuery提供的$.ajax()方法，来实现“检测手机号码是否已绑定”的客户端函数（服务器端及客户端其他代码，与之前的完全一致）：

客户端jQuery_ajax.jsp

运行结果与之前的完全相同。

4.2$.get()方法

$.get(…)方法指定以GET方式发送请求，与$.ajax({…})方法在语法上的区别是：①参数值必须按照一定的顺序书写；②省略了参数名、type参数、以及error()函数；③$.ajax({…})的各个参数是用大括号{}括起来的，而$.get(…)没有大括号。

语法（各参数顺序不可变）：

即，等价于:

4.3$.post()方法  

$.get()方法指定以POST方式发送请求，也是将参数值按照一定的顺序书写。

语法（各参数顺序不可变）：

即语法上，只是将方法名$.get()变为了$.post()，其他语法完全一致。

4.4$(selector).load ()方法  

$(selector).load ()方法是在$.get()（或$.post()）方法的基础上进一步优化，不但会发送请求，还会将响应的数据放入指定的元素。其中$(selector)是指jQuery选择器指定的元素。

语法：

因为load()方法会直接将响应结果放入指定元素，所以通常可以省略load()中的function()函数。

我们再用load()方法，实现一下“检测手机号码是否已绑定”：

服务器端jQuery_load.jsp

MobileLoadServlet.java

仔细观察，客户端用load()方法时，服务器端直接将结果字符串返回。

客户端jQuery_load.jsp

运行结果仍然与之前的完全一样。

热门文章：