第八章AJAX(1)

原创 2016年08月29日 18:05:51

第八章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.onload=function(){
		document.getElementById("submit").onclick=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.onload=function(){
		var add = document.getElementById("add");
		add.onclick=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.onload=function(){
		var add = document.getElementById("add");
		add.onclick=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.onload=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.onload=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.onload=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");
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

第八章 AJAX基础

  • 2011-05-21 23:06
  • 96KB
  • 下载

【阅读】《head first jquery》第八章——jquery与ajax(让你的页面悄悄的刷新吧)

Ajax:这是一些技术的组合,

VB教程第八章-数组1

  • 2010-11-11 09:03
  • 13.51MB
  • 下载

c++第八章==函数(2)(1).ppt

  • 2011-06-12 13:18
  • 182KB
  • 下载

【C和指针】第八章(1)-->一维数组

一、数组基本概念 数组是用来存储一组数据类型的构造数据类型 特点:只能存放一种类型的数据,数组里的数据成为元素 二、数组和指针的不同之处 说到数组,基本都会和指针扯上关系。 但是数组和指针是截然不同的...

第八章:在Spark集群上掌握比较重要的图操作之Property Operators(1)

本部分的内容专注于集群上Property Operator的内容,其中比较重要的就是mapVertices、mapEdges和mapTriplets,即对顶点进行map、对边进行map、对Triple...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)