Java学习不走弯路教程（16 用Ajava异步请求）

用Ajava异步请求

一. 前言

在前上一章教程中，我们把HTML页面放到了服务器端。
本章将在上一章的基础上，进一步扩展程序。

注：
1.本文针对初学Java的同学训练学习思路，请不要太纠结于细节问题。
2.本文旨在达到抛砖引玉的效果，希望大家扩展本例子，以学到更多知识的精髓。

学习本章需要准备的知识：
1.读完本系列教程的前面章节。
2.理解JavaScript基本语法。
3.理解Ajax请求。

二. 步入正题
话不多说，大家自己理解，下面步入正题：

本章我们讲客户端的同步请求转化为异步请求。
我们先看一下同步请求和异步请求的区别：

按钮的提交属于同步请求，从点击按钮到服务器传回结果之间，浏览器是不能响应任何事件。
本章我们让按钮点击后，不提交页面，而是通过Ajax发起异步请求来获取数据，并显示到本页面上。

不同的浏览器对Ajax的实现控件不同：
比如IE浏览器：

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

Chrome浏览器：

xmlHttp = new XMLHttpRequest();

我们用Chrome方式给大家例子：
首先，点击按钮后不提交页面，而是调用JavaScript代码。
我们做如下修改：

修改前：<input type="submit" value="query"/>
修改后：<input type="button" value="query" onclick="doQuery()"/>

如果input类型是submit，则点击后会提交其所属的form。

接下来我们实现doQuery()方法如下：

 1 <script type="text/javascript">
 2 function doQuery(){
 3     // 点击后，首先显示loading...
 4     document.getElementById("result").innerHTML = "loading...";
 5     
 6     // 生成Ajax对象
 7     var xmlhttp = new XMLHttpRequest();
 8     
 9     // 定义状态改变时的回调函数(在发起请求后，服务器会向客户端请求这个函数。这里只是定义)
10     xmlhttp.onreadystatechange = function() {
11         
12         // 在服务器处理请求完毕后，xmlhttp.readyState值为4(XMLHttpRequest.DONE)
13         if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
14             
15             // 200 表示正常返回
16            if (xmlhttp.status == 200) {
17                    // 显示服务器返回的数据
18                document.getElementById("result").innerHTML = xmlhttp.responseText;
19            }else {
20                    // 显示loading data error.
21                document.getElementById("result").innerHTML = "loading data error.";
22            }
23         }
24     };
25     
26     // 获取页面上的personid的值
27     var personid = document.getElementById("personid").value;
28     
29     // 发起ajax请求
30     xmlhttp.open("GET", "/person?personid="+personid, true);
31     xmlhttp.send();
32 }
33 </script>

三. 测试

启动服务器：

向服务器请求person.html文件，在浏览器端输入1，点query按钮：

显示查询结果：

完整程序请大家从[这里]下载

如有问题，大家来我的网站进行提问。
https://www.java123.vip/qa

Java学习不走弯路教程（16 用Ajava异步请求）

猜你喜欢