1.Ajax简介
Ajax：异步js，xml
异步刷新：如果网页中某一个地方需要修改，异步刷新可以使只刷新的地方修改，而不是全局修改，比如，你看视频点赞不可能你点一个赞就刷新整个视频页面吧
2.js实现Ajax
js：
XMLHttpRequest对象
XMLHttpRequest对象的方法：
2-1:open(方法名（提交方式get，post）,服务器地址,true)
第三个参数是true表示异步请求，false表示同步请求
该方法作用：与服务端建立连接
2-2：send():
get: send(null)
post: send(参数值)
作用：发送数据。
2-3:sendRequestHeader(header,value):
请求头信息
get:不需要设置此方法。
post：需要设置：
a.如果请求元素中包含了文件上传。
setRequestHeader(“Content-Type”,”multipart/form-data”)
b.不包含文件上传
setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)
XMLHttpRequest对象的属性：
readystate:请求状态
只有状态为4代表请求完毕才算完成。
state：响应状态
只有200才响应正常
onreadyStatechange：回调函数。
图中b执行完就去执行a了
responseText：响应格式为String
responseXML：响应格式为
XML
3.注册时验证手机号码是否存在实例（js版Ajax）
这里就不连接数据库操作了
假设存在18888888888个号码，如果输入这个号码则会提示存在。
注册页面
register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<script type="text/javascript">
function register(){
var mobile = document.getElementById("mobile").value;
//通过ajax异步方式请求服务器
xmlHttpRequest = new XMLHttpRequest();
//设置xmlHttpRequest对象的回调函数
xmlHttpRequest.onreadystatechange = callBack;
xmlHttpRequest.open("post","mobileServlet",true);
//设置post方式的头信息
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send("mobile="+mobile);//key=value
}
//定义回调函数（接收服务器端的返回值）
function callBack(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
//接收服务器端返回的数据
var data = xmlHttpRequest.responseText;//服务器端返回值为string格式
alert(data.length+"==="+data);
if(data == "true"){
alert("该号码已存在，请更换！");
}else{
alert("注册成功！");
}
}
}
</script>
<title>Insert title here</title>
</head>
<body>
手机号码：<input id = "mobile" />
<br/>
<input type = "button" value = "注册" onclick = "register()">
</body>
</html>
Servlet：
package control;
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;
/**
* Servlet implementation class mobileServlet
*/
public class mobileServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String mobile = request.getParameter("mobile");
//假设此时数据库中只有一个号码：18888888888
PrintWriter out = response.getWriter();
if("18888888888".equals(mobile)){
out.write("true");//servlet以输出流的方式将信息返回给客户端
}else{
out.write("false");
}
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
程序我额外输出了请求状态的值，可以参看上面的方法。
4.使用JQuery实现Ajax
首先引用jQuery的架包
建立一个js
$.ajax({
url:服务器地址
请求方式：get，post
data：请求数据
success：function（result,testStatus）//result保存返回值，testStatus保存请求状态
{
}
error：function（xhr,errorMessage,e）
{
}
})
上述是jqueryajax的三种模板都能使用。
下面使用jquery版ajax
servlet就是上面的servlet
code:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<script type="text/javascript" src = "js/jquery-1.7.2.js"></script>
<script type="text/javascript">
function register(){
var $mobile = $("#mobile").val();
/* $.ajax({
url:"mobileServlet",
data:"mobile="+$mobile,
success:function(result,testStatus)
{
if(result == "true"){
alert("已存在，注册失败！");
}
else{
alert("注册成功！");
}
},
error:function(xhr,errorMessage,e){
alert("系统异常！");
}
})*/
$.post(
"mobileServlet",
"mobile="+$mobile,
function(result){
if(result == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
},
"text"
);
}
</script>
<title>Insert title here</title>
</head>
<body>
手机号码：<input id = "mobile" />
<br/>
<input type = "button" value = "注册" onclick = "register()">
</body>
</html>