jQuery技术

jQuery教程-jQuery中的Ajax操作

字号+ 作者:H5之家 来源:H5之家 2017-06-19 10:04 我要评论( )

使用纯JavaScript来编写Ajax代码需要对浏览器进行各种判断,还要对相应的返回状态做判断,使用起来非常麻烦。jQuery对原生JavaScript中的Ajax请求代码做了封装,

Ajax是Asynchronous JavaScript And XML的简写,它是一种能够向服务器请求额外数据而不需要卸载页面的技术。通俗来说,Ajax是一种可以使客户端和服务器进行异步交互,在不刷新整个页面的情况下,对页面进行局部更新的技术。

使用纯JavaScript来编写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()、$.get()和$.post()方法。

load()方法

load()方法可以加载远程的HTML文件,并将内容插入到指定的DOM元素中。load()方法的语法为:

load(url, [data], [callback])

load()方法默认使用GET请求,如果提供了第二个参数,则自动转换为POST请求。

例如有如下的一个HTML页面:

/* 01.html */ <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Ajax</title> </head> <body> <h1>这是标题</h1> <div> <h2>这是子标题</h2> <div> 这是内容 </div> </div> </body> </html>

上面的页面是我们需要远程加载的HTML页面,我们使用load()方法来加载这个页面可以使用下面的代码:

$("#content").load("01.html #title");

上面的代码表示将01.html页面的ID为title元素加载到当前页面的#content元素中。

或者也通过回调函数来处理加载的数据。

$("#content").load("01.html",function(data){ console.info(data); });

回调函数表示在完成Ajax加载后处理的方法。

在使用load()方法时我们需要的是:如果返回的类型是html类型,如何获取data中的元素。

通过load()方法加载的远程HTML页面,页面中<body>元素中的所有顶级元素都会被添加到包装集中。因此,如果我们需要获取的是顶级元素,就使用filter()方法;如果需要获取的是顶级元素中的子元素,需要使用find()方法。例如,还是前面的01.html页面,看下面的代码:

$("#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()); })

这里要非常清楚获取某个元素时应该使用的是filter()方法还是find()方法,使用时才不会出错。

$.get()方法

$.get()方法可以通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂$.ajax方法。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用$.ajax方法。

$.get()方法的语法为:

jQuery.get(url, [data], [callback], [type])

参数:

使用$.get()方法可以在最后一个参数指定返回内容的类型。例如返回xml格式的数据:

<!-- 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只能通过text()方法来获取元素,不支持使用html()方法。

另外需要特别注意的是:返回的xml格式的数据会把顶级元素包装到包装集中,要获取里面的元素全部都需要通过find()方法来获取。

我们还可以获取json格式的数据,例如有下面的json文件。

/* person.json */ { "name":"leon", "age":20 } $.get("person.json",function(data){ console.info(data.name); },"json")

在获取json类型的数据时,需要注意的是json的格式必须符合json的书写规范,否则不会获取到正确的数据。

上面的ajax调用得到的结果和使用$.getJSON()方法是一样的。

$.post()方法

$.post()方法通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能以取代复杂$.ajax方法。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用$.ajax方法。

$.post()方法的语法为:

jQuery.post(url, [data], [callback], [type])

参数:

$.post()方法和$.get()方法的使用方法基本类似,这里就不在赘述。

相关阅读

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Hybrid App开发之jQuery基础

    Hybrid App开发之jQuery基础

    2017-06-19 11:03

  • 图片延时加载插件jquery.lazyload.js使用教程

    图片延时加载插件jquery.lazyload.js使用教程

    2017-06-18 17:02

  • jQuery复合事件用法示例

    jQuery复合事件用法示例

    2017-06-18 17:00

  • 使用jQuery播放/暂停 HTML5视频

    使用jQuery播放/暂停 HTML5视频

    2017-06-18 16:06

网友点评
>