jQuery教程-jQuery中的Ajax操作-自学php网

jQuery教程-jQuery中的Ajax操作

来源：自学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()方法可以加载远程的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 id="title">这是标题</h1>
  <div id="container">
    <h2 id="subtitle">这是子标题</h2>
    <div class="row">
      这是内容
    </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()方法可以通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂$.ajax方法。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax方法。

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

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

参数：

url：待载入页面的URL地址。
data：待发送 Key/value 参数。
callback：载入成功时回调函数。
type：返回内容格式，xml, html, script, json, text, _default。

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

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

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

参数：

url：发送请求地址。
data：待发送 Key/value 参数。
callback：载入成功时回调函数。
type：返回内容格式，xml, html, script, json, text, _default。

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

jQuery教程-编写jQuery插件

子栏目

jQuery教程-jQuery中的Ajax操作

最新评论

添加评论

更多文章推荐

添加评论