Jquery—使用AJAX

AJAX 即 异步 JavaScript 和 XML（Asynchronous JavaScript and XML），是一种与服务器交换数据的技术，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。不同浏览器ajax的实现并不相同，为了兼容不同浏览器，使用传统的JS代码来实现ajax是比较繁杂的，但是使用jquery，实现起来就非常简单。

这里我使用本地服务器APM来发布网站，具体下载安装步骤可网上查询，启动APM之后将你的项目文件放入APMServ5.2.6\www\htdocs目录下即可，然后通过本地ip访问你的html文件，如我的地址是：http://127.0.0.1/a/Jquery/AJAX/index.html。当然你也可以可以使用其他的本地服务器，如Tomcat。

jQuery 的 AJAX  方法：

     load()—$(selector).load(URL,data,callback); 从服务器加载数据，并把返回的数据放入被选元素中；

     get()—$.get(URL,callback); 通过 HTTP GET 请求从服务器请求数据；

     post()—$.post(URL,data,callback); 通过 HTTP POST 请求从服务器请求数据；

（1） load()—$(selector).load(URL,data,callback);   

url：必选，加载的文件地址；

data：可选，规定与请求一同发送的查询字符串键/值对集合；

callback:：可选，load() 方法完成后所执行的函数名称，其有三个可选参数，

      responseTxt - 包含调用成功时的结果内容

     statusTXT - 包含调用的状态

    xhr - 包含 XMLHttpRequest 对象

用法：如加载text.txt中的内容，放在class="box"的div盒子中，加载成功或者失败都弹框提示：

$(function(){
            $("button").click(function(){
                $(".box").load("text.txt .myspan",function(responTxt,statusTxt,xhr){
                    if(statusTxt=="success"){
                        alert("加载成功 responTxt="+responTxt);
                    }else if(statusTxt=="error"){
                        alert("加载失败 xhr.status="+xhr.status+" xhr.statusText="+xhr.statusText);
                    }

                });
            });
        })

（2）  get()—$.get(URL,callback);

GET 基本上用于从服务器获得（取回）数据。GET 方法可能返回缓存数据。

url：必选，加载的文件地址；

callback：可选，get()方法完成后所执行的函数callback有两个参数，

    data—被请求页面的内容；

    status—请求的状态；

用法：从test.php中获取返回的数据，弹出提示框显示返回的数据和请求的状态：

jqeury使用ajax get方法请求php文件返回数据代码如下：

    $(function(){
            $("button").click(function(){
                $.get("test.php",function(data,status){
                    alert("数据="+data+" status="+status);
                });
            })
        });

其中test.php内容为：

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

alert中结果是：数据=这是个从PHP文件中读取的数据。 status=success

（3） post()—$.post(URL,data,callback);

POST常用于连同请求一起发送数据，也可用于从服务器获取数据。不过，POST 方法不会缓存数据。

url：必选，加载的文件地址；

data：可选，规定与请求一同发送的查询字符串键/值对集合；

callback:：可选，load() 方法完成后所执行的函数名称，其有三个可选参数；

用法：从test_post.php中获取返回的数据，弹出提示框显示返回的数据和请求的状态：

jqeury使用ajax  post方法请求php文件返回数据代码如下：

 $(function(){
            $("button").click(function(){
                $.post("test_post.php",{
                    name:"我的csdn博客地址",
                    url:"http://blog.csdn.net/nongweiyilady"
                },function(data,status){
                    alert("data="+data+"\nstatus="+status);
                });
            })
        })

其中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;
?>

alert中结果是：

data=网站名: 我的csdn博客地址
URL 地址: http://blog.csdn.net/nongweiyilady
status=success

本文资料参考来自：http://www.runoob.com/jquery/jquery-ajax-get-post.html