jQuery学习02--AJAX

 $.ajax({
     url: "config/search_action.php",    //  请求路径
     type: "post", //请求方式
     data: $("form").serialize(),//请求参数
     success: function(responseText,status,xhr){    //异步执行成功执行的回调函数               
        if (responseText != ''){
           $('.search_results').css("background-color","pink");    //搜索框下拉
           $('.search_results').html(responseText);      //地图上打标志
           //alert(responseText);
        } else {
           $('.search_results').html("<li>没有搜索到</li>");
        }

       }
 })
 .done(function() {
     console.log("success");
 })
 .fail(function() {
     console.log("error");
 })
 .always(function() {
      console.log("complete");
 });;

1.jQuery - AJAX 简介

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

 

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

---

如果没有 jQuery，AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

2.jQuery - AJAX load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

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

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

实例：

<button type="button" class="btn btn-default " onclick="getValue()">
    <script>
      function getValue() {
         $("#autore").load("Intro_Cesium_test1.html");
      }
    </script>
</button>

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

• responseTxt - 包含调用成功时的结果内容
• statusTXT - 包含调用的状态
• xhr - 包含 XMLHttpRequest 对象

下面的例子会在 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);
  });
});

3.jQuery ajax() 方法

ajax() 方法用于执行 AJAX（异步 HTTP）请求。

所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

$.ajax({name:value, name:value, ... })

name	value/描述
url	规定发送请求的 URL。默认是当前页面。
type	规定请求的类型（GET 或 POST）。
data	规定要发送到服务器的数据。
success(result,status,xhr)	当请求成功时运行的函数。

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

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

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

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

 4.ajax的回调函数（done,fail,always）

deferred.always()	当Deferred（延迟）对象被受理或被拒绝时，调用添加的处理程序
deferred.done()	当Deferred（延迟）对象被受理时，调用添加的处理程序
deferred.fail()	当Deferred（延迟）对象被拒绝时，调用添加的处理程序

实例：

                $.ajax({
                    url: "config/search_action.php",    //  请求路径
                    type: "post", //请求方式
                    data: $("form").serialize(),//请求参数
                    success: function(responseText,status,xhr){//异步执行成功执行的回调函数
                    
                        if (responseText != ''){
                            $('.search_results').css("background-color","pink");//搜索框下拉
                            $('.search_results').html(responseText);//地图上打标志
                            //alert(responseText);
                        } else {
                            $('.search_results').html("<li>没有搜索到</li>");
                        }
                    }
                })
                .done(function() {
                    console.log("success");
                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                });