标签：
ajax即异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
前面已经提过ajax的方法，这节主要记录针对ajax返回的数据处理方式。
一.html片段
由于服务端返回数据格式为html，因此并不需要特殊处理就可以直接加载到我们的主页面中。
1 $(function(){ 2 $("#get").click(function(){ 3 $.get("index.php",{username:$("#user").val(), 4 password:$("#password").val()}, 5 function(data,textStatus){ 6 $("#get").html(data) 7 }) 8 }) 9 })
二.xml格式
xml格式的数据需要经过处理，鉴于jquery强大的dom处理能力，处理xml文档也可以使用常规的attr（），find（），filter（）以及其他方法。
<?xml version="1.0" encoding="UTF-8"?>
<stulist>
<student email="1@1.com">
<name>zhangsan</name>
<id>1</id>
</student>
<student email="2@2.com">
<name>lisi</name>
<id>2</id>
</student>
</stulist>
$.ajax({
url:‘ajax.asp‘,
type: ‘GET‘,
dataType: ‘xml‘,//这里可以不写，但千万别写text或者html!!!
timeout: 1000,
error: function(xml){
alert(‘Error loading XML document‘+xml);
},
success: function(xml){
$(xml).find("student").each(function(i){
var id=$(this).children("id"); //取对象
var idvalue=$(this).children("id").text(); //取文本
alert(id_value);//这里就是ID的值了。
alert($(this).attr("email")); //这里能显示student下的email属性。
//最后么输出了，这个是cssrain的写法，貌似比macnie更JQ一点
$(‘<li></li>‘)
.html(id_value)
.appendTo(‘ol‘);
});
}
});
三.json（JavaScript Object Notation）格式
json数据是一种经型的实时数据交互的数据存储方法，JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快，更易解析。
{ "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }
var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];
可以这样访问：
1.如果为字符串格式：
如var arr = ‘{"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}}‘;//u71d5u5b50这个是php中自动转换的
var dataObj = eval("("+arr+")");//只能死记硬背
$.each(dataObj,function(idx,item){
//输出
alert(item.id+"哈哈"+item.name);
})
2.如果为对象格式
var arr = {"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}};
$.each(arr,function(idx,item){
//输出
alert(item.id+"哈哈"+item.name);
})
应用实例：
$(document).ready(function(){
$(‘#button‘).click(function(){
$.ajax({
type:"GET",
url:"music.txt",
dataType:"json",
success:function(data){
var music="<ul>";
//i表示在data中的索引位置，n表示包含的信息的对象
$.each(data,function(i,n){
//获取对象中属性为optionsValue的值
music+="<li>"+n["optionValue"]+"</li>";
});
music+="</ul>";
$(‘#result‘).append(music);
}
});
return false;
});
});
标签：
原文地址：http://www.cnblogs.com/mopagunda/p/4495994.html
