jQuery AJAX

---

AJAX是与服务器交换数据的技术，能让我们在不重新加载整个网页的情况下，实现对部分网页的更新。

AJAX = 异步 JavaScript 和 XML (Asynchronous JavaScript and XML)。

编写常规的AJAX比较繁琐，需要针对不同浏览器进行测试，jQuery提供了多个与AJAX有关的方法，让我们可以通过简单的几行代码实现AJAX功能。

---

jQuery load()方法

load()方法从服务器加载数据，并将返回的数据放入指定的元素中。

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

参数说明
URL:必须参数，指定需要加载的URL。
data:可选参数，与请求一同发送的查询字符串键值对集合。
callback:可选参数，load()方法完成后执行的函数名称。

示例
在load()方法完成后弹出一个提示框，load()方法成功，显示“我不内容加载成功”，失败，则显示错误提示。

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

动手试一试：在线练习

---

jQuery get()和post()方法

jQuery通过get()和post()方法通过GET或POST请求从服务器请求数据。

get()语法
通过GET请求从服务器请求数据:$.get(URL,callback);

URL:必选参数，指定请求的URL。
callback:可选参数，请求成功后执行的函数名。

示例

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    //data回调参数存有被请求页面的内容，status回调参数存有请求的状态。
    alert("数据: " + data + "\n状态: " + status);
  });
});

附上demo_test.php 文件代码:

<?php
echo '这是个从PHP文件中读取的数据。';
?>

动手试一试：在线练习

post()语法
通过POST请求从服务器请求输出:$.post(URL,data,callback);

URL:必选参数，指定请求的URL。
data:可选参数，连同请求发送的数据。
callback:可选参数，请求成功后执行的函数名。

示例

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

$.post()的第一个参数，请求的URL("demo_test_post.php")。
第二个参数，连同请求一起发送的name和url。
第三个参数，回调函数，两个回调参数，date存有被请求页面内容，status存有请求状态。

附上demo_test_post.php 文件代码:

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>

动手试一试：在线练习