一、简介
Ajax(AsyNchronous JavaScript and XML)，即允许浏览器与服务器通信而无需刷新页面的技术。
二、传统模型与Ajax模型的区别
三、Ajax的关键
XMLHttpRequest：该对象是对JavaScript的一个扩展，可以使网页与服务器进行通信。是创建Ajax应用的最佳选择。Ajax使用XMLHttpRequest对象进行异步数据获取。
四、Ajax工作原理
五、Ajax工具包
六、Ajax缺陷及优点
1.缺陷：
- ①.由js和Ajax引擎导致的浏览器的兼容
- ②.页面局部刷新，导致后退等功能失效
- ③.对流媒体的支持没有FLASH、JavaApplet好
- ④.一些手持设备支持性差
2.优点： - ①.局部刷新页面，响应速度更快。
- ②.使页面显示效果更好
七、具体实现
1.XMLHttpRequest
(1)创建XMLHttpRequest对象var xhr=new XMLHttpRequest();
(2)XMLHttpRequest的方法
(3)实现发送请求
利用XMLHttpRequest对象与服务器进行通信包含以下三个关键部分
①.onreadystatechange事件处理函数
②.open方法
③.send方法
④.setRequestHeader(header,value)
(4)接收响应
①.readyState
②.status
③.responseText
④.responseXML
(5)HelloWrld
<script type="text/javascript">
window.onload=function(){
//1.获取a节点，并为其添加onclick响应函数
document.getElementsByTagName("a")[0].onclick=function(){
//3.创建一个XMLHttpRequest()对象
var req=new XMLHttpRequest();
//4.准备发送请求的数据：url
var url=this.href;
var method="GET";
//5.调用XMLHttpRequest
req.open(method,url);
//6.调用XMLHttpRequest对象的send方法
req.send(null);
//7.为XMLHttpRequst对象添加onreadystatechange响应函数
req.onreadystatechange=function(){
//8.判断响应是否完成：XMLHttpRequst对象的readyState属性值为4的时候
if(req.readyState==4){
//9.再判断响应是否可用：XMLHttpRequst对象status属性值为200
if(req.status==200||req.status==304){
//10.打印响应结果：reponseText
alert(req.responseText);
}
}
}
//2.取消a节点的默认行为
return false;
}
}
</script>
八、Ajax数据格式
从服务端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下3种格式返回数据：
(1)HTML
①.解析HTML
②.优缺点
③.代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var Nodes=document.getElementsByTagName("a");
for(var i=0;i<Nodes.length;i++){
Nodes[i].onclick=function(){
var req=new XMLHttpRequest();
var url=this.href;
var method="GET";
req.open(method,url);
req.send(null);
alert("1");
//为XMLHttpRequst对象添加onreadystatechange响应函数
req.onreadystatechange=function(){
//判断响应是否完成：XMLHttpRequst对象的readyState属性值为4的时候
alert("2");
if(req.readyState==4){
alert("3");
//再判断响应是否可用：XMLHttpRequst对象status属性值为200
if(req.status==200||req.status==304){
//在原页面内显示信息
alert("4");
document.getElementById("details").innerHTML=req.responseText;
}
}
}
alert("5");
//2.取消a节点的默认行为
return false;
}
}
}
</script>
</head>
<body>
<ul>
<li>
<a href="files/zx01.html">zx01</a>
</li>
<li>
<a href="files/zx02.html">zx02</a>
</li>
<li>
<a href="files/zx03.html">zx03</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
(2)Json
①.Json介绍
②.Json示例
③.Json优缺点
④.Json的使用
1.Json格式使用
<script type="text/javascript">
var JsonObject={"name" : "zx",
"age" : 20,
"address" : {"city" : "nx","school" : "24x"},
"run" : function(){
alert("Json格式函数");
}
};
//通过Json对象调用
alert(JsonObject.name);
alert(JsonObject.address.city);
JsonObject.run();
</script>
2.Json字符串转化Json对象
//如何把字符串变成json格式，这里可以用eavl()，它将json字符串变为json对象
var Jsonstr="{'name':'zx'}";
//eval转换json对象,两个括号是转换json对象的格式
var Jsoneval=eval("("+Jsonstr+")");
alert(Jsoneval.name);//弹出name
//情况二
var str="alert('eval')";
//把字符串转换为本地的JS代码来执行
eval(str);
3.Json解析代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
window.onload=function(){
var Nodes=document.getElementsByTagName("a");
for(var i=0;i<Nodes.length;i++){
Nodes[i].onclick=function(){
var req=new XMLHttpRequest();
var url=this.href;
var method="GET";
req.open(method,url);
req.send(null);
alert("1");
//为XMLHttpRequst对象添加onreadystatechange响应函数
req.onreadystatechange=function(){
//判断响应是否完成：XMLHttpRequst对象的readyState属性值为4的时候
if(req.readyState==4){
//再判断响应是否可用：XMLHttpRequst对象status属性值为200
if(req.status == 200 || req.status==304){
//在原页面内显示信息
//1.结果为XML格式，所以需要使用responseXML来获取
var result=req.responseText;
var object=eval("("+result+")");
var name=object.name;
var hrefs=object.hrefs;
//2.结果不能直接使用，必须先创建对应的节点，再把节点加入到#details种
//补充：样式 <a href="1">zx1</a>,其中zx1为name,a即Node,hrefs即为href必须严格的获取
//下面三个连起来就是<a href="1">zx1</a>
var Node=document.createElement("a");
Node.appendChild(document.createTextNode(name));
Node.href=hrefs;
var detailsNode=document.getElementById("details");
detailsNode.innerHTML="";
detailsNode.appendChild(Node);//最外层节点连接name
}
}
}
//2.取消a节点的默认行为
return false;
}
}
}
</script>
</head>
<body>
<ul>
<li>
<a href="zx1.js">zx1</a>
</li>
<li>
<a href="zx2.js">zx2</a>
</li>
<li>
<a href="zx3.js">zx3</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
(3)XML
①.XML解析
要注意依据XML节点格式解析，从内向外依次连接节点。
②.XML优缺点
③.代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
window.onload=function(){
var Nodes=document.getElementsByTagName("a");
for(var i=0;i<Nodes.length;i++){
Nodes[i].onclick=function(){
var req=new XMLHttpRequest();
var url=this.href;
var method="GET";
req.open(method,url);
req.send(null);
alert("1");
//为XMLHttpRequst对象添加onreadystatechange响应函数
req.onreadystatechange=function(){
//判断响应是否完成：XMLHttpRequst对象的readyState属性值为4的时候
if(req.readyState==4){
//再判断响应是否可用：XMLHttpRequst对象status属性值为200
if(req.status==200||req.status==304){
//在原页面内显示信息
//1.结果为XML格式，所以需要使用responseXML来获取
var result=req.responseXML;
//2.结果不能直接使用，必须先创建对应的节点，再把节点加入到#details种
//补充：xml节点样式 <a href="zx1.html">zx1</a>,其中zx1为name,a即Node,hrefs即为href必须严格的获取
var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
var hrefs=result.getElementsByTagName("hrefs")[0].firstChild.nodeValue;
alert("1");
//下面三个连起来就是<a href="zx1.html">zx1</a>
var Node=document.createElement("a");
Node.appendChild(document.createTextNode(name));
Node.href=hrefs;
alert("2");
var detailsNode=document.getElementById("details");
detailsNode.innerHTML="";
detailsNode.appendChild(Node);//最外层节点连接name
alert("3");
}
}
}
//2.取消a节点的默认行为
return false;
}
}
}
</script>
</head>
<body>
<ul>
<li>
<a href="zx1.xml">zx1</a>
</li>
<li>
<a href="zx2.xml">zx2</a>
</li>
<li>
<a href="zx3.xml">zx3</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
九、jQuery中的Ajax
jQuery对Ajax操作进行了封装。
> 在JQuery中最底层的方法是$.ajax()
> 第二层是load(),$.get()和$.post()
> 第三层是$.getScript和$.getJSON()
1.load()方法
①.selector url
②.load传参数的方法
③.load回调函数
④.load方法的简单使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="scrpits/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
//使用load方法处理Ajax
var url=this.href;
//防止缓存
var args={"time":new Date()};
$("#content").load(url,args);
return false;
});
});
</script>
</head>
<body>
<a href="load.txt">load</a>
<br>
<span id="content"></span>
</body>
</html>
⑤.load参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../scrpits/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
//使用load方法处理Ajax
var url=this.href+" h2";
var urlz=this.href;
//防止缓存
var args={"time":new Date()};
$("#details").load(url,args);
$("#details").load(urlz,args);
return false;
});
})
</script>
</head>
<body>
<ul>
<li>
<a href="zx01.html">zx01</a>
</li>
<li>
<a href="zx02.html">zx02</a>
</li>
<li>
<a href="zx03.html">zx03</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
注意：所传的参数都为Json格式
2.$.get() (或.post())方法
①.get方法使用(post方法只需将get变为post)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="../scrpits/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url=this.href;
var args={"time":new Date()}
//args:JSON格式
//function:回调函数，当响应结束时，回调函数被触发，响应结果在data中。
$.get(url,args,function(data){
var name=$(data).find("name").text();
var hrefs=$(data).find("hrefs").text();
$("#details").empty().append("<a href='"+hrefs+"'>"+name+"</a>");//读取xml信息，返回页面
});
return false;
});
})
</script>
</head>
<body>
<ul>
<li>
<a href="zx1.xml">zx1</a>
</li>
<li>
<a href="zx2.xml">zx2</a>
</li>
<li>
<a href="zx3.xml">zx3</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
②.返回JSON格式的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="../scrpits/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url=this.href;
var args={"time":new Date()}
$.getJSON(url,args,function(data){
var name=data.name;
var hrefs=data.hrefs;
$("#details").empty().append("<a href='"+hrefs+"'>"+name+"</a>");//
});
$.get(url,args,function(data){
var name=data.name;
var hrefs=data.hrefs;
$("#details").empty().append("<a href='"+hrefs+"'>"+name+"</a>");//
},"JSON");
return false;
});
})
</script>
</head>
<body>
<ul>
<li>
<a href="zx1.js">zx1</a>
</li>
<li>
<a href="zx2.js">zx2</a>
</li>
<li>
<a href="zx3.js">zx3</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
十、Ajax小结
十一、用户登陆示例
1.user.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">
<title>user</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/scrpits/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$(":input[name='username']").change(function(){
var val=$(this).val();
val=$.trim(val);
if(val!=""){
var url="${pageContext.request.contextPath}/submit";
var args={"username":val,"time":new Date()};
$.post(url,args,function(data){
$("#message").html(data);
});
}
});
})
</script>
</head>
<body>
<form action="" method="post">
Username: <input type=" text" name="username" />
<br>
<div id="message"></div>
<input type="submit" value="submit">
</form>
</body>
</html>
2.submit.class
@WebServlet("/submit")
public class submit extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
List<String> userNames=Arrays.asList("AAA");
String userName=request.getParameter("username");
String result=null;
if(userNames.contains(userName)) {
result="<font color='red'>该用户已经被使用</font>";
}else {
result="<font color='green'>该用户可以使用</font>";
}
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
response.getWriter().print(result);
}
}
十二、Ajax使用Jackson
OjbectMapper map=new ObjectMapper();
Customer customer=new Customer("zx","20");
//调用mapper的writeValueAsString方法吧一个对象转为一个Json字符串
String jsonStr=mapper.writeValueAsString(customer);
十三、Ajax小结
在我们进行web编程时是获得服务器响应得到的一个json字符串，然后通过ajax解析字符串，返回相应的结果。
//登录的方法
function login(){
var name=$("#name").val();//通过id获取数据
var password=$("#password").val();
$.ajax({
url:contextPath+"/Login",
method:"post",
data:{action:"check",name:name,password:password},
success:function(jsonStr){
var result = eval("("+jsonStr+")");
if(result.status==1){
alert(result.data);
window.location.href=contextPath+"/pre/loginsuccess.jsp";
}else{
alert(result.message);
}
}
})
}
