AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
工作方式简析
传统的前台和后台交互的方式为:前台向服务器发送请求,服务器处理完请求后再将数据返回到前台页面,在服务器处理请求过程中,用户必须等待服务器的响应,在这段时间内用户不能干别的事情。而采用Ajax技术后,当用户从前台页面向服务器发送请求时,并不影响用户的其它操作,用户还可以浏览页面其它的内容或进行其它操作,这种方式并不打断用户的体验。举例说明:当我们在某论坛进行帐号注册时,传统方式可能是当我们填写完所有信息后,一起发送给服务器进行验证,如果出错,在返回该页面。使用Ajax后,并不需要这样。我们可以每填写一项,就可以发送给服务器,服务器判断是否合法,在返回信息。在服务器处理过程中,我们不必等代,可以填写下面的选项,而不必等待上面信息验证后才能填写下面信息。
图解普通方式:
图解Ajax的工作方式:
Ajax与服务器交互步骤
第一步:创建XMLHttpRequest对象
第二步:注册回调函数
第三步:设置连接信息
第四步:向服务器发送数据
第五步:接收服务器返回数据
实例演示
前台页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax测试</title>
<script type="text/javascript">
<!--
var xmlHttp;
function createXmlHttp(){
if(window.XMLHttpRequest) {
//针对 Firefox, Chrome, Opera, Safari,IE7,IE8
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
//针对IE6,IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function verify() {
var username = document.getElementById("username").value;
//第一步:创建XMLHttpRequest对象
createXmlHttp();
//第二步:注册回调函数
xmlHttp.onreadystatechange = callBack;
//第三步:设置连接信息
xmlHttp.open("GET","servlet/AjaxServlet?username="+username,true);
//第四步:向服务器发送数据
xmlHttp.send(null);
}
function callBack() {
//第五步:接收服务器返回数据
//判断对象的是否交互完成
if(xmlHttp.readyState == 4) {
//判断Http的交互是否成功
if(xmlHttp.status == 200) {
//获取服务器返回数据
//获取服务器输出的纯文本格式
var responseText = xmlHttp.responseText;
//将数据显示在页面
var usernameMsg = document.getElementById("usernameMsg");
usernameMsg.innerHTML = responseText;
}
}
}
-->
</script>
</head>
<body>
<form method="post" action="servlet/AjaxServlet">
用户名:<input type="text" name="username" id="username" /><span id="usernameMsg"></span><br/>
<input type="button" value="测试" οnclick="verify();" />
</form>
</body>
</html>
代码解析
xmlHttp.open()方法参数:
参数一:表示Http的请求方式,get或post方式,按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求。
参数二:请求URL的地址,get方式的参数在url中(本例采用get方式,以后会讲解post方式)
参数三:采用同步还是异步交互方式,true为异步方式
GET 还是 POST方式?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
xmlHttp.readyState的状态参数:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
服务器端代码:
package com.zyh.first;
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 AjaxServlet extends HttpServlet {
private static final long serialVersionUID = -4985183154715703715L;
public AjaxServlet() {
super();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//1.取参数
//2.检查参数是否有问题
//3.校验操作
//4.ajax返回相应数据
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String old = request.getParameter("username").trim();
if(null==old || "".equals(old)) {
out.println("<strong>用户名不能为空!</strong>");
} else {
if("zyh".equals(old)) {
out.println("<strong>用户名[" + old + "],已存在!</strong>");
} else {
out.println("<strong>用户名[" + old + "],不存在!</strong>");
}
}
out.flush();
out.close();
}
}