1 简述对Ajax的理解
参考答案
AJAX是Asynchronous JavaScript and Xml 异步的JavaScript和Xml。它一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求。服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容。
2 下列说法正确的是（）
A. Ajax的核心对象是XMLHttpResponse对象
B. Ajax的XMLHttpRequest对象的status属性代表响应的状态码
C. 编写Ajax程序时，无需对浏览器进行判断即可创建XMLHttpRequest对象
D. 编写Ajax程序时，需要为readystatechange事件添加回调处理
参考答案
本题的正确答案为BD。
A选项说法错误。XMLHttpRequest是Ajax的核心对象。
C选项说法错误。编写Ajax程序时，需要对浏览器进行判断后，再创建XMLHttpRequest对象。
3 简述使用AJAX进行编程的步骤
参考答案
使用AJAX编程的步骤如下：
1. 获取AJAX对象：获取 XMLHttpRequest对象。
2. 创建请求：调用XMLHttpRequest对象的open方法。
3. 设置回调函数：为AJAX对象的 onreadystatechange事件设定响应函数。
4. 发送请求：调用Ajax对象的send方法。
4 使用Ajax检验注册信息中的中文昵称是否存在
检查如图-1所示的昵称是否存在。
图– 1
如果昵称存在，界面显示效果如图-2所示。
图– 2
如果昵称不存在，界面显示效果如图-3所示。
图– 3
参考答案
实现此案例可按照如下步骤进行。
步骤一：新建regist.html文件
新建regist.html文件，页面代码如图-4所示。
图– 4
步骤二：使用JS编写check_name（）方法
在regist.html文件中，编写JS代码，使用AJAX验证昵称是否存在，代码如图-5所示。
图–5
document.getElementById(“name_msg”).innerHTML=“正在检查。。。“；这行代码在服务器还没有返回信息之前，为用户提供良好的交互体验。
步骤三：创建ActionServlet.java文件
创建ActionServlet，在该Servlet中实现服务器端判断昵称是否存在。代码如图-6所示。
图– 6
步骤四：配置ActionServlet
在web.xml中配置ActionServlet，配置的代码如下：
<servlet> <servlet-name>ActionServlet</servlet-name> <servlet-class>web.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ActionServlet</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <welcome-file-list>
步骤五：运行，查看结果
当输入存在的昵称时，界面显示如图-7所示。
图– 7
输入昵称不存在时，界面显示效果如图-8所示。
图– 8
本案例的完整代码如下。
regist.html文件的完整代码如下：
<html>
<head>
<title>regist.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/my.js"></script>
<script type="text/javascript">
functioncheck_name(){
var nickname = document.getElementById("nickname");
var xhr = getXhr();
xhr.open("post","check_name.do",true);
xhr.setRequestHeader('content-type',
'application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
document.getElementById("name_msg").innerHTML = xhr.responseText;
}
};
document.getElementById("name_msg").innerHTML="正在检查。。。";
xhr.send("nickname="+nickname.value);
}
</script>
</head>
<body>
<!-- 验证注册信息中的用户名是否可用 -->
<form action="" method="post">
<fieldset>
<legend>注册信息</legend>
昵称：<input name="nickname" id="nickname"/>
<input type="button" value="检查一下吧" onclick="check_name()"/>
<span id="name_msg" style="color:red;"></span>
<br/><br/>
<input type="submit" value="注册"/>
</fieldset>
</form>
</body>
</html>
my.js文件的完整代码如下所示：
/*获取Ajax对象*/
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
function $(id){
return document.getElementById(id);
}
function $F(id){
return $(id).value;
}
ActionServlet类的完整代码如下：
package web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
//获取请求资源路径
String uri = request.getRequestURI();
String path = uri.substring(
uri.lastIndexOf("/"),
uri.lastIndexOf("."));
if(path.equals("/check_name")){
String nickname = request.getParameter("nickname");
System.out.println(nickname);
if("张三".equals(nickname)){
out.println("该昵称不可用");
}else{
out.println("可以使用！");
}
}
out.close();
}
}
web.xml完整代码如下所示：
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>ActionServlet</servlet-name> <servlet-class>web.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ActionServlet</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> </web-app>