jQuery的Ajax方法学习小记

jQuery ajax – get() 方法

定义和用法

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

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

语法

$(selector).get(url,data,success(response,status,xhr),dataType)

参数 描述
url 必需。规定将请求发送的哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
success(response,status,xhr) 可选。规定当请求成功时运行的函数。

额外的参数:

  • response – 包含来自请求的结果数据
  • status – 包含请求的状态
  • xhr – 包含 XMLHttpRequest 对象
dataType 可选。规定预计的服务器响应的数据类型。

默认地,jQuery 将智能判断。

可能的类型:

  • “xml”
  • “html”
  • “text”
  • “script”
  • “json”
  • “jsonp”

详细说明

该函数是简写的 Ajax 函数,等价于:

$.ajax({  url: url,  data: data,  success: success,  dataType: dataType});

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

对于 jQuery 1.4,也可以向 success 回调函数传递 XMLHttpRequest 对象。


 

jQuery ajax – post() 方法

定义和用法

post() 方法通过 HTTP POST 请求从服务器载入数据。

语法

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数 描述
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType 可选。规定预期的服务器响应的数据类型。

默认执行智能判断(xml、json、script 或 html)。

详细说明

该函数是简写的 Ajax 函数,等价于:

$.ajax({  type: ‘POST’,  url: url,  data: data,  success: success,  dataType: dataType});

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

对于 jQuery 1.5,也可以向 success 回调函数传递 jqXHR 对象(jQuery 1.4 中传递的是 XMLHttpRequest 对象)。

大部分实现会规定一个 success 函数:

$.post(“ajax/test.html”, function(data) {  $(“.result”).html(data);});

参数 描述
url 规定要将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(response,status,xhr) 可选。规定当请求完成时运行的函数。

额外的参数:

  • response– 包含来自请求的结果数据
  • status– 包含请求的状态(”success”, “notmodified”, “error”, “timeout” 或 “parsererror”)
  • xhr– 包含 XMLHttpRequest 对象

 

 

 

 

jQuery ajax – load() 方法

定义和用法

load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

注释:还存在一个名为 load 的 jQuery 事件方法。调用哪个,取决于参数。

语法

load(url,data,function(response,status,xhr))

参数 描述
url 规定要将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(response,status,xhr) 可选。规定当请求完成时运行的函数。

额外的参数:

  • response– 包含来自请求的结果数据
  • status– 包含请求的状态(”success”, “notmodified”, “error”, “timeout” 或 “parsererror”)
  • xhr– 包含 XMLHttpRequest 对象

详细说明

该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当侦测到成功的响应时(比如,当 textStatus 为 “success” 或 “notmodified” 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单:

$(“#result”).load(“ajax/test.html”);

如果提供回调函数,则会在执行 post-processing 之后执行该函数:

$(“#result”).load(“ajax/test.html”, function() {  alert(“Load was performed.”);});

上面的两个例子中,如果当前文档不包含 “result” ID,则不会执行 .load() 方法。

如果提供的数据是对象,则使用 POST 方法;否则使用 GET 方法。

 

<script type="text/javascript">
    //jquery.load
    $(document).ready(function () {
        $("#test").click(function () {
            $("#result").load("TextFile1.txt", function (responseText, txtStatus, XMLHttpRequest) {
                $("#display").append("<b>responseText:</b>" + responseText);
                $("#display").append("<br>txtStatus:</br>" + txtStatus);
                $("#display").append("<br>XMLHttpRequest:</br>" + XMLHttpRequest);
            }
            );
        }
            );
    }
    );

    //jquery.get
    $(document).ready(function () {
        $("#test").click(function () {
            $.get("jquery.aspx", { name: "Dennis" }, function (data, textStatus) {
                $("#display").append("<b>data:</b>" + data + "<br/>");
                $("#display").append("<b>textStatus:</b>" + textStatus + "<br/>");
            });
        });
    });
//jquery.post
    $(document).ready(function () {
        $("#submit").click(function () {
            $.post("jquery.aspx", { firstname: $("#firstname").val(), lastname: $("#lastname").val() },
                function (data, textStatus) {
                    $("#display").append("<b>data:</b>" + data + "<br/>");
                    $("#display").append("<b>textStatus:</b>" + textStatus + "<br/>");
                },
                "text"
                );
            return false;
        });
    });
//jquery.ajax
    $(document).ready(function () {
        $("#test").click(function () {
            $.ajax({
                type: "GET",
                url: "jquery.aspx",
                data: "name=username",
                beforeSend: function (XMLHttpRequest) {
                    $("#display").append(XMLHttpRequest.responseText + "<br/>")
                    $("#display").append(XMLHttpRequest.readyState + "<br/>")
                },
                success: function (data) {
                    $("#display").append("<b>请求的数据为:</b>" + data + "<br/>");
                }

            });
        });
    });
</script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注