1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript() 和$.getJSON()
load()方法 是 jQuery 中最为简单和常用的 Ajax 方法 , 能载入远程的 HTML 代码并插入到 DOM 中 . 它的结构是 : load(url[, data][,callback])
程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置 , 然后将要加载的文件的 url 做为参数传递给 load() 方法即可
传递方式 : load() 方法的传递参数根据参数 data 来自动自定 . 如果没有参数传递 , 采用 GET 方式传递 , 否则采用 POST 方式
对于必须在加载完才能继续的操作 , load() 方法提供了回调函数 , 该函数有三个参数 : 代表请求返回内容的 data; 代表请求状态的 textStatus 对象 ( 其值可能为 : succuss, error, notmodify, timeout 4 种 ) 和 XMLHttpRequest 对象
方法的返回值是 jQuery
如果只需要加载目标 HTML 页面内的某些元素 , 则可以通过 load() 方法的 URL 参数来达到目的 . 通过 URL 参数指定选择符 , 就可以方便的从加载过来的 HTML 文档中选出所需要的内容 . load() 方法的 URL 参数的语法结构为 “url selector” ( 注意 : url 和选择器之间有一个空格 )
$.get()或$.post() 方法 使用 GET 方式来进行异步请求 . 它的结构是 : $.get(url[, data][, callback][, type]);
$.get() 方法的回调函数只有两个参数 : data 代表返回的内容 , 可以是 XML 文档 , JSON 文件 , HTML 片段等 ; textstatus 代表请求状态 , 其值可能为 : succuss, error, notmodify, timeout 4 种 .
方法的返回值:XMLHttpRequest对象
$.get() 和 $.post() 方法是 jQuery 中的全局函数 , 而 find() 等方法都是对 jQuery 对象进行操作的方法
数据序列化 jQuery 为准备 “发送到服务器的 key/value 数据” 提供了一个简化的方法 : serialize(). 该方法作用于一个 jQuery 对象 , 能将 DOM 元素内容序列化为字符串 , 用于 Ajax 请求 .
var xmlHpptReq=$.get("base01.jsp",{username:"aa",psw:"8888"});
var xmlHpptReq=$.get("base01.jsp",$("#form1").serialize());
使用 serialize() 方法可以自动完成对参数的 url 编码
因为该方法作用于 jQuery 对象 , 所以不光只要表单能使用 , 其它选择器选取的元素也能使用它 .
示例1: load()方法使用
load1.html 客户端页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js">
</script>
<style type="text/css">
div, span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
div.visible {
display: none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<form action="" name="form1" id="form1">
<input type="text" name="username" id="username" value="zhang">
<br>
<input type="text" name="psw" id="psw" value="99999">
<br>
<input type="button" id="b1" value="登陆">
</form>
<div id="one">
</div>
</body>
<script language="JavaScript">
$("#b1").click(function(){
/*
* load(url,data,callback)
* * jquery对象调用load()方法,返回内容会自动写入jquery对象内
* * url:请求路径
* * data:请求数据,以key/value形式,json数据格式
* * callback:回调函数,function(data,textStatus,XMLHttpRequest){}
* * data:代表请求返回内容
* * textStatus:代表请求状态,其值可能为: succuss, error, notmodify, timeout 4 种
* * XMLHttpRequest对象
*
* * load()方法的请求类型:
* * 如果客户端没有向服务器端发送请求数据,那么请求类型就是"GET"方式
* * 如果客户端向服务器端发送请求数据,那么请求类型就是"POST"方式
* * load()方法的请求类型,是根据有没有向服务器端发送数据决定的。
*/
var json = {
username:$("#username").val(),
psw:$("#psw").val()
}
$("#one").load("load01.jsp",json,function(data,textStatus,XMLHttpRequest){
alert(data);
});
});
</script>
</html>
load1.jsp 模拟服务器端处理
<%@ page language="java" pageEncoding="UTF-8"%>
<%
System.out.println("请求类型: "+request.getMethod());
System.out.println("connection server success!");
System.out.println("username = "+request.getParameter("username"));
System.out.println("psw = "+request.getParameter("psw"));
out.println("Hello World!");
%>
示例2:$.get() $.post() 方法使用
get.html 客户端页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.3.1.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<form action="" name="form1" id="form1">
<input type="text" name="username" id="username" value="zhang"><br>
<input type="text" name="psw" id="psw" value="99999"><br>
<input type="button" id="b1" value="登陆">
</form>
<div id="one">
</div>
</body>
<script language="JavaScript">
// $("#b1").click(function(){
//
// /*
// * get(url,data,callback,type)
// * * url:请求路径
// * * data:请求数据,以key/value形式,json数据格式
// * * callback:function(data,textstatus){}
// * * data:代表返回的内容,可以是 XML 文档, JSON 文件, HTML 片段等
// * * textstatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种
// * * type:返回内容格式,xml, html, script, json, text, _default。
// *
// * * 返回值:XMLHttpRequest
// *
// * * get()方法无论发送不发送请求数据,请求类型都是"GET"方式
// */
// var json = {
// username:$("#username").val(),
// psw:$("#psw").val()
// }
//
// $.get("get.jsp",json,function(data,textstatus){
// alert(data);
// });
//
// });
$("#b1").click(function(){
/*
* post(url,data,callback,type)
* * url:请求路径
* * data:请求数据,以key/value形式,json数据格式
* * callback:function(data,textstatus){}
* * data:代表返回的内容,可以是 XML 文档, JSON 文件, HTML 片段等
* * textstatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种
* * type:返回内容格式,xml, html, script, json, text, _default。
*
* * 返回值:XMLHttpRequest
*
* * post()方法无论发送不发送请求数据,请求类型都是"POST"方式
*/
// var json = {
// username:$("#username").val(),
// psw:$("#psw").val()
// }
//序列化元素 序列化以name属性为参数名
var json = $("#form1").serialize();
$.post("get.jsp",json,function(data,textstatus){
alert(data);
});
});
</script>
</html>
get.jsp 模拟服务器端处理
<%@ page language="java" pageEncoding="UTF-8"%>
<%
System.out.println(request.getMethod());
System.out.println("post connection server success!");
System.out.println(request.getParameter("username"));
System.out.println(request.getParameter("psw"));
out.println("Hello World!");
%>
2. Jquery 解析xml文件
JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.
JQuery 解析 XML 与解析 DOM 一样 , 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历
示例: 二级连菜单,解析xml配置文件
cities.xml 需要解析的xml文件
<?xml version="1.0" encoding="GB2312"?>
<china>
<province name="吉林省">
<city>长春</city>
<city>吉林市</city>
<city>四平</city>
<city>松原</city>
<city>通化</city>
</province>
<province name="辽宁省">
<city>沈阳</city>
<city>大连</city>
<city>鞍山</city>
<city>抚顺</city>
<city>铁岭</city>
</province>
<province name="山东省">
<city>济南</city>
<city>青岛</city>
<city>威海</city>
<city>烟台</city>
<city>潍坊</city>
</province>
</china>
city.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">请选择....</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
</select>
</body>
<script language="JavaScript">
/*
* jquery通过$.get()或者$.post()方法来解析并加载xml文件
*
* * 以$.get(url,callback)方法为例
* * url:要解析的xml文件的路径
* * callback:回调函数,function(xml){}
* * xml:解析后的内容
*/
$.get("cities.xml",function(xml){
var docXml = xml;
//在jquery中使用标签名来查找对应标签,利用find()方法,传入标签名
var $provinceXmlElements = $(docXml).find("province");
$provinceXmlElements.each(function(index,domEle){
var $provinceXmlValue = $(domEle).attr("name");
/*
* <select id="province" name="province">
<option value="">请选择....</option>
</select>
*/
var $option = $("<option></option>");
$option.attr("value",$provinceXmlValue);
$option.text($provinceXmlValue);
var $provinceElement = $("#province");
$provinceElement.append($option);
});
$("#province").change(function(){
var $provinceValue = $("#province").val();
//清空
/*
* <select id="city" name="city">
<option value="">请选择.....</option>
<option value="长春">长春</option>
</select>
*/
// $("#city option[value!='']").each(function(index,domEle){
// $(domEle).remove();
// });
$("#city option[value!='']").remove();
$provinceXmlElements.each(function(index,domEle){
var $provinceXmlValue = $(domEle).attr("name");
if($provinceValue==$provinceXmlValue){
var $cityXmlELements = $(domEle).find("city");
var $firstcity;
$cityXmlELements.each(function(index,domEle){
if(index==0)
$firstcity = $(domEle).text();
var $cityXmlValue = $(domEle).text();
/*
* <select id="city" name="city">
<option value="">请选择.....</option>
</select>
*/
var $option = $("<option></option>");
$option.attr("value",$cityXmlValue);
$option.text($cityXmlValue);
var $cityElement = $("#city");
$cityElement.append($option);
});
$("#city").val($firstcity);
}
});
});
});
</script>
</html>