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="[email protected]"> <name>zhangsan</name> <id>1</id> </student> <student email="[email protected]"> <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; }); });
时间: 2024-10-17 05:48:50