第八章AJAX
本章主干知识点：
1、AJAX 基础：为什么要AJAX；XmlHttpRequest对象；封装XHR对象；
2、Json：Json语法规范；浏览器和服务器对Json的处理；
3、AJAX Jquery；
4、AJAX案例：CRUD；新闻的无刷新评论；
5、AJAX高级：重定向的陷阱；AJAX全局事件；
第 1 节1-什么是AJAX
第 2 节2-没有AJAX的日子
第 3 节3-第一个Ajax程序
第 4 节4-封装一个Ajax的JS库
第 5 节5-案例：检查用户名是否可用
第 6 节6-为什么需要Json
第 7 节7-什么是Json
第 8 节8-如何把Json字符串解析为JS对象
第 9 节9-服务器端把Java对象序列化为Json
第 10 节10-Gson两个细节问题
第 11 节11-Jquery封装的AJAX
第 12 节12-JQuery封装 AJAX案例
第 13 节13-JQueryAJAX处理Json1
第 14 节14-JQueryAJAX处理Json2
第 15 节15-AJAX案例：无刷新登录
第 16-18 节16-AJAX案例：文章无刷新评论1 -3
第 19-25 节19-AJAX案例：学生增删改查1 -7
第 26 节26-如何在AJAX中重定向
第 27 节27-AJAX显示loading避免用户等不急
第 28 节28-JQuery的AJAX全局事件
【第 1 节1-什么是AJAX 】
AJAX简介
ajax：就是在页面不刷新的时候，在页面上向服务器发出请求获得数据的一种机制。
1 没有AJAX会怎么样？普通的页面每次执行提交请求的时候都要刷新当前页面。开发一个看效果：用<video src="diaosi.mp4" autoplay controls></video>播放视频（只有支持html5的浏览器能播放），然后放一个提交评论的表单。
2 在演示使用了AJAX的页面，如果提交评论，页面就不会刷新，视频不会被打断。
3 AJAX是一种进行页面局部异步刷新的技术。用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中，不是整个页面刷新，而是在HTML页面中使用JavaScript创建XMLHTTPRequest（简称XHR）对象来向服务器发出请求以及获得返回的数据，在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据，这样页面就不会刷新了。 XMLHTTPRequest是AJAX的核心对象。局部：一小部分刷新，其他部分不刷新；异步：网络请求期间，浏览器不卡。
【第 2 节2-没有AJAX的日子】
例子：【没有ajax】
【NoAjax1Servlet.java】
package com.rupeng.web6;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class NoAjax1Servlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
String action = req.getParameter("action");
if(action==null||action.length()<=0)
{
req.getRequestDispatcher("/NoAjax1.jsp").forward(req, resp);
}
else
{
int i = Integer.parseInt(req.getParameter("i"));
int j = Integer.parseInt(req.getParameter("j"));
int result = i+j;
req.setAttribute("i", i);
req.setAttribute("j", j);
req.setAttribute("result", result);
try
{
Thread.sleep(5000);
} catch (InterruptedException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
req.getRequestDispatcher("/NoAjax1.jsp").forward(req, resp);
}
}
}
【NoAJAX.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>Insert title here</title>
</head>
<body>
<form method="post" action="noajax1">
<input type="hidden" name="action" value="calc"/>
<input type="text" name="i" value="${i}"/>+
<input type="text" name="j" value="${j}"/>
<input type="submit" value="="/>${result }
</form>
<br/>
<video src="xiaopingguo.mp4" controls="controls" ></video><br/>
123123131323fasfasfasf
</body>
</html>
【有ajax】
【YouAJAXServlet.java】
package com.rupeng.web6;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
public class YouAJAXServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
String action = req.getParameter("action");
if (action == null || action.length() <= 0)
{
req.getRequestDispatcher("YouAJAX.jsp").forward(req, resp);
} else if (action.equals("post"))
{
String message = RupengUtils.getParameter(req, "message");
new CommentDAO().addnew(message);
resp.getWriter().print("ok");
}
else if(action.equals("list"))
{
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/html?charset=UTF-8");
List<CommentInfo> list = new CommentDAO().getAll();
String json = new Gson().toJson(list);
resp.getWriter().print(json);
}
}
}
【YouAJAX.jsp】
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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 rpAjax=function(url,onsuccess){
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xmlhttp.open("POST",url,true);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
onsuccess(xmlhttp.responseText);
}
else
{
alert("ajax请求错误");
}
}
};
xmlhttp.send();
};
var loadComments=function(){
rpAjax("youajax?action=list",function(respTxt){
var json = eval("("+respTxt+")");
var ulComments = document.getElementById("ulComments");
var html="";
for(var i=0;i<json.length;i++)
{
var comment = json[i];
html+="<li>"+comment.createDateTime+"："+comment.message+"</li>";
}
ulComments.innerHTML=html;
});
};
window.οnlοad=function(){
document.getElementById("submit").οnclick=function(){
var message = document.getElementById("message").value;
rpAjax("youajax?action=post&message="+message,function(){
loadComments();
document.getElementById("message").value = "";
});
};
loadComments();
};
</script>
</head>
<body>
<video src="xiaopingguo.mp4" controls="controls" ></video>
<ul id="ulComments">
</ul>
<textarea rows="5" cols="50" id="message"></textarea>
<input type="button" value="评论" id="submit"/>
</body>
</html>
XMLHTTPRequest
1 开发一个AJAX功能需要开发服务端和客户端两块程序。以一个在服务器端计算加法的程序为例。首先开发一个Servlet计算两个数的和。服务器端注意println和print结果不一样哦
2封装一个简单的js库简化XHR调用（备注）。
3 案例：AJAX校验用户名是否存在，焦点离开用户名触发。T_Users Id,Name,Password。在数据库中录入几条数据。注册页面，在用户名控件失去焦点（blur），发出ajax请求（请求带用户名），服务器返回ok（在服务器端根据不同的情况进行print("ok")或者error），如果是“error”，就alert提醒用户，用户名已经被注册。
4 思考：根据id加载用户信息怎么做？加载T_users数据到table中？怎么做。
可以用xml储存数据，但实际中只用JSON
【第 3 节3-第一个Ajax程序】
【Ajax1Servlet.java】
package com.rupeng.web6;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Ajax1Servlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
String action = req.getParameter("action");
if(action==null||action.length()<0)
{
req.getRequestDispatcher("/Ajax11.jsp").forward(req, resp);
}
else if(action.equals("add"))
{
int i = Integer.parseInt(req.getParameter("i"));
if(i<0)
{
//resp.sendRedirect("index.jsp");
//return;
}
int j = Integer.parseInt(req.getParameter("j"));
resp.setContentType("text/html");
resp.getWriter().print(i+j);
}
}
}
【Ajax1.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>Insert title here</title>
<script type="text/javascript">
window.οnlοad=function(){
var add = document.getElementById("add");
add.οnclick=function(){
var i = document.getElementById("i").value;
var j = document.getElementById("j").value;
//XHR对象执行，发出Http请求，页面不用刷新
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象，考虑兼容性
xhr.open("POST","ajax1?action=add&i="+i+"&j="+j,true);
xhr.onreadystatechange=function(){
alert("onreadystatechange,readyState="+xhr.readyState);
if(xhr.readyState==4)//服务器返回了
{
if(xhr.status==200)//xhr.status http状态码
{
alert(xhr.responseText);//xhr.responseText返回的报文体
document.getElementById("result").innerText = xhr.responseText;
//根据服务器返回的内容更新需要更新的内容
}
else
{
alert("服务器返回错误");
}
}
};
alert("send之前");
xhr.send();//发出请求。并不会等服务器返回send方法才结束，因为我们需要提前监听xhr.onreadystatechange
// 事件，以便得知“服务器返回了”
alert("send之后");
};
};
</script>
</head>
<body>
<input type="text" id="i"/>+<input type="text" id="j"/>
<input type="button" id="add" value="="/><span id="result"></span>
</body>
</html>
【第 4 节4-封装一个Ajax的JS库】
【ajax.js】
//url就是请求的地址
//successFunc就是一个请求返回成功之后的一个function，有一个参数，参数就是服务器返回的报问体
function rpajax(url,successFunc)
{
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象，考虑兼容性
xhr.open("POST",url,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4)//服务器返回了
{
if(xhr.status==200)//xhr.status http状态码
{
successFunc(xhr.responseText);
}
else
{
alert("服务器返回错误");
}
}
};
xhr.send();//发出请求。并不会等服务器返回send方法才结束，因为我们需要提前监听xhr.onreadystatechange
}
【Ajax11.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>Insert title here</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.οnlοad=function(){
var add = document.getElementById("add");
add.οnclick=function(){
var i = document.getElementById("i").value;
var j = document.getElementById("j").value;
rpajax("ajax1?action=add&i="+i+"&j="+j,function(respTxt){
alert(respTxt);
document.getElementById("result").innerText = respTxt;
});
};
};
</script>
</head>
<body>
<input type="text" id="i"/>+<input type="text" id="j"/>
<input type="button" id="add" value="="/><span id="result"></span>
</body>
</html>
【第 5 节5-案例：检查用户名是否可用
【UserDAO.java】【UserInfo.java】
引用【Ajax.js】
【CheckUserName.html】
<!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>Insert title here</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.οnlοad=function(){
var txtUserName= document.getElementById("txtUserName");
//onblur：焦点离开触发onblur事件
txtUserName.onblur = function(){
//var username = txtUserName.value;
var username = this.value;
rpajax("checkUserName?username="+username,function(data){
var msg = document.getElementById("msg");
if(data=="ok")
{
msg.innerHTML = "用户名可用";
msg.style.color = "green";
}
else if(data=="error")
{
msg.innerHTML = "用户名已经被注册 ";
msg.style.color = "red";
}
});
}
}
</script>
</head>
<body>
用户名：<input type="text" id="txtUserName"/><span id="msg"></span>
</body>
</html>
【CheckUserNameServlet.java】
package com.rupeng.web6;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckUserNameServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
String username = RupengUtils.getParameter(req,"username");
UserInfo user = UserDAO.getByUserName(username);
resp.getWriter().print(user==null?"ok":"error");
}
}
【第 6 节6-为什么需要Json】
【获取用户信息】
【GetUserInfo.html】
<!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>Insert title here</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.οnlοad=function(){
var txtUserName= document.getElementById("txtUserName");
//onblur：焦点离开触发onblur事件
txtUserName.onblur = function(){
//var username = txtUserName.value;
var username = this.value;
rpajax("getUserInfo?username="+username,function(respTxt){
if(respTxt=="error")
{
alert("查无此用户名");
}
else
{
var values = respTxt.split(",");
var age = values[1];
var email = values[2];
var phoneNum = values[3];
document.getElementById("age").innerHTML = age;
document.getElementById("email").innerHTML = email;
document.getElementById("phoneNum").innerHTML = phoneNum;
}
});
}
}
</script>
</head>
<body>
用户名：<input type="text" id="txtUserName"/>
年龄：<span id="age"></span>
邮箱：<span id="email"></span>
手机号：<span id="phoneNum"></span>
</body>
</html>
【GetUserInfoServlet.java】
package com.rupeng.web6;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
public class GetUserInfoServlet extends HttpServlet
{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
String username = RupengUtils.getParameter(req, "username");
UserInfo u = UserDAO.getByUserName(username);
if(u==null)
{
resp.getWriter().print("error");
}
else
{
/*
String s = u.getAge()+","+u.getEmail()+","+u.getPhoneNum();
resp.getWriter().print("ok,"+s);*/
/*
String s = "{age:"+u.getAge()+",email:'"+u.getEmail()+"',phoneNum:'"+u.getPhoneNum()+"'}";
resp.getWriter().print(s);*/
Gson gson = new Gson();
String s = gson.toJson(u);//遍历对象的所有字段，生成json字符串
resp.getWriter().print(s);
}
}
}
【第 7 节7-什么是Json】
Json
1 AJAX传递复杂数据如果自己进行格式定义的话会经历组装、解析的过程，因此AJAX中有一个事实上的数据传输标准JSon。Json（是一个标准，就像XML一样，Json规定了对象以什么样的格式保存为一个字符串）将复杂对象序列化为一个字符串，在浏览器端再将字符串反序列化为JavaScript可以读取的对象。Json被几乎所有语言支持
2 Json是什么，Json就是javascript对象或者数组格式的字符串,Http协议不能传递JavaScript对象，所以要转换为字符串进行传输。
JavaScript对象（键值对） varperson= {name:'rupeng',age:8};
JavaScript数组：var names= ['rupeng','qq','taobao'];
JavaScript对象数组：varpersons = [{name:'rupeng',age:8}, {name:'qq',age:15}, {name:'taobao',age:10}];
JavaScript对象关联：var p ={name:'yzk',child:{name:'timi',age:1}};
笔记：json：服务器端把java对象转换为json字符串，在浏览器段把json字符串转换为JavaScript对象。就是一个字符串。
【Json1.html】
<!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>Insert title here</title>
<script type="text/javascript">
var p = {name:'rupeng','age':18,email:"yzk365@qq.com"};
//alert(p.email);
//alert(p.age);
var names = ['rupeng','baidu','qq'];
//alert(names[1]);
var nums = [3,88,999];
//alert(nums[2]);
var persons=[{name:'yzk',age:18,email:'yzk365@qq.com'},{name:'abc',age:22,email:'abc@qq.com'}];
var p1 = persons[1];
//alert(p1.name);
var aa={name:'yzk',child:{name:'timi',age:'2'}};
//alert(aa.child.name);
var aa2 ={name:'yzk',child:{name:'timi',age:2,mother:{name:'fiona',age:18}}};
alert(aa2.child.mother.name);
alert(aa2.child.name);
</script>
</head>
<body>
</body>
</html>
【第 8 节8-如何把Json字符串解析为JS对象】
Json转换
1 json：服务器端 把java对象转换为json字符串，在浏览器段把json字符串转换为JavaScript对象。就是一个字符串。
2 如何把json字符串转换为js对象：var obj = eval("("+data+")")。举例：普通对象、数组、对象数组、多对象关联。eval有安全性问题。（所有浏览器支持）
3（*）如果不用jquery，新版浏览器都原生支持JSON.parse，不支持的引用json2.js也就可以了。
4Java中有有很多把Java对象序列化为Json字符串的类库，比如Gson、FastJson、JackSon等。用法大同小异，这里用Gson。 Gson gson =new Gson();String json = gson.toJson(p1);
【Json2.html】
<!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>Insert title here</title>
<script type="text/javascript">
var s1 = "{name:'yzk',age:18}";//普通的字符串
var p1 ={name:'yzk',age:18};//键值对对象
//alert(s1);
//alert(p1);
//alert(s1.name);
//alert(p1.name);
//eval("({name:'yzk',age:18})")把JavaScript对象格式的字符串解析为JavaScript对象
//var p2 = eval("("+s1+")");//eval("({name:'yzk',age:18})")
//alert(p2);
//alert(p2.name);
var s2 = "[3,5,9]";
//alert(s2);
//var arr1 = eval("("+s2+")");
var arr1= JSON.parse(s2);//比eval安全
alert(arr1[2]);
</script>
</head>
<body>
</body>
</html>
【第 9 节9-服务器端把Java对象序列化为Json 】
【Json3.html】
<!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>Insert title here</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.οnlοad=function(){
var txtUserName= document.getElementById("txtUserName");
//onblur：焦点离开触发onblur事件
txtUserName.onblur = function(){
//var username = txtUserName.value;
var username = this.value;
rpajax("getUserInfo?username="+username,function(respTxt){
if(respTxt=="error")
{
alert("查无此用户名");
}
else
{
alert(respTxt);
var p = eval("("+respTxt+")");//JSON.parse(respTxt);
//alert(p.hello());
document.getElementById("age").innerHTML = p.age;
document.getElementById("email").innerHTML = p.email;
document.getElementById("phoneNum").innerHTML = p.phoneNum;
}
});
}
}
</script>
</head>
<body>
用户名：<input type="text" id="txtUserName"/>
年龄：<span id="age"></span>
邮箱：<span id="email"></span>
手机号：<span id="phoneNum"></span>
</body>
</html>
【GetUserInfoServlet.java】见上
GSON方法
【第 10 节10-Gson两个细节问题】
Gson把Java对象的所有字段序列化成json，Gson不是使用JavaBean来定名称，而是根据私有变量。肯定不可能传输方法。
private String namehaha;
publicString getName()
{
returnnamehaha;
}
publicvoid setName(String name)
{
this.namehaha= name;
}
按照javabean规范：这个属性的名字是name。${u.name}
1.Gson中是遍历所有的字段，和属性的名字没关系，所以Gson序列化为Json拿到的是namehaha:"123"
2.不是把对象传给浏览器，所以不可以传输方法
【第 11 节11-Jquery封装的AJAX 】
JQuery AJAX
1Jquery封装简化了AJAX，有$.get、$.post等不同效果的方法，这里介绍最常使用的$.ajax（可以获得请求失败的消息），加法的例子。
一般不用$.get，因为Ajax的缓存很烦人，不会用到缓存，网上有的人用$.post,建议用更好的$.ajax
jquery2.0以上不支持IE6/7/8 所以建议用2.0以下版本
$.ajax({
type: "post", url:"/test3/Ajax1Servlet",
data: { i1:$("#txt1").val(), i2: $("#txt2").val() },
success: function (data,txtStatus) {alert(data);},
error: function () {alert("错误"); }
});
2 ajax方法的参数就是一个字典，最好设定post提交，data为提交的报文体，success为请求成功的处理事件，error为请求通讯失败的处理事件（服务器错误、404等）
【CheckUserNameServlet.java】
【JQueryAjax1.html】
<!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>Insert title here</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#txtUserName").blur(function(){
var username1 = $("#txtUserName").val();
$.ajax({type:"post",url:"checkUserName222",data:{username:username1},
success:function(data){alert("成功"+data);},
error:function(){alert("ajax请求失败！");}
});
});
});
</script>
</head>
<body>
用户名：<input type="text" id="txtUserName"/>
</body>
</html>
【第 12 节12-JQuery封装 AJAX案例】
【Ajax1Servlet.java】
【JQueryAjax2.html】
<!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>Insert title here</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#btnAdd").click(function(){
var i1 = $("#i1").val();
var i2 = $("#i2").val();
$.ajax({type:"post",url:"ajax1",data:{action:'add',i:i1,j:i2},
success:function(data){$("#result").html(data);},
error:function(){alert("ajax请求失败");}
});
});
});
</script>
</head>
<body>
<input type="text" id="i1"/>+<input type="text" id="i2"/>
<input type="button" id="btnAdd" value="="/>
<span id="result"></span>
</body>
</html>
【第 13 节13-JQueryAJAX处理Json1 】
JQuery AJAX Json处理
可以使用$.parseJSON()把json字符串解析为JavaScript对象
【JQueryAjax3.html】
<!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>Insert title here</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
var getUserInfoSuccess = function(data)
{
if(data=="error")
{
alert("用户名不存在！");
}
else
{
var p = $.parseJSON(data);//
$("#age").text(p.age);
$("#email").text(p.email);
$("#phoneNum").text(p.phoneNum);
}
};
$(function(){
$("#txtUserName").blur(function(){
var username = $(this).val();
$.ajax({type:"post",url:"getUserInfo",data:{username:username},
success:getUserInfoSuccess,
error:function(){alert("ajax错误");}
});
});
});
</script>
</head>
<body>
用户名：<input type="text" id="txtUserName"/>
年龄：<span id="age"></span>
邮箱：<span id="email"></span>
手机号：<span id="phoneNum"></span>
</body>
</html>
【统一返回的数据为json格式】
【JQueryAjax4.html】
<!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>Insert title here</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
var getUserInfoSuccess = function(data)
{
var obj = $.parseJSON(data);
if(obj.errorCode=="error")
{
alert("用户名不存在！");
}
else if(obj.errorCode=="ok")
{
var p = obj.data;//
$("#age").text(p.age);
$("#email").text(p.email);
$("#phoneNum").text(p.phoneNum);
}
};
$(function(){
$("#txtUserName").blur(function(){
var username = $(this).val();
$.ajax({type:"post",url:"getUserInfo2",data:{username:username},
success:getUserInfoSuccess,
error:function(){alert("ajax错误");}
});
});
});
</script>
</head>
<body>
用户名：<input type="text" id="txtUserName"/>
年龄：<span id="age"></span>
邮箱：<span id="email"></span>
手机号：<span id="phoneNum"></span>
</body>
</html>
【AjaxResult.java】一般都是这么命名
package com.rupeng.web6;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
//把逻辑错误码放到errorCode中，把返回给浏览器的数据放到data中
public class AjaxResult
{
private String errorCode;//"ok","error"
private Object data;//返回的数据
public String getErrorCode()
{
return errorCode;
}
public void setErrorCode(String errorCode)
{
this.errorCode = errorCode;
}
public Object getData()
{
return data;
}
public void setData(Object data)
{
this.data = data;
}
@Override
public String toString()
{
//Gson gson = new Gson();
Gson gson = new GsonBuilder()
.setDateFormat("yyyy-MM-dd")
.create();
return gson.toJson(this);
}
}
【GetUserInfoServlet2.java】
package com.rupeng.web6;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
public class GetUserInfoServlet2 extends HttpServlet
{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
String username = RupengUtils.getParameter(req, "username");
UserInfo u = UserDAO.getByUserName(username);
AjaxResult result = new AjaxResult();
if(u==null)
{
result.setErrorCode("error");
}
else
{
result.setErrorCode("ok");
result.setData(u);
}
//resp.setContentType("application/json");
Gson gson = new Gson();
String s = gson.toJson(result);//遍历对象的所有字段，生成json字符串
//resp.getWriter().print(s);
resp.getWriter().print("ok");
}
}
【第 14 节14-JQueryAJAX处理Json2 】
如果设定ajax请求的ContentType为"application/json"或者ajax请求中设定dataType:"json"，那么success的第一个参数就是JavaScript对象，不用手动解析了。如果设定了dataType: "json"，而返回的不是json格式，则还是会error。用根据id加载一条t_persons举例子。
ajax的业务错误处理：error事件是通讯错误、服务器错误等。如何处理“id数据找不到、没有权限”这样的错误：用通用的AjaxResult类
【JQueryAjax5.html】
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Insert titlehere</title>
<script type="text/javascript"src="jquery-1.8.3.js"></script>
<scripttype="text/javascript">
var getUserInfoSuccess = function(data)//如果设定了dataType:"json"，那么data参数的值
//就不再是服务器返回的json字符串，而是parseJSON之后的js对象
{
//varobj = $.parseJSON(data);
if(data.errorCode=="error")
{
alert("用户名不存在！");
}
elseif(data.errorCode=="ok")
{
varp = data.data;//
$("#age").text(p.age);
$("#email").text(p.email);
$("#phoneNum").text(p.phoneNum);
}
};
$(function(){
$("#txtUserName").blur(function(){
varusername = $(this).val();
$.ajax({type:"post",dataType:"json",url:"getUserInfo2",data:{username:username},
success:getUserInfoSuccess,
error:function(){alert("ajax错误");}
});
});
});
</script>
</head>
<body>
用户名：<input type="text" id="txtUserName"/>
年龄：<spanid="age"></span>
邮箱：<spanid="email"></span>
手机号：<spanid="phoneNum"></span>
</body>
</html>
也可以在服务器端
【GetUserInfoServlet2.java】
//resp.setContentType("application/json");
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
