Ajax入门(与Java服务器交互)(一)

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 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（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,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();
	}

}