Ajax

是什么?

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，它并不是一种新的技术

ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。

1.使用CSS和XHTML来表示。

2. 使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。

有什么用?

传统的网页，如果需要更新内容，必须加载整个网页。如果只需要对网页上的某个内容进行局部刷新，那么就需要使用到Ajax了。它可以让我们无需重新加载全部网页内容，即可完成对某个部分的内容执行刷新。最典型的的例子，莫过于大家在注册网站的时候，输入的用户名，会自动的提示我们，该用户已被注册。

AJAX - 向服务器发送请求：

get方法：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<!-- 使用Ajax演示get方法 -->
	<script type="text/javascript">
	
		//1.获取XMLHttpRequest的对象
		function ajaxFunction(){
		   var xmlHttp;
		   try{ // Firefox, Opera 8.0+, Safari
		        xmlHttp=new XMLHttpRequest();
		    }
		    catch (e){
			   try{// Internet Explorer
			         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			      }
			    catch (e){
			      try{
			         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			      }
			      catch (e){}
			      }
		    }
			return xmlHttp;
 		}
	
		//2.执行get请求
		function get() {
			//1.创建XMLHttpRequest的对象
			var request=ajaxFunction();
			//2.发送请求
			/*	
			参数一： 请求类型  GET or  POST
			参数二： 请求的路径
			参数三： 是否异步， true  or false
			*/
			request.open("GET","DemoServlet01?name=zhangsan&age=18",true);
			
			//3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
			request.onreadystatechange=function()
			  {
				//前半段表示 已经能够正常处理。  再判断状态码是否是200
			  if (request.readyState==4 && request.status==200)
			    {
				  //弹出相应的信息
			    alert(request.responseText);
			    }
			  }
			request.send();
		}
	</script>
</head>
<body>
	<h2><a href=" " onclick="get()" >这是一个get请求</a></h2>
</body>
</html>

Post方法：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<!-- 使用Ajax演示post方法 -->
	<script type="text/javascript">
	
	//1.获取XMLHttpRequest的对象
	function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
		return xmlHttp;
		}
	
	//2.提交对象
	function post() {
		//获取XMLHttpRequest对象
		var request=ajaxFunction();
		//2.发送请求
		request.open("POST","DemoServlet01",true);
		
		//想获取服务器传送过来的数据， 加一个状态的监听。 
		request.onreadystatechange=function(){
			if(request.readyState==4 && request.status == 200){
				alert("post："+request.responseText);
			}
		}
		//3.带上参数 ，如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//4.发送
		request.send("name=Bill&age=18");
	}
	</script>
</head>
<body>
	<h2><a href="" onclick="post()">这是一个post请求</a></h2>
</body>
</html>

服务器响应：

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

实例：校验用户密码

前端页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<script type="text/javascript">
	//使用ajax演示用户名校验
	
		//1.获取XMLHttpRequest的对象
		function ajaxFunction(){
		   var xmlHttp;
		   try{ // Firefox, Opera 8.0+, Safari
		        xmlHttp=new XMLHttpRequest();
		    }
		    catch (e){
			   try{// Internet Explorer
			         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			      }
			    catch (e){
			      try{
			         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			      }
			      catch (e){}
			      }
		    }
			return xmlHttp;
			}
	
		//2.提交对象
		function checkUserName() {
			//1.获取输入框的内容
			var name=document.getElementById("name").value;
			//2.创建XMLHttpRequest对象
			var xmlHttp=ajaxFunction();
			
			//发送数据到服务器
			xmlHttp.open("POST","/AjaxDemo01/CheckUserNameServlet",true);
			
			//获取服务器发来的数据，注册监听
			xmlHttp.onreadystatechange=function(){
				if(xmlHttp.readyState==4 && xmlHttp.status == 200){
					
					var rs=xmlHttp.responseText;
					if(rs==1)
						document.getElementById("span01").innerHTML="<font color='red'>用户名已存在！</font>";
					else 
						document.getElementById("span01").innerHTML="<font color='green'>用户名可用</font>";	
				}	
			}
			//3.带上参数 ，如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
			xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			//4.发送
			xmlHttp.send("name="+name);
		}
	
	</script>

</head>
<body>
	<TABLE>
		<TR>
			<TD>用户名:</TD>
			<TD><INPUT TYPE="text" NAME="name" id="name" onblur="checkUserName()"><span id="span01"></span></TD>
		</TR>
		<TR>
			<TD>密码：</TD>
			<TD><INPUT TYPE="text" NAME="psw"></TD>
		</TR>
		<TR>
			<TD>邮箱：</TD>
			<TD><INPUT TYPE="text" NAME="mail"></TD>
		</TR>
		<TR>
			<TD>简介：</TD>
			<TD><TEXTAREA NAME="" ROWS="5" COLS="5"></TEXTAREA></TD>
		</TR>
		<tr>
			<td colspan="2"><input type="submit" value="注册"></td>
		</tr>
	</TABLE>
</body>
</html>

用于检查用户名的Servlet：

public class CheckUserNameServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		try {
			//1.用于检查用户名
			String name = request.getParameter("name");
			System.out.println("name="+name);
			UserDao dao=new UserDaoImpl();
			boolean isExist = dao.checkUserName(name);
			
			//2.通知页面，是否有该用户名
			if (isExist) {
				response.getWriter().println(1);//有该用户
			} else {
				response.getWriter().println(2);//未有该用户
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

Dao实现：

public class UserDaoImpl implements UserDao {

	public boolean checkUserName(String name) throws SQLException {
		
		QueryRunner runner=new QueryRunner(JDBCUtil.getDataSource());
		String sql="select count(*) from t_suer where username =?";
		Long resault = (Long) runner.query(sql, new ScalarHandler(),name);
		return resault>0;
	}
}

JQuery

是什么?

javascript 的代码框架。

有什么用?

简化代码，提高效率。write less do more , 写得更少，做的更多。

jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：

$(selector).load(URL,data,callback);

例子：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
	function show() {
			
		//找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
		$("#aaa").load("/AjaxDemo01/DemoServlet02" , function(responseText , statusTXT  , xhr) {
				//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
				$("#aaa").val(responseText);
			}); 
	}
	</script>	
</head>
<body>
	<input type="button" value="使用jQuery演示load方法" onclick="show()"/>
	<input type="text" id="aaa">
</body>
</html>

HTTP 请求：GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

实例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		function get() {
			$.get("/AjaxDemo01/DemoServlet02?name=zhangsan&age=18"  , function(data ,status) {
				$("#div01").text(data);
			});
		}
	</script>
</head>
<body>
	<input type="button" value="使用jQuery演示get方法" onclick="get()"/>
	<div id="div01" style="width: 100px;height: 100px; border: 1px solid blue; ">
	</div>
</body>
</html>

post方法：

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

赋值显示

val("aa"); ---只能放那些标签带有value属性
html("aa"); ---写html代码
text("aa");

其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

实例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		function post() {
			$.post("/AjaxDemo01/DemoServlet02",{name:"zhangsan",age:18}, function(data ,status) {
				$("#div01").html(data);
			});
		}
	</script>
</head>
<body>
	<input type="button" value="使用jQuery演示post方法" onclick="post()"/>
	<div id="div01" style="width: 100px;height: 100px; border: 1px solid blue; ">
	</div>
</body>
</html>

使用JQuery校验用户名

前端页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
	//使用jQuery演示用户名校验
		function checkUserName() {
			//1.获取输入框的数据
			var name=$("#name").val();
			//2.发送请求给服务器
			$.post("/AjaxDemo01/CheckUserNameServlet",{name:name},function(data ,status){
				if (data==1) {
			//3.输出到页面上
					$("#span01").html("<font color='red'>用户名已被注册</font>");
				} else {
					$("#span01").html("<font color='green'>用户名可以使用</font>")
				}
			})
		}
	</script>

</head>
<body>
	<TABLE>
		<TR>
			<TD>用户名:</TD>
			<TD><INPUT TYPE="text" NAME="name" id="name" onblur="checkUserName()"><span id="span01"></span></TD>
		</TR>
		<TR>
			<TD>密码：</TD>
			<TD><INPUT TYPE="text" NAME="psw"></TD>
		</TR>
		<TR>
			<TD>邮箱：</TD>
			<TD><INPUT TYPE="text" NAME="mail"></TD>
		</TR>
		<TR>
			<TD>简介：</TD>
			<TD><TEXTAREA NAME="" ROWS="5" COLS="5"></TEXTAREA></TD>
		</TR>
		<tr>
			<td colspan="2"><input type="submit" value="注册"></td>
		</tr>
	</TABLE>
</body>
</html>

后端通前面Ajax的一样。。。

实现百度搜索提示：jaxDemo02baidu

前端页面：

<%@ 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 charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/qiandu.js"></script>
</head>
<body>
	<center>
	<h2>千度</h2>
		<input type="text" name="word" id="word" style="width: 600px;height: 50px;font-size: 20px;">	
		<input type="button" value="揪一下" style="width: 100px;height: 50px;"/>
		<div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border:  1px solid blue; display: none"></div>
	</center>
</body>
</html>

js部分：

/**
 * 捕捉键盘弹起事件
 * 在文档准备就绪的时候，对某一个元素进行onkeyup事件监听
 */
$(function() {
	$("#word").keyup(function() {
		//1.获取输入的值
		var word=$("#word").val();
		//2.请求数据
			if (word=="") {//页面无输入时,隐藏提示框
				$("#div01").hide();
			} else {//页面有输入时，根据查找服务器的数据，在提示框显示
				$.post("FindWordServlet",{word:word},function(data,status){
				//alert(data);
				$("#div01").show();
				$("#div01").html(data);
				});
			}
	})
});

用于处理页面请求的Servlet :

public class FindWordServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			//1.获取页面数据
			String word = request.getParameter("word");
			System.out.println("word="+word);
			//2.执行查询
			WordsDao dao=new WordsDaoImpl();
			List<WordBean> list = dao.findWord(word);
			//3.返回数据
			response.setContentType("text/html;charset=utf-8");
//			response.getWriter().write("数据是:");
			//存值
			request.setAttribute("list", list);
			//返回一个页面，把list.jsp上的内容返回给页面
			request.getRequestDispatcher("list.jsp").forward(request, response);
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

list.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<table style="width: 100%">
	<c:forEach items="${list }" var="w">
		<tr>
			<td>
				${w.word }
			</td>
		</tr>
	</c:forEach>
</table>

封装查询结果的bean:

public class WordBean {
	private int id;
	private String word;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getWord() {
		return word;
	}
	public void setWord(String word) {
		this.word = word;
	}
}

dao实现：

public class WordsDaoImpl implements WordsDao {

	public List<WordBean> findWord(String word) throws SQLException {

		QueryRunner runner=new QueryRunner(JDBCUtil.getDataSource());
		return runner.query("select * from word where word like ? limit ?", 
				new BeanListHandler<WordBean>(WordBean.class),word+"%",5);
	}
}

使用JQuery实现省市联动：

前端页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!-- 这是使用xml的方式 
<script type="text/javascript" src="js/city_xml.js"></script>
-->

<!-- 这是使用json-->
<script type="text/javascript" src="js/city_json.js"></script>

</head>
<body>
	省份：<select name="province" id="province">
			<option value="">-请选择-
			<option value="1">陕西
			<option value="2">四川
			<option value="3">广州
		</select>
	城市：<select name="city" id="city">
			<option value="">-请选择-
		</select>
</body>
</html>

1.使用XML格式传输数据

js代码：

/**
 * 用xml的方式省市联动
 */
$(function () {
//1.找到省份的元素
	$("#province").change(function() {
		//2.获取省份的pid
		var pid=$(this).val();
		$.post("CityServlet",{pid:pid},function(data,status){
			
			//清空之前的值
			$("#city").html("<option value=''>-请选择-");
			//从data数据里面找出所有的city  ， 然后遍历所有的city。
			//遍历一个city，就执行一次function方法data里面找出所有的city，然后遍历
			$(data).find("city").each(function() {
				
				//遍历出来的每一个city，取它的孩子.  id , cname
				var id = $(this).children("id").text();
				var cname = $(this).children("cname").text();
				$("#city").append("<option value='"+id+"' >"+cname)
			});
		});
	});
});

使用XML格式的Servlet：

public class CityServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			//1.获取页面提交的省份pid
			int pid = Integer.parseInt(request.getParameter("pid"));
			//2.根据pid查询城市
			CityDao dao=new CityDaoImpl();
			List<CityBean> list = dao.findCity(pid);
			
			//3.把数据返回到页面--->>XStream 转化bean对对象为xml;
			XStream xStream=new XStream();
			//把id变成属性
//			xStream.useAttributeFor(CityBean.class, "id");
			//设置别名
			xStream.alias("city", CityBean.class);
			//把list集合转化成一个xml字符串
			String xml = xStream.toXML(list);
			response.setContentType("text/xml;charset=utf-8");
			response.getWriter().write(xml);
			 
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

2.使用json格式传输数据

js代码：

$(function () {
//1.找到省份的元素
	$("#province").change(function() {
		//2.获取省份的pid
		var pid=$(this).val();
		$.post("CityServlet2",{pid:pid},function(data,status){
			//清空之前的值
			$("#city").html("<option value=''>-请选择-");
			
			//遍历,追加
			$(data).each(function(index,c) {
				$("#city").append("<option value='"+c.id+"'>"+c.cname);
			});
		},"json");
	});
});

使用Json格式的Servlet ：

public class CityServlet2 extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			//1.获取页面提交的省份pid
			int pid = Integer.parseInt(request.getParameter("pid"));
			//2.根据pid查询城市
			CityDao dao=new CityDaoImpl();
			List<CityBean> list = dao.findCity(pid);
			
			//3.把list转成json数据
			//JSONArray-->>变成数组或集合 []
			//JSObject-->>变成普通数据 {}
			JSONArray jsonArray=JSONArray.fromObject(list);
			String json = jsonArray.toString();
			//4.发送数据给页面

			response.setContentType("text/html;charset=utf-8");
			response.getWriter().write(json);

		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

用于封装城市查询结果的bean：

public class CityBean {
	
	private int id;
	private int pid;
	private String cname;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public int getPid() {
		return pid;
	}
	public void setPid(int pid) {
		this.pid = pid;
	}
	public String getCname() {
		return cname;
	}
	public void setCname(String cname) {
		this.cname = cname;
	}
}

用于根据省份id查询城市的dao：

public class CityDaoImpl implements CityDao {

	public List<CityBean> findCity(int pid) throws SQLException {
		
		QueryRunner runner=new QueryRunner(JDBCUtil.getDataSource());
		return runner.query("select * from city_province where pid=?",
				new BeanListHandler<CityBean>(CityBean.class),pid);
	}
}

XStream的使用:转化 bean对象成 xml

                       // XStream  转化 bean对象成 xml
			XStream xStream = new XStream();
			
			//想把id做成属性
			xStream.useAttributeFor(CityBean.class, "id");
			
			//设置别名
			xStream.alias("city", CityBean.class);
			
			//转化一个对象成xml字符串
			String xml = xStream.toXML(list);

转化bean对象成json

			//3.把list转成json数据
			//JSONArray-->>变成数组或集合 []
			//JSObject-->>变成普通数据 {}
			JSONArray jsonArray=JSONArray.fromObject(list);
			String json = jsonArray.toString();

服务器和客户端数据传输的方式

xml：

  	<list>
  			<city>
  				<id>1<id>
  				<pid>1</pid>
  				<cname>深圳</cname>
  			</city>
  			<city >
  				<id>2<id>
  				<pid>1</pid>
  				<cname>东莞</cname>
  			</city>
  		</list>

Json：阅读性更好、容量更小。

  {"name":"aaa" , "age":19}

Ajax && Jquery&&百度搜索提示&&JQuery实现省市联动

Ajax

是什么?

有什么用?

GET 还是 POST？

JQuery

是什么?

有什么用?

jQuery load() 方法

HTTP 请求：GET vs. POST

使用JQuery校验用户名

实现百度搜索提示：jaxDemo02baidu

使用JQuery实现省市联动：

猜你喜欢