JQUERY_AJAX
1、jQuery 中的 Ajax
JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()
2、load() 方法
（1）load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中. 它的结构是: load(url[, data][,callback])
（2）
（3）程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可
（4）传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式
（5）对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4 种)和 XMLHttpRequest 对象
（6）方法的返回值是 jQuery
（7）如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)
3、$.get() (或$.post()) 方法
（1）$.get() 方法使用 GET 方式来进行异步请求. 它的结构是: $.get(url[, data][, callback][, type]);
（2）$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
（3）方法的返回值:XMLHttpRequest对象
（4）$.get() 和 $.post() 方法是 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法
4、序列化元素
（1）jQuery 为准备 “发送到服务器的 key/value 数据” 提供了一个简化的方法: serialize(). 该方法作用于一个 jQuery 对象, 能将 DOM 元素内容序列化为字符串, 用于 Ajax 请求.
（2）使用 serialize() 方法可以自动完成对参数的 url 编码
（3）因为该方法作用于 jQuery 对象, 所以不光只要表单能使用, 其它选择器选取的元素也能使用它.
5、JQuery 加载并解析 XML
（1）JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.
（2）JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历
6、使用 JQuery 实现
<!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>
<option value="吉林省">吉林省</option>
<option value="辽宁省">辽宁省</option>
<option value="山东省">山东省</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
</select>
</body>
<script language="JavaScript">
$().ready(function(){
$("#province").change(function(){
/***************删除下拉菜单city中的option，但是请选择要留下*************/
$("#city option[value!='']").remove();
/***************删除下拉菜单city中的option，但是请选择要留下*************/
//获取页面选中的省下拉菜单的值
var provinceValue = this.value;
//使用jquery的ajax解析xml
$.post("./cities.xml",function(data,textStatus){
//data表示解析xml文件后获取的对象，是一个DOM对象
//alert(data);//data <===> document
// var xmlProvince = data.getElementsByTagName("province");
// alert(xmlProvince.length);
//将data转换成jquery对象
var $xmlProvince = $(data).find("province");
//alert($xmlProvince.length);
var $provinceElement = null;
$xmlProvince.each(function(index,domEle){
var $xmlProvinceValue = $(domEle).attr("name");
//alert($xmlProvinceValue);
if(provinceValue == $xmlProvinceValue){
$provinceElement = $(domEle)
//退出循环
return;
}
})
//通过从xml中获取的省的对象，来获取对应的城市
if($provinceElement!=null){
var $xmlCity = $provinceElement.find("city");
//alert($xmlCity.length);
$xmlCity.each(function(index,domEle){
var $cityValue = $(domEle).text();
//alert($cityValue);
//创建option ,<option value="沈阳">沈阳</option>
var $option = $("<option/>");
$option.attr("value",$cityValue);
$option.text($cityValue);
//将创建option添加到city中
$("#city").append($option);
})
}
})
})
})
</script>
</html>