Java Web实战开发 | AJAX开发步骤（附视频限免）

下面通过例10-1来讲解AJAX开发步骤。

【例10-1】AJAX开发步骤。

假设在主页中有一个按钮，当单击该按钮后，向后端服务器发出AJAX请求，返回一些文本信息，并将文本信息的内容显示到按钮下面的div部分，以实现页面的局部刷新。下面按照10.1节介绍的步骤进行开发。

(1) 新建一个Web项目，取名为Chapt_10，在WebContet下新建一个JSP页面，命名为index.jsp，编写代码如下：

(2) 在WebContent下新建一个JSP页面，命名为ajaxResponse.jsp，代码如下：

(3) 访问index.jsp页面，如图10-3所示。

■ 图10-3访问index.jsp页面

(4) 单击“发送AJAX请求”按钮，index.jsp页面发送AJAX请求后页面进行刷新，如图10-4所示。

注意,此时浏览器的地址没有变化，AJAX请求发送成功，并返回响应，刷新了页面中id=result 的div节点的内容。

■ 图10-4index.jsp页面发送AJAX请求后页面进行刷新

下面对例10-1中每个步骤使用到的AJAX相关对象和方法进行说明。

(1) 步骤1中指定发送AJAX请求的事件源为按钮的单击事件，并定义事件处理函数ajaxRequest()。

(2) 步骤2调用getAjaxObject()方法获取XMLHttpRequest对象。

不同版本的浏览器，其内置的AJAX对象XMLHttpRequest也是不一样的，因此getAjaxObject()方法是通过探测不同浏览器的XMLHttpRequest对象类型，最终返回当前浏览器的内置XMLHttpRequest对象。可以将该方法抽取出来，形成一个外部JavaScript文件，需要时进行调用。

(3) 步骤3通过XMLHttpRequest对象的open()方法，指定AJAX请求的目标及方式。在xmlHttp.open("get","ajaxResponse.jsp",true);这条语句中包含以下3个参数。

① 第一个参数为提交方式，取值为get或者post，上面的例子是使用GET方式发出请求，也可以使用POST方式。

② 第二个参数指定处理AJAX请求的应用程序的URL，可以是JSP页面，也可以是Servlet。如果第一个参数取值是get，可以在URL后面传递参数，如index.jsp?a=1这样的形式。如果第一个参数值是post，并需要传递参数，就需要在步骤6之前对请求头进行设置。

③ 第三个参数指定AJAX请求是否采用异步方式，候选值为true或者false。其中true表示采用异步方式，这也是一般AJAX请求的方式。若设置为false，则该请求采用同步的方式，当请求发送后，将等待后端应用程序处理结果返回，页面再做响应，在此期间网页处于等待状态。因此，该参数一般设置为true。

(4) 步骤4指定处理AJAX响应的方法，使用XMLHttpRequest对象的onreadystatechange属性，并指定回调函数去处理，此处采用的是匿名函数的写法。

(5) 步骤5通过判断XMLHttpRequest的状态来处理AJAX请求返回的响应。XMLHttpRequest对象的属性及描述，如表10-1所示。

■ 表10-1XMLHttpRequest对象的属性及描述

其中，readyState属性表示AJAX响应的状态，当这个属性改变时，就会触发onreadystatechange 事件。readyState属性共有5种变化，分别代表了AJAX响应可能的状态。在后续处理中，可以针对每种响应状态编写处理代码。

当readyState=4且status为200时，表示响应已就绪，此时就可以通过XMLHttpRequest对象的responseText或者responseXML属性来获取AJAX响应。如果服务器响应的格式为文本格式，如例10-1中的JSP页面，或者JSON格式，则使用responseText；若是XML格式，则使用responseXML。

在获取到响应后，可以根据业务需求对响应进行解析并处理，然后利用DOM对象将最终数据动态地加载到要刷新的节点元素中，如本例中将返回的JSP页面中的文本内容，赋给id=result的div节点的innerHTML属性，达到页面局部刷新的效果。

注意，若使用innerText属性，则div内容显示时，将不会考虑HTML标签的转义显示，会按照普通文本原样输出。

(6) 步骤6为使用XMLHttpRequest对象的send()方法，发出AJAX异步请求。

① 如果在步骤3中指定的是GET方式，并且不需要传递参数，就可以参照本例，直接使用xmlHttp.send()方法即可。

② 如果在步骤3中指定的是POST方式，且需要传递参数，就使用以下语句：

上面两条语句指定该AJAX请求采用POST方式向后端应用程序发送参数a，其值为1。此时参数传递时不会像GET方式那样暴露在地址栏中。