zoukankan      html  css  js  c++  java
  • Jquery Ajax的使用

    一、简介

      在介绍jquery ajax之前,先来回顾一下javascript的ajax。javascript的ajax通过XMLHttpRequest对象来实现与服务器的异步交互从而达到局部刷新页面的效果。其交互流程如下:

    • 用户操作DOM,触发相应的事件。
    • 在相应的事件处理程序中,创建一个XMLHtppRequest对象的实例,通过该对象的open方法来建立调用,并设置请求方式以及发送请求的地址。同时为onreadstatechange属性设置对应的回调函数。
    • 使用send方法向服务器发送请求。
    • 服务器对请求作出响应。
    • XMLHttpRequest捕获服务器的响应,调用为onreadstatechange属性设置的回调函数处理响应。

    jquery 对js进行了封装,jquery中的ajax实现方法最大的优势就是就是消除了各个浏览器之间的差异,提高了程序的兼容性;其次简化了开发人员的操作,减少了程序的代码量。

    jquery对javascript的ajax进行了3次封装:第一次封装实现了$.ajax()方法;第二层封装实现了load()方法、$.post()、$.get()方法;第三层封装实现了$.getScript()和$.getJson()方法。 

    二、几种常用方法的实例讲解

    1、$.Ajax()

     这个方法是jquery ajax 底层的实现,返回其创建的XMLHttpRequest对象。其只有一个Object类型的参数,该参数的属性都是已Key/value的形式设置的。其属性说明如下:

    参数名 类型 描述
    url String (默认: 当前页地址) 发送请求的地址。
    type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
    timeout Number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
    async Boolean (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
    beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
    function (XMLHttpRequest) {
    this; // the options for this ajax request }
    cache Boolean (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
    complete Function 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。
    function (XMLHttpRequest, textStatus) {
    this; // the options for this ajax request }
    contentType String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
    data Object,
    String
    发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
    dataType String

    预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

    "xml": 返回 XML 文档,可用 jQuery 处理。

    "html": 返回纯文本 HTML 信息;包含 script 元素。

    "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

    "json": 返回 JSON 数据 。

    "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

    error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。
    function (XMLHttpRequest, textStatus, errorThrown) {
    // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request }
    global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
    ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
    processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
    success Function 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
    function (data, textStatus) {
    // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

     示例代码:

     $(function (){          
                $.ajax({
                    url: "Ajax.ashx",
                    type: "post",
                    data: {
                        ParamType: "Init",
                        Action: "GetProjectTree",
                        M: Math.random()
                    },        
                    dataType:"json",            
                    success: function (data, textStatus) {
                      
                        $("#ProjectTree").combotree("loadData", data);
                    }                
    
                });
     })

    2、$.Get(url,[data],[callback],[type])

    该方法是jquery 的全局方法,该方法使用get方式来进行异步请求,一共有四个参数。如下:

    • url:发送请求的地址;
    • data:是可选参数,执行异步请求附加的参数列表。以“key/value”的形式作为QueryString附加到请求的URL中;
    • callback:可选参数,执行成功的回调函数,处理服务器响应的数据。该回调函数有两个参数,第一个为请求返回的数据第二个为请求的状态;
    • type:可选参数,设置返回内容的格式,可选值为xml、html、script、json、jsonp、text等;

    实例代码:

    $.get(
                    "Ajax.ashx",
                    {
                        ParamType: "Init",
                        Action: "GetProjectTree",
                        M: Math.random()
                    },
                    function (data,textStatus) {
                       //......
                    },
                    "json"
                    );
    

    3、$.post(url,[data],[callback],[type])

    与$.get()方法一样,它也是jquery 的一个全局方法,与$.get()有着相同的参数。两者之前的区别在于请求方式不同,$.post()以post方式进行异步请求,是将参数作为消息的实体发送到服务器端,这样较之$.get()方法更为安全同事传递的数据量也不受限制。

    实例代码如下:

     $.post(
                    "Ajax.ashx",
                    {
                        ParamType: "Init",
                        Action: "GetProjectTree",
                        M: Math.random()
                    },
                    function (data,textStatus) {
                       //......
                    },
                    "json"
                    );
    

    4、$("selector").load(url,[data],[callback])

      load() 是jquery的ajax中的最简单也最常用的方法,能远程载入HTML并直接插入DOM中。

    有三个参数:

    url 发送请求的地址

    data 随同请求附加的参数

    callback 请求完成执行的回调函数,无论请求执行成功还是失败都会执行

    实例:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsSystemFunction.aspx.cs" Inherits="UI.JsSystemFunction" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>
            jquery load()方法
        </title>
        <script src="Scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">   
            $(function () {
                $("#refresh").click(function () {
                    $("#CommentList").load("Test.html");
                })
            })
    
        </script>
        <style type="text/css">
            #CommentList div {
                background-color:#FFFAFA;
               
                margin-top:8px;
            }
        </style>
    </head>
    <body>    
        <h2>回复列表</h2>
        <input type="button" id="refresh" value="刷新列表" />
        <div id="CommentList"></div>
    </body>
    </html>

    远程载入的html文件:

    <div>
        <h3>李四:</h3>
        <p>抢沙发。。。。。。抢完再看</p>
    </div>
    
    <div>
        <h3>Abner:</h3>
        <p>楼上的真矬!</p>
    </div>

    效果图:

    5、$.getJSON(url,[data],[callback])

      该方法是jquery的一个全局方法,该方法通过get方式请求载入json数据

    参数说明:

    url 发送请求的地址

    data 可选 附带的参数

    callback 请求成功时执行的回调函数

    实例:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsSystemFunction.aspx.cs" Inherits="UI.JsSystemFunction" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>
            jquery getJSON()方法
        </title>
        <script src="Scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">        
            $(function () {
                $("#Sub").click(function () {
                    //debugger;
                    $.getJSON("test.txt",
                        {
                            d: Math.random()
                        },
                        function (data) {
                           // debugger;
                        $.each(data, function (index, p) {
                            var html = "<tr><td>" + p.name + "</td><td>" + p.age + "</td><td>" + p.sex + "</td></tr>";                        
                            $("#peoples>tbody").append(html);
    
                        })
                    })
    
                })              
                
            })
    
        </script>
        
    </head>
    <body> 
        <input type="button"  id="Sub" value="获取"/>   
        <table id="peoples" style="200px;border-collapse:collapse;" border="1"   >
            <thead>
                <tr>
                    <td>name</td>
                    <td>age</td>
                    <td>sex</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </body>
    </html>

    在这里的数据源是一个静态文件

    [{"name":"张三","age":25,"sex":"男"},{"name":"李四","age":24,"sex":"女"}]

    效果

    6、$.getScript(url,[callback]) 

      该方法为jquery 的全局方法,以get请求方式异步的加载js文件,从而可以缓解页面加载压力。

    参数说明:

    url 发送请求的地址

    callback 可选参数  请求成功之后执行的回调函数

    实例:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsSystemFunction.aspx.cs" Inherits="UI.JsSystemFunction" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>
            jquery getJSON()方法
        </title>
        <script src="Scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">        
            $(function () {
                $("#Sub").click(function () {
                    
                    $.getScript("Test.js", function (data) {
                        Msg();
                    });
    
                })              
                
            })
    
        </script>
        
    </head>
    <body> 
        <input type="button"  id="Sub" value="异步加载Javascript文件"/>   
        
    </body>
    </html>

    请求的js文件:

    function Msg()
    {
        alert("异步加载js文件");
    }

    效果:

     

    7、jquery  ajax 全局事件

      jquery ajax 拥有一些全局事件能够对ajax的请求响应过程进行全程监控,jquery 提供了一些函数来给这些全局事件注册回调函数。

    jquery 提供的全局事件函数有如下几个:

    函数名称 说明
    ajaxComplete(callback) ajax 请求完成时触发该事件
    ajaxError(callback) ajax 请求发生错误的时候触发该事件
    ajaxSend(callback) ajax 请求发送前触发该事件
    ajaxStart(callback) ajax请求开始时触发该事件
    ajaxStop(callback) ajax 请求结束时触发该事件
    ajaxSuccess(callback) ajax请求成功时触发该事件

    Ajax全局事件发送默认将捕获所有匹配的Ajax事件。在$.ajax()与$.ajaxSetup()方法中可以通过属性global来设置是否触发全局事件。

    三、总结

    不积跬步,无以至千里!

  • 相关阅读:
    hdu1238 Substrings
    CCF试题:高速公路(Targin)
    hdu 1269 迷宫城堡(Targin算法)
    hdu 1253 胜利大逃亡
    NYOJ 55 懒省事的小明
    HDU 1024 Max Sum Plus Plus
    HDU 1087 Super Jumping! Jumping! Jumping!
    HDU 1257 最少拦截系统
    HDU 1069 Monkey and Banana
    HDU 1104 Remainder
  • 原文地址:https://www.cnblogs.com/YanYongSong/p/5104659.html
Copyright © 2011-2022 走看看