jQuery学习笔记：jQuery Ajax 02：$.get()方法

jQuery Ajax：$.get()方法

 

主要参考：

《锋利的jQuery》单东林、张晓菲、魏然

www.3cschool.com.cn之《jQuery 参考手册 - Ajax》

 

搜集整理：sagahu@163.com

 

简单示例

 

使用 AJAX 的 HTTP GET 请求来改变 div 元素的文本：

 

$("#button").click(function(){

  $.get("demo_ajax_get.txt", function(result){

    $("div").html(result);

  });

});

 

定义

 

get() 方法通过远程 HTTP GET 请求载入信息。

 

这是一个简单的HTTP GET 请求功能以取代复杂 $.ajax() 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax()。

 

语法

 

$.get(url, data, callback, dataType)

 

参数	说明
url	必需。规定要将请求发送到哪个 URL。
data	可选。规定连同请求发送到服务器的数据。发送至服务器的key/value数据会作为QueryString附加到请求url中。
callback的语法： function(response, status, xhr)	可选。规定当载入成功时的回调函数（只有当Response的返回状态是success才调用该方法），自动将结果和状态传递给该方法。 回调函数参数：     response - 包含来自请求的结果数据。     status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror" 4种）。     xhr - 包含 XMLHttpRequest 对象。对于 jQuery 1.4，才可以向 success 回调函数传递 XMLHttpRequest 对象，此前版本没有这个参数。
dataType	可选。规定预计的服务器端返回内容的格式，包括xml、html、script、json、text和_default。默认地，jQuery 将智能判断。
返回值	XMLHttpRequest

 

详细说明

 

该函数是简写的 Ajax 函数，等价于：

 

$.ajax({

  url: url,

  data: data,

  success: success,

  dataType: dataType

});

 

根据响应的不同的 MIME 类型，传递给 success 回调函数的返回数据也有所不同，这些数据可以是 XML root 元素、文本字符串、JavaScript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。

 

对于 jQuery 1.4，也可以向 success 回调函数传递 XMLHttpRequest 对象；而此前jQuery版本的该回调方法参数，只有response与status两个。

 

使用data参数发送数据的简单示例

 

$("#send").click(function() {

       $.get("validateuser.php", {

              username: $("#username").val(),

              password: $("#password").val()

       });

});

 

服务器返回数据格式是HTML片断的示例

 

如果服务器端返回的数据格式是HTML片断，那么不需要经过处理，就可以把新的HTML数据插入到主页面中。

 

$(function(){

       $("#send").click(function() {

              $.get("validateuser.php",

                     { username: $("#username").val(), password: $("#password").val() },

                     function(data, textStatus){

                            $("#div1").html(data);       // 将返回的数据添加到页面上

                     }

              );

       });

});

 

HTML片断在客户端处理的时候最方便，但是这种固定的数据结构通常缺少通用性。

 

服务器返回数据格式是XML文档的示例

 

如果服务器端返回的数据格式是XML文档，就需要对返回的数据进行处理。jQuery具有强大的DOM处理能力，处理XML文档与处理HTML文档一样，也可以使用常规的attr()、find()、filter()以及其它的方法。

 

$(function(){

       $("#send").click(function() {

              $.get("validateuser.php",

                     { username: $("#username").val(), password: $("#password").val() },

                     function(data, textStatus){

                            var username=$(data).find("comment").attr("username");

                            var content=$(data).find("comment content").text();

                            var txtHtml="<div class='comment'><h6>"

                                   +username+":</h6><p class='para'>"

                                   +content+"</p></div>";

                            $("#div1").html(txtHtml);  // 将返回的数据添加到页面上

                     }

              );

       });

});

 

返回数据格式为XML文档在客户端处理起来被HTML片断会复杂些，但是XML文档的可移植性是其它数据格式无法比拟的。但是，XML文档体积相对较大，与其它格式相比，解析和操作它们的速度要慢一些。

 

服务器返回数据格式是JSON对象的示例

 

JSON格式很好地避免了XML文档的体积大和难以解析。JSON格式和XML文档一样都方便重用，而且非常简洁、易读。

 

如果服务器端返回的数据格式是JSON文件，那么也需要处理之后，才可以将新的HTML数据添加到主页面中。

 

$(function(){

       $("#send").click(function() {

              $.get("validateuser.php",

                     { username: $("#username").val(), password: $("#password").val() },

                     function(data, textStatus){

                            var username=data.username;

                            var content=data.content;

                            var txtHtml="<div class='comment'><h6>"

                                   +username+":</h6><p class='para'>"

                                   +content+"</p></div>";

                            $("#div1").html(txtHtml);      // 将返回的数据添加到页面上

                     },

                     "json"    // 设置这个参数来代表服务器端返回的数据格式

              );

       });

});

 

JSON的缺点是，它的格式要求非常严格，构建的JSON文件必须完整无误，任何一个括号的不匹配或者缺少一个逗号，都可能导致页面上的脚本终止运行或者错误。