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="测试" onclick="verify();" />
</form>
</body>
</html>
代码解析
xmlHttp.open()方法参数：
参数一：表示Http的请求方式，get或post方式,按照HTTP规范，该参数要大写；否则，某些浏览器（如Firefox）可能无法处理请求。
参数二：请求URL的地址，get方式的参数在url中（本例采用get方式，以后会讲解post方式）
参数三：采用同步还是异步交互方式，true为异步方式
GET 还是 POST方式？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
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,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();
}
}
原文链接：https://www.f2er.com/ajax/165946.html