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>