主页 > 专题教程 > javascript > jquery >
来源:自学PHP网 时间:2018-02-08 10:13 作者: 阅读:次
[导读] 使用纯JavaScript来编写Ajax代码需要对浏览器进行各种判断,还要对相应的返回状态做判断,使用起来非常麻烦。jQuery对原生JavaScript中的Ajax请求代码做了封装,屏蔽了各个浏览器之间的差...
Ajax是Asynchronous JavaScript And XML的简写,它是一种能够向服务器请求额外数据而不需要卸载页面的技术。通俗来说,Ajax是一种可以使客户端和服务器进行异步交互,在不刷新整个页面的情况下,对页面进行局部更新的技术。 需要对浏览器进行各种判断,还要对相应的返回状态做判断,使用起来非常麻烦。一个完整的Ajax请求代码应该类似下面的样子: // 获取XMLHttpRequest对象 function createXMLHttpRequest(){ var xhr; //IE5和IE6 if(window.ActiveXObject){ try{ xhr = new ActiveXObject(Microsoft.XMLHTTP) }catch(e){ xhr = new ActiveXObject("Msxml2.XMLHTTP"); } }else if(window.XMLHttpRequest){ //其它主流浏览器 xhr = new XMLHttpRequest(); }else{ alert("你使用的浏览器不支持XMLHttpRequest!"); return false; } return xhr; } // 创建XMLHttpRequest对象 var xhr = createXMLHttpRequest(); // 处理Ajax请求 xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ //获取相应的文本:通过xhr的responseText可以获取文本信息,包括xml的标签 alert(xhr.responseText); } } // 发送Ajax请求 xhr.open("GET","b.html",true); xhr.send(); jQuery对原生JavaScript中的Ajax请求代码做了封装,屏蔽了各个浏览器之间的差异,使用起来非常简单。jQuery提供了多个可以使用的Ajax方法,本文将介绍比较常用的、和方法。
load(url, [data], [callback])
例如有如下的一个HTML页面: /* 01.html */ <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Ajax</title> </head> <body> <h1 id="title">这是标题</h1> <div id="container"> <h2 id="subtitle">这是子标题</h2> <div class="row"> 这是内容 </div> </div> </body> </html> 上面的页面是我们需要远程加载的HTML页面,我们使用 $("#content").load("01.html #title"); 上面的代码表示将01.html页面的ID为 或者也通过回调函数来处理加载的数据。 $("#content").load("01.html",function(data){ console.info(data); }); 回调函数表示在完成Ajax加载后处理的方法。 在使用 通过 $("#content").load("01.html",function(data){ //如果要获取h1的值,因为h1是顶级元素,它会被包装到包装集中,只能通过filter()来获取 console.info($(data).filter("h1").html()); //如果要获取h2子标题的值,由于它是顶级元素 div#container 的子元素,所以需要通过 find() 方法来获取 console.info($(data).find("#subtitle").html()); //由于#container是顶级元素,所以要获取它的值使用的是filter() 方法 console.info($(data).filter(#container).html()); }) 这里要非常清楚获取某个元素时应该使用的是
jQuery.get(url, [data], [callback], [type]) 参数:
使用 <!-- person.xml --> <?xml version="1.0"?> <persons> <person> <id>1</id> <name>leon</name> <age>20</age> </person> <person> <id>2</id> <name>tom</name> <age>22</age> </person> <person> <id>1</id> <name>jack</name> <age>23</age> </person> </persons> $.get("person.xml",function(data){ console.info($(data).find("person").text()); },"xml") 需要注意的是:如果返回的类型是xml,data就是一个xml元素。如果处理的是xml只能通过 另外需要特别注意的是:返回的xml格式的数据会把顶级元素包装到包装集中,要获取里面的元素全部都需要通过 我们还可以获取json格式的数据,例如有下面的json文件。 /* person.json */ { "name":"leon", "age":20 } $.get("person.json",function(data){ console.info(data.name); },"json") 在获取json类型的数据时,需要注意的是json的格式必须符合json的书写规范,否则不会获取到正确的数据。 上面的ajax调用得到的结果和使用
jQuery.post(url, [data], [callback], [type]) 参数:
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com