zoukankan      html  css  js  c++  java
  • Java程序员之JS(一) 之 JQuery.ajax

      

    背景:紧着现在项目的需要,先从JQuery.ajax出发,主要需求是通过 js 调用Java 代码,从而适应现在的项目。

       

    先从几个概念开始讲解:

      

    一. 什么是Deferred 

      Deferred 对象是由.Deferred构造的, .Deferred被实现为简单工厂模式。它是用来解决JS中的异步编程,遵循 Common Promise/A规范,实现此规范的还有when.js 和 dojo. 

      Deferred 对象在 JQuery 1.5被引入,用来解决 Ajax 异步优化问题,正是由于 Deferred 的 引入,Ajax 相关代码可读性大大提高,替代了回调函数的概念。

      详细讲解请查看转载文: 读jQuery之二十(Deferred对象)--(转)

    二. 什么是 Promise (中文“承诺”) 

      Promise 是规范; Promise 规范的代码只有100多行,实际 Promise 只有100行代码;现如今高版本的浏览器已经原生实现了 Promise

      下面是 Promise/A++规范

      1. 一个Promise可能有三种状态:等待(pengding)、已完成(fulled)、已拒绝(rejected);

      2. 一个Promise的状态只可能从“等待”转到“完成”态或者“拒绝”态,不能逆向转化,同时“完成”态和“拒绝”态不能相互转换;

      3. promise 必须实现 then 方法(可以说then就是promise的核心),而且then 必须返回一个promise, 同一个promise 的then可以调用多次,并且毁掉的执行顺序和他们被调用的顺序一致;

      4. then 方法接受两个参数,第一个参数是成功时的毁掉,在promise由“等待”态转换到“完成”态时调用,另一个是失败时的回调,在promise由“等待”态转换到“拒绝”态时调用。同时,then可以接受另一个 promise 传入,也接受一个“类then”的对象或方法,即thenable对象; 

      详细讲解请查看转载文: JavaScript Promise启示录--(转)

    三. jQuery.ajax() 函数详解 

      jQuery.ajax() 用于通过后台HTTP请求加载远程数据

      jQuery.ajax() 函数是 jQuery封装的 AJAX技术,通过该函数我们无需刷新当前页面即可获取远程服务器上的数据;

      jQuery.ajax() 函数属于全局的Ajax 函数(也可以理解为静态函数);

      

       语法


       jQuery 1.0 新增静态函数jQuery.ajax()函数有以下两种用法:

      用法一jQuery.ajax( [ settings ] ] )

      用法二jQuery.ajax( url [, settings ] ] )。jQuery 1.5 新增支持该用法

      用法二是用法一的变体,它只是将参数对象settings中的可选属性url单独提取出来作为一个独立的参数。

      参数


      urlString类型 URL请求字符串。

      settings: 可选/Object类型一个Object对象,其中的每个属性用来指定发送请求所需的额外参数设置。
            参数settings是一个对象,jQuery.ajax()可以识别该对象的以下属性(它们都是可选的):


    参数 类型 描述
    accepts Object 

    默认值:取决于dataType 属性;

    说明:发送的内容类型请求头,用于告诉服务器——浏览器可以接收服务器返回何种类型的响应;

    async Boolean

    默认值true

    说明:指示是否是异步请求。同步请求将锁定浏览器,直到获取到远程数据后才能执行其他操作;

    beforeSend Function 说明:指定在请求发送前需要执行的回调函数。该函数还有两个参数:其一是jqXHR对象,其二是当前settings对象。这是一个Ajax事件,如果该函数返回false,将取消本次ajax请求。
    cache Boolean

    默认值true(dataType为'script'或'jsonp'时,则默认为false);

    说明:指示是否缓存URL请求。如果设为false将强制浏览器不缓存当前URL请求。该参数只对HEAD、GET请求有效(POST请求本身就不会缓存)。

    complete

    Function/Array

    说明:指定请求完成(无论成功或失败)后需要执行的回调函数。该函数还有两个参数:一个是jqXHR对象,一个是表示请求状态的字符串('success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror')。这是一个Ajax事件。从jQuery 1.5开始,该属性值可以是数组形式的多个函数,每个函数都将被回调执行。
    contents Object 1.5新增说明:一个以"{字符串:正则表达式}"配对的对象,用来确定jQuery将如何解析响应,给定其内容类型;
    contentType String

    默认值:'application/x-www-form-urlencoded; charset=UTF-8'。

    说明:使用指定的内容编码类型将数据发送给服务器。W3C的XMLHttpRequest规范规定charset始终是UTF-8,你如果将其改为其他字符集,也无法强制浏览器更改字符编码。

    context Object 说明:用于设置Ajax相关回调函数的上下文对象(也就是函数内的this指针)。
    converters Object

    1.5新增默认值:{'* text': window.String, 'text html': true, 'text json': jQuery.parseJSON, 'text xml': jQuery.parseXML}。

    说明:一个数据类型转换器。每个转换器的值都是一个函数,用于返回响应转化后的值。

    crossDomain Boolean

    1.5新增默认值:同域请求为false,跨域请求为true;

    说明:指示是否是跨域请求,如果你想在同一域中强制跨域请求(如JSONP形式),请设置为true。例如,这允许服务器端重定向到另一个域。

    data 任意类型 说明:发送到服务器的数据,它将被自动转为字符串类型。如果是GET请求,它将被附加到URL后面。
    dataFilter Function 说明:指定处理响应的原始数据的回调函数。该函数还有两个参数:其一表示响应的原始数据的字符串,其二是dataType属性字符串。
    dataType

    String

    默认值:jQuery智能猜测,猜测范围(xml、 json、 script或html);

    说明:指定返回的数据类型。该属性值可以为:

    • 'xml' :返回XML文档,可使用jQuery进行处理。
    • 'html': 返回HTML字符串。
    • 'script': 返回JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意:在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
    • 'json': 返回JSON数据。JSON数据将使用严格的语法进行解析(属性名必须加双引号,所有字符串也必须用双引号),如果解析失败将抛出一个错误。从jQuery 1.9开始,空内容的响应将返回null或{}。
    • 'jsonp': JSONP格式。使用JSONP形式调用函数时,如"url?callback=?",jQuery将自动替换第二个?为正确的函数名,以执行回调函数。
      'text': 返回纯文本字符串。
    error

    Function/Array

    说明:指定请求失败时执行的回调函数。该函数有3个参数:jqXHR对象、 请求状态字符串(null、 'timeout'、 'error'、 'abort'和'parsererror')、 错误信息字符串(响应状态的文本描述部分,例如'Not Found'或'Internal Server Error')。这是一个Ajax事件。跨域脚本和跨域JSONP请求不会调用该函数。
    从jQuery 1.5开始,该属性值可以是数组形式的多个函数,每个函数都将被回调执行。

    global Boolean

    默认值:true。
    说明:指示是否触发全局Ajax事件。将该值设为false将阻止全局事件处理函数被触发,例如ajaxStart()和ajaxStop()。它可以用来控制各种Ajax事件。

    headers Object

    默认值:{};

    说明:以对象形式指定附加的请求头信息。请求头X-Requested-With: XMLHttpRequest将始终被添加,当然你也可以在此处修改默认的XMLHttpRequest值。headers中的值可以覆盖beforeSend回调函数中设置的请求头(意即beforeSend先被调用)。

    1 $.ajax({
    2     url: "my.php" ,
    3     headers: {
    4         "Referer": "http://www.365mini.com" // 有些浏览器不允许修改该请求头
    5         ,"User-Agent": "newLine" // 有些浏览器不允许修改该请求头
    6         ,"X-Power": "newLine"
    7         ,"Accept-Language": "en-US"
    8     }
    9 });
    ifModified Boolean  默认值:false;

    说明:允许当前请求仅在服务器数据改变时获取新数据(如未更改,浏览器从缓存中获取数据)。它使用HTTP头信息Last-Modified来判断。从jQuery 1.4开始,他也会检查服务器指定的'etag'来确定数据是否已被修改。

    isLocal Boolean

    1.5.1新增默认值:取决于当前的位置协议。
    说明:允许将当前环境视作"本地",(例如文件系统),即使默认情况下jQuery不会如此识别它。目前,以下协议将被视作本地:file、*-extension和widget。

    jsonp String 说明:重写JSONP请求的回调函数名称。该值用于替代"url?callback=?"中的"callback"部分。
    jsonpCallback

    String/Function

    说明为JSONP请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。

    从jQuery 1.5开始,你也可以指定一个函数来返回所需的函数名称。

    mimeType String 1.5.1新增说明:一个 mime 类型,用于覆盖 XHR 的 mime 类型;
    password String 说明:用于响应 HTTP 访问认证请求的密码;
    processData Boolean

    默认值:true;

    说明:默认情况下,通过data属性传递进来的数据,如果是一个对象(技术上讲,只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM树信息或其它不希望转换的信息,请设置为false。

    scriptCharset String 说明:设置该请求加载的脚本文件的字符集。只有当请求时dataType为"jsonp"或"script",并且type是"GET"才会用于强制修改charset。这相当于设置<script>标签的charset属性。通常只在当前页面和远程数据的内容编码不同时使用。
    statusCode Object

    1.5新增默认值:{};

    说明:一组数值的HTTP代码和函数构成的对象,当响应时调用了相应的代码。例如:

     1 $.ajax({
     2     url: a_not_found_url ,   
     3     statusCode: {  // 当响应对应的状态码时,执行对应的回调函数
     4         404: function() {
     5             alert( "找不到页面" );
     6         },
     7         200: function(){
     8             alert("请求成功");
     9         }
    10     }
    11 });
    success Function/Array 说明:指定请求成功后执行的回调函数。该函数有3个参数:请求返回的数据、响应状态字符串、jqXHR对象。从jQuery 1.5开始,该属性值可以是数组形式的多个函数,每个函数都将被回调执行
    timeout Number 说明:设置请求超时的毫秒值;
    traditional Boolean 说明:如果你希望使用传统方式来序列化参数,将该属性设为true。
    type String

    默认值:"GET";

    说明:请求类型,可以为'POST'或'GET'。注意:你也可以在此处使用诸如'PUT'、'DELETE'等其他请求类型,但它们不被所有浏览器支持;

    url String 默认值:当前目标URL;说明:请求的目标URL;
    username String 说明:用于响应HTTP访问认证请求的用户名 
    xhr Function

    默认值:在IE下是ActiveXObject(如果可用),在其他浏览器中是XMLHttpRequest。
    说明:一个用于创建并返回XMLHttpRequest对象的回调函数。你可以重写该属性以提供自己的XHR实现,或增强其功能。

    xhrFields Object 1.5.1新增说明:一个具有多个"字段名称-字段值"对的对象,用于对本地XHR对象进行设置。一对「文件名-文件值」在本机设置XHR对象。例如,如果需要,你可以用它来为跨域请求设置XHR对象的withCredentials属性为true。
    1 $.ajax({
    2    url: a_cross_domain_url,  
    3    xhrFields: { // 将XHR对象的withCredentials设为true
    4       withCredentials: true
    5    }
    6 });
    注意1、如果你的所有AJAX请求都需要设置settings中某些参数,你可以使用jQuery.ajaxSetup()函数进行全局设置,而无需在每次执行jQuery.ajax()时分别设置。
    2、在jQuery 1.4(含)之前,选项参数complete、succes、error等Ajax事件的回调函数的第3个参数不是经过jQuery封装的jqXHR对象,而是原生的XMLHttpRequest对象。

      

      返回值


      jQuery.ajax()函数的返回值为jqXHR类型,返回当前该请求的jqXHR对象(jQuery 1.4及以前版本返回的是原生的XMLHttpRequest对象)。

      事例 & 说明


      如果没有给jQuery.ajax()指定任何参数,则默认请求当前页面,并且不对返回数据进行处理。

      jQuery.ajax()函数的settings对象中,常用的属性有:url、type、async、data、dataType、success、error、complete、beforeSend、timeout等。

      请参考下面这段初始HTML代码:

    1 <div id="content"></div>
     以下是与jQuery.ajax()函数相关的jQuery示例代码,以演示jQuery.ajax()函数的具体用法:
    $.ajax({
         url: "jquery_ajax.php"
        , type: "POST"
        , data: "name=codeplayer&age=18"
        , success: function( data, textStatus, jqXHR ){
            // data 是返回的数据
            // textStatus 可能为"success"、"notmodified"等
            // jqXHR 是经过jQuery封装的XMLHttpRequest对象
            alert("返回的数据" + data);
        }
    });
    
    
    $.ajax({
         url: "jquery_ajax.php?page=1&id=3"
        , type: "POST"
        // jQuery会自动将对象数据转换为 "name=codeplayer&age=18&uid=1&uid=2&uid=3"
        , data: { name:"codeplayer", age:18, uid: [1, 2, 3] }
        // 请求成功时执行
        , success: function( data, textStatus, jqXHR ){
            alert("返回的数据" + data);
        }
        // 请求失败时执行
        , error: function(jqXHR, textStatus, errorMsg){
            // jqXHR 是经过jQuery封装的XMLHttpRequest对象
            // textStatus 可能为: null、"timeout"、"error"、"abort"或"parsererror"
            // errorMsg 可能为: "Not Found"、"Internal Server Error"等
            alert("请求失败:" + errorMsg);
        }
    });
    
    
    // 将url单独提取出来作为第一个参数(jQuery 1.5+才支持)
    $.ajax("jquery_ajax.php?action=type&id=3", {
         dataType: "json" // 返回JSON格式的数据
        , success: function( data, textStatus, jqXHR ){
            // 假设返回的字符串数据为{ "name": "CodePlayer", age: 20 }
            // jQuery已帮我们将该JSON字符串转换为对应的JS对象,可以直接使用
            alert( data.name ); // CodePlayer
        }   
    });
    
    
    $.ajax( {
        // 注意这里有个参数callback=?
         url: "http://cross-domain/jquery_ajax.php?name=Jim&callback=?&age=21"
        , async: false // 同步请求,发送请求后浏览器将被锁定,只有等到该请求完成(无论成功或失败)后,用户才能操作,js代码才会继续执行
        , dataType: "jsonp" // 返回JSON格式的数据
        , success: function( data, textStatus, jqXHR ){
            // 假设返回的字符串数据为{ "site_name": "CodePlayer", "site_desc": "专注于编程开发技术分享" }
            // jQuery已帮我们将该JSON字符串转换为对应的JS对象,可以直接使用
            alert( data.site_desc ); // 专注于编程开发技术分享
        }   
    });
    
    
    $.ajax( {
        // 加载指定的js文件到当前文档中
         url: "http://code.jquery.com/jquery-1.8.3.min.js"
        , dataType: "script"
    });

      以上jQuery.ajax()部分参考:http://www.365mini.com/page/jquery_ajax.htm

      

    四. 将 Deferred  和 Promise 运用在jQuery.ajax()应用实例 

       jQuery 发送的所有 Ajax 请求,内部都会通过 $.ajax() 函数来实现。通常没有必要直接调用这个函数,可以使用已经封装好的几个简便方法,如 .load()、$.get() 、getJSON()、getScript()和post()  。如果你需要用到那些不常用的选项,那么, $.ajax()使用起来更灵活。

       

      概念说明


      jqXHR 对象:从 jQuery 1.5开始,$.ajax() 返回 jqXHR 对象,改对象是浏览器原生的 XMLHttpRequert 对象的一个超集。例如他包含 reponseText 和 reponseXML 属性,以及一个 getResponseHeader() 方法。当传输机制不是XMLHttpRequeet时 (例如,一个JSONP请求脚本,返回一个脚本 tag 时),jqXHR 对象尽可能的模拟原生的XHR功能。

      从 jQuery 1.5 开始, $.ajax() 返回的 jqXHR 对象实现了 Promise接口,使它拥有了Promise 的所有属性,方法和行为,为了让回调函数的名称统一,便于在 $.ajax() 中使用。jqXHR 也提供 .error()、.success() 和 .complete() 方法。这些方法都带有一个参数,改参数是一个函数,此函数在 $.ajax() 请求结束时被调用,并且这个函数接收的参数,与调用 $.ajax() 函数时的参数是一致的。这将允许你在一次请求时,对多个回调函数进行赋值,甚至允许你在请求已经完成后,对回调函数进行赋值(如果该请求已经完成,则回调函数会被立刻调用).

    • jqXHR.done(function(data, textStatus, jqXHR){});

      一个可供选择的 success 回调选项的构造函数, .done() 方法取代了jqXHR.success()方法。

    • jqXHR.fail(function(jqXHR, textStatus, errorThrown){});

      一种可供选择的 error 回调选项的构造函数, .fail() 方法取代了.error()方法。

    • jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThown){});

      一种可供选择的 complete 回调选项的构造函数, .always() 方法取代 .complete()方法。

      在响应一个成功的请求后,改函数的参数和.done的参数是相同的:data, textStatus, 和 jqXHR 对象。对于失败的请求,参数和 .fail() 的参数是相同的:jqXHR对象,textStatus, 和 errorThown。

    • jqXHR.then(function(data, textStatus, jqXHR){}, function(jqXHR, textStatus, errorThown){});

      包含了 .done() 和 .fail() 方法的功能,(从jQuery1.8开始)允许底层被操作。

      推荐使用的注意事项:jqXHR.success(), jqXHR.error() 和 jqXHR.complete() 回调从 jQuery 1.8开始被弃用。他们讲最终被取消,您的代码应做好准备,使用 jqXHR.done()、 jqXHR.fail() 和jqXHR.always() 代替。  

     1 // Assign handlers immediately after making the request,
     2 // and remember the jqxhr object for this request
     3 var jqxhr = $.ajax( "example.php" )
     4     .done(function() { alert("success"); })
     5     .fail(function() { alert("error"); })
     6     .always(function() { alert("complete"); });
     7  
     8 // perform other work here ...
     9  
    10 // Set another completion function for the request above
    11 jqxhr.always(function() { alert("second complete"); });

      this 在所有的回调中的引用,是这个对象在传递给.ajax的设置中上下文,如果没有指定 context (上下文),this 引用的是 Ajax 设置的本身。

      为了向后兼容 XMLHttpRequest, 一jqXHR 对象将公开下列属性和方法:

    • readyState
    • status
    • statusText
    • responseXML and/or responseText 当底层的请求分别作出 XML和/或文本响应
    • setRequestHeader(name, value) 从标准出发,通过替换旧的值为新的值,而不是替换的新值到旧值
    • getAllResponseHeaders()
    • getReponseHeader()
    • abort()

      

      事例 & 说明


      1). load(url, [data], [callback]) -- 返回值 jQuery:载入远程HTML文件代码并插入至 DOM 中;

    • url: 待装入 HTML 网页网址(必填参数)
    • data: 发送至服务器的 key/value数据(在jquery 1.3中也可以接受一个字符串)(可选参数)
    • callback: 载入成功时回调函数(可选参数)

      默认情况使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。  

    1 //一个参数 默认为"GET"方式
    2 $("#links").load("/Main_Page #p-Getting-Started li");
    3 
    4 //data有数据之后,变为"SET"方式
    5  $("#feeds").load("feeds.php", {limit: 25}, function(){
    6     alert("The last 25 entries in the feed have been loaded");
    7  });

      2). jQuery.get(url, [data], [callback], [type]) -- 返回值XMLHttpRequest: 通过远程 HTTP GET请求载入信息。

    • URL: 待载入页面的URL地址(必填参数)
    • data: 待发送 key/value 参数(可选参数)
    • callback: 载入成功时回调函数(可选参数)
    • type: 返回内容格式, xml、html、script、json、text、_default(可选参数)

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

     1 //一个参数(请求 text.php页面, 忽略返回值)
     2 $.get("test.php");
     3 
     4 //两个参数(请求 text.php页面, 忽略返回值)
     5 $.get("test.php", { name: "John", time: "2pm" } );
     6 
     7 $.get("test.php", function(data){
     8   alert("Data Loaded: " + data);
     9 });
    10 
    11 //三个参数(显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数)
    12 $.get("test.cgi", { name: "John", time: "2pm" },
    13   function(data){
    14     alert("Data Loaded: " + data);
    15 });

      3). jQuery.getJSON(url, [data], [callback]) -- 返回XMLHttpRequest: 通过HTTP Get 载入Json 数据。

    • url: 发送请求地址(必填参数)
    • data: 待发送 Key/value 参数(可选参数)
    • callback: 载入成功时回调函数(可选参数)

      在 jQuery 1.2 中,您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 注意:此行以后的代码将在这个回调函数执行前执行。

    •  1 //从 Flickr JSONP API 载入 4 张最新的关于猫的图片。
       2 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
       3   $.each(data.items, function(i,item){
       4     $("<img/>").attr("src", item.media.m).appendTo("#images");
       5     if ( i == 3 ) return false;
       6   });
       7 });
       8 
       9 //从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据
      10 $.getJSON("test.js", function(json){
      11   alert("JSON Data: " + json.users[3].name);
      12 });
      13 
      14 //从 test.js 载入 JSON 数据,附加参数,显示 JSON 数据中一个 name 字段数据。
      15 $.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
      16   alert("JSON Data: " + json.users[3].name);
      17 });

      4). jQuery.getScript(url, [callback]) -- 返回XMLHttpRequest:通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

    • url: 待载入 JS 文件地址。
    • callback: 成功载入后回调函数。

      jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。

      

     1 //载入 <a title="http://jquery.com/plugins/project/color" class="external text" href="http://jquery.com/plugins/project/color">jQuery 官方颜色动画插件</a> 成功后绑定颜色变化动画。
     2 
     3 HTML 代码:
     4 <button id="go">» Run</button>
     5 <div class="block"></div>
     6 
     7 jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
     8   $("#go").click(function(){
     9     $(".block").animate( { backgroundColor: 'pink' }, 1000)
    10       .animate( { backgroundColor: 'blue' }, 1000);
    11   });
    12 });
    13 
    14 
    15 //加载并执行 test.js
    16 $.getScript("test.js");
    17 
    18 //加载并执行 test.js ,成功后显示信息。
    19 $.getScript("test.js", function(){
    20   alert("Script loaded and executed.");
    21 });

      5). jQuery.post(url, [data], [callback], [type]) -- 返回XMLHttpRequest:通过远程 HTTP POST 请求载入信息。

    • url:发送请求地址。
    • data:待发送 Key/value 参数。
    • callback:发送成功时回调函数。
    • type:返回内容格式,xml, html, script, json, text, _default。

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

     1 //请求 test.php 网页,忽略返回值
     2 $.post("test.php");
     3 
     4 //请求 test.php 页面,并一起发送一些额外的数据(同时仍然忽略返回值):
     5 $.post("test.php", { name: "John", time: "2pm" } );
     6 
     7 //向服务器传递数据数组(同时仍然忽略返回值):
     8 $.post("test.php", { 'choices[]': ["Jon", "Susan"] });
     9 
    10 //使用 ajax 请求发送表单数据:
    11 $.post("test.php", $("#testform").serialize());
    12 
    13 //输出来自请求页面 test.php 的结果(HTML 或 XML,取决于所返回的内容):
    14 $.post("test.php", function(data){
    15    alert("Data Loaded: " + data);
    16 });
    17 
    18 //向页面 test.php 发送数据,并输出结果(HTML 或 XML,取决于所返回的内容):
    19 $.post("test.php", { name: "John", time: "2pm" },
    20    function(data){
    21      alert("Data Loaded: " + data);
    22 });
    23 
    24 //获得 test.php 页面的内容,并存储为 XMLHttpResponse 对象,并通过 process() 这个 JavaScript 函数进行处理:
    25 $.post("test.php", { name: "John", time: "2pm" },
    26    function(data){
    27      process(data);
    28 }, "xml");
    29 
    30 
    31 //获得 test.php 页面返回的 json 格式的内容:
    32 $.post("test.php", { "func": "getNameAndTime" },
    33    function(data){
    34      alert(data.name); // John
    35      console.log(data.time); //  2pm
    36    }, "json");

      6. jQuery.ajax(url,[settings]) -- 返回值XMLHttpRequest --通过 HTTP 请求加载远程数据

      jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

      最简单的情况下,$.ajax()可以不带任何参数直接使用。

      注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置。

     1 //保存数据到服务器,成功时显示信息。
     2 $.ajax({
     3   method: "POST",
     4   url: "some.php",
     5   data: { name: "John", location: "Boston" }
     6 }).done(function( msg ) {
     7   alert( "Data Saved: " + msg );
     8 });
     9 
    10 //装入一个 HTML 网页最新版本。
    11 $.ajax({
    12   url: "test.html",
    13   cache: false
    14 }).done(function( html ) {
    15   $("#results").append(html);
    16 });
    17 
    18 //发送 XML 数据至服务器。设置 processData 选项为 false,防止自动转换数据格式
    19 var xmlDocument = [create xml document];
    20 var xmlRequest = $.ajax({
    21   url: "page.php",
    22   processData: false,
    23   data: xmlDocument
    24 });
    25  
    26 xmlRequest.done(handleResponse);
    27 
    28 //发送id作为数据发送到服务器, 保存一些数据到服务器上, 并通一旦它的完成知用户。  如果请求失败,则提醒用户。
    29 var menuId = $("ul.nav").first().attr("id");
    30 var request = $.ajax({
    31   url: "script.php",
    32   method: "POST",
    33   data: {id : menuId},
    34   dataType: "html"
    35 });
    36  
    37 request.done(function(msg) {
    38   $("#log").html( msg );
    39 });
    40  
    41 request.fail(function(jqXHR, textStatus) {
    42   alert( "Request failed: " + textStatus );
    43 });
    44 
    45 //载入并执行一个JavaScript文件.
    46 $.ajax({
    47   method: "GET",
    48   url: "test.js",
    49   dataType: "script"
    50 });

     

        

  • 相关阅读:
    关于博客园创始人的心路历程,感触很深!
    Django中的ORM相关操作:F查询,Q查询,事物,ORM执行原生SQL
    在Django中运行脚本文件以及打印出SQL语句。
    Django中的跨表查询,多表查询。
    Django中的ORM介绍,字段以及字段的参数。
    9.2安全的 Web API 与 Web API 2.2 个人帐户
    9.1WebApi的身份验证和授权
    3.1创建项目
    2.4使用属性在 ASP.NET Web API 2 路由创建一个 REST API
    2.3属性在 ASP.NET Web API 2 路由
  • 原文地址:https://www.cnblogs.com/xx0405/p/5077121.html
Copyright © 2011-2022 走看看