Ajax
什么是Ajax
如果网页中的某一个位置需要修改，使用Ajax或者是JavaScript可以实现异步刷新达到只刷新局部页面的效果。实际开发中使用的是Ajax，JavaScript作为了解即可。
JavaScript实现异步请求
JavaScript实现异步请求主要是通过XMLRequest对象的方法。该对象有以下方法：
1 、open()
使用open方法与服务器建立连接
【写法】
open(方法名,服务器地址,true)
【参数解释】
方法名包括get、post
true：表示异步 刷新，false表示全局刷新
2、 send()方法
① 如果是get方法则 send(null)
② 如果是post方法send(参数值)
3、 setRequestHeader(header, value)
① get请求不需要 设置次此方法
② post需要设置
如果请求内容中包含了文件上传：
setReQuestHeader(“Content-Type”,“multipart/form-data”);
如果 请求呃逆荣不包含文件上传：
setReQuestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
XMLRequest对象的属性：
onreadyStatechange: 回调函数
responseText： 相应格式为String
responseXML ：相应格式为XML
<%@ 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);//k=v
}
function registerGet()
{
var mobile = document.getElementById("mobile").value;
//通过ajax异步方式 请求服务端
xmlHttpRequest = new XMLHttpRequest();
//设置xmlHttpRequest对象的回调函数
xmlHttpRequest.onreadystatechange = callBack ;
xmlHttpRequest.open("get","MobileServlet?mobile="+mobile,true);
//设置post方式的 头信息 ,get不需要
//xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send(null);//k=v
}
//定义回调函数 (接收服务端的返回值)
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="registerGet()" />
</body>
</html>
用Ajax方式 实现异步请求
通用
请求格式
$.ajax(
url:请求地址,
请求方式: get|post,
data: 请求数据,
success: function(res,testStatus){
},
error:function(xhr,errorMessage,e){
}
);
参数解释：
当响应状态码为200，进入success函数，返回值自动传入res参数中。若服务端代码错误则进入error函数。
var $mobile = $("#mobile").val();
$.ajax({
url:"MobileServlet",
method:"post",
data:"mobile="+$mobile,
success:function(result,testStatus)
{
if(result == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
},
error:function(xhr,errrorMessage,e){
alert("系统异常！");
}
$.post()
写法：
$.post(
请求路径,
请求参数,
function(result){
},
预期返回值
);
预期返回值有： “xml”、“string”、“text”，可以不写
$.post(
"MobileServlet",
"mobile="+$mobile,
function (result){
if(result == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
},
"text"
);
$.get()
写法：
$.gte(
请求路径,
请求参数,
function(result){
},
预期返回值
);
预期返回值有：“string”、“text”，可以不写
$.get(
"MobileServlet",
"mobile="+$mobile,
function (result){
if(result == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
}
);
load()
写法：
$("选择器").load(
请求路径,
请求参数,
function(){
} //function一般省略
);
load()将服务器的返回值显示到选择器所选中的dom对象中。
例如：
$("#tip").load(
"MobileServlet",
"mobile="+$mobile
);
getJson()
写法
$.getJson(
请求路径,
Json格式的请求参数,
function(result){
}
);
说明：
getJson不仅要求请求参数是Json格式的，而且服务器的返回值也必须是是Json格式的
$.getJSON(
"MobileServlet",
{"mobile":$mobile},
function (result){//返回值是Json格式的
if(result.msg == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
}
);
后台返回只有一个Json对象时
$.getJson(
"JsonServlet",
{"name":"zs", "age":24},
function(result){
//将返回值转为js能够识别的Json对象
var jsonPerson = eval(result.person1);
alert( jsonPerson.name +"-----"+jsonPerson.age);
}
);
后台返回有多个Json对象时，遍历
$.getJson(
"JsonServlet",
{"name":"zs", "age":24},
function(result){
//将返回值转为js能够识别的Json对象
var json = eval(result);
$.each(json, funtion(){
alert(this.name+" "+this.age);
});
});
<%@ 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.8.3.js"></script>
<script type="text/javascript">
function register()
{
var $mobile = $("#mobile").val();
/*
$.ajax({
url:"MobileServlet",
method:"post",
data:"mobile="+$mobile,
success:function(result,testStatus)
{
if(result == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
},
error:function(xhr,errrorMessage,e){
alert("系统异常！");
}
});
$.post(
"MobileServlet",
"mobile="+$mobile,
function (result){
if(result == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
},
"text"
);
$.get(
"MobileServlet",
"mobile="+$mobile,
function (result){
if(result == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
}
);
$("#tip").load(
"MobileServlet",
"mobile="+$mobile
);
*/
$.getJSON(
"MobileServlet",
// "mobile="+$mobile,
{"mobile":$mobile},
function (result){//msg:true|false
alert(123);
if(result.msg == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
}
);
}
</script>
<title>Insert title here</title>
</head>
<body>
手机：<input id="mobile"/>
<br/>
<input type="button" value="注册" onclick="register()" />
<span id="tip"></span>
</body>
</html>