[JQuery] JQuery第七课

说明

本文转自菜鸟教程。

AJAX简介

AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。AJAX的全称是Asynchronous JavaScript and XML，即异步JavaScript和XML，通过JQuery AJAX方法，您能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON。

AJAX load()方法

load()方法从服务器加载数据，并把返回的数据放入被选元素中。其语法如下：

$(selector).load(URL, data, callback);

其中，必须的URL表示希望加载的URL，可选的data参数规定与请求一同发送的查询字符串键/值对集合，可选的callback参数是load()方法完成后所执行的函数名称。

看下面这个例子：

首先由这样一个文件demo_test.txt：

<h2>jQuery AJAX 是个非常棒的功能！</h2>
<p id="p1">这是段落的一些文本。</p>

通过load()方法将demo_test.txt中的内容加载到指定的元素中：

$("#div1").load("/try/ajax/demo_test.txt");

也可以把JQuery选择器添加到URL参数，下面的例子将demo_test.txt文件中id=p1的元素的内容加载到指定的元素：

$("#div1").load("/try/ajax/demo_test.txt #p1");

可选的callback参数规定当load()方法完成后所要运行的回调函数，回调函数可以设置不同的参数：

• responseTxt：包含调用成功时的结果内容
• statusTxt：包含调用的状态
• xhr：包含XML HttpRequest对象

看下面这个例子：

$("button").click(function() {
    $("#div1").load("/try/ajax/demo_test.txt", function(responseTxt, statusTxt, xhr) {
        if (statusTxt == "success") {
            alert("外部内容调用成功");
        } 
        if (statusTxt == "error") {
            alert("Error: " + xhr.status + ": " + xhr.statusText);  
        }
    });
});

AJAX get()和post()

get()和post()用于通过HTTP GET或POST请求从服务器请求数据。

HTTP请求

• GET：从指定的资源请求数据
• POST：向指定的资源提交要处理的数据

JQuery $.get()方法

$.get()方法通过HTTP GET请求从服务器上请求数据，其语法格式如下：

$.get(URL, callback);

必须得URL参数规定希望请求的URL，可选的callback参数是请求成功后所执行的函数名，举个例子：

$("button").click(function() {
    $.get("demo_test.php", function(data, status) {
        alert("数据：" + data + "\n状态：" + status);
    });
});

$.get()的第一个参数是我们希望请求的URL，第二个参数是回调函数，第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

JQuery $.post()方法

$.post()方法通过HTTP POST请求从服务区上请求数据，其语法如下：

$.post(URL, data, callback);

必须的URL参数规定您希望请求的URL，可选的data参数规定连同请求发送的数据，可选的callback参数是请求成功后所执行的函数名。举个例子如下：

$("button").click(function() {
    $.post("/try/ajax/demo_test_post.php",
    {
        name: "百度"
        url: "www.baidu.com"
    },
    function(data, status) {
        alert("数据：\n" + data + "\n状态：" +  status);
    });
});