【译】jquery基础教程（jquery fundamentals）——(第七部分)Jquery Ajax

 

Jquery 基础教程

                                           作者Rebecca Murphey

                                           原文链接地址http://jqfundamentals.com/

With contributions by James Padolsey, Paul Irish, and others. See the GitHub repository for a complete history of contributions.

Copyright © 2011 

 

 

Jquery  Ajax

一、概述

    XMLHttpRequest方法允许浏览器和服务器进行交流，而无需通过整个页面的重载。这种方法就是大家熟知的Ajax（Asynchronous Javascript and XML），它提供了丰富的用户交互体验的web页面。

    Ajax请求通过javascript代码来触发；你打代码给一个URL地址发送一个请求，然后当它接收到了一个响应之后，一个回调函数就会被触发来处理这个请求。由于请求时异步的，所以当请求被处理的时候，你的其余的代码仍然在继续执行，这个时候，被用来处理响应的回调函数就显的很重要了。

    jquery提供了ajax的支持，它抽象了很多方法来处理浏览器不同的问题。它同时提供了一个包含全部特新的方法$.ajax和一些便捷打简单方法，例如$.get(),$.getScript(),$.getJSON,$.post(),和$().load().

    尽管名字为ajax，可 大多数的jquery应用并没有用到XML；相反，它们通过普通的HTML或者JSON（JAvascript Object Notation）来传递数据。

     通常来说，ajax并不支持跨域的工作。例外的是，提供了JSONP（JSON with Padding）支持，它允许有限制的跨域特性。

二、关键概念

     为了更好的使用jquery中ajax相关的方法，首先需要了解一些关键的概念。

• Get和Post

     Get和Post是两个用来给服务器发送请求常用的方法。了解每个方法合适的应用场合是很重要的。

     Get方法一般用于无损的操作——也就是说你仅仅是从服务器获得数据，而不是改变服务器上的数据。例如，一个搜索服务的查询就是一个Get请求。Get请求可以被浏览器缓存，所以如果你不知道它的特性就会出现一个出乎意料的事情。Get请求一般通过一个查询字符串来发送所有数据。

     Post一般用于有损操作——也就是说你改变服务器上的数据的操作。例如，一个用户保存博客的随笔就是一个Post请求。Post请求一般不被浏览器缓存；查询字符串可以是URL的一部分，不过数据一般作为post数据来发送。

• 数据类型

    jquery一般需要一些指令作为你从一个ajax请求获得的数据的类型；在某些情况下，数据类型时候方法的名字规定的，在另一些情况下，它通过配置对象的一部分来规定。下面是一些具体的细节：

text

    用来传输简单的字符串

html

    用来传输html语句块，并放到页面上

script

    给页面添加一些新的script

json

    用来传输json形式的数据，他可以包含字符串，数组，对象类型。

注解：

在jquery1.4中，如果你的服务器返回json形式的数据有误，请求就会失败。可以访问http://json.org来了解正确的json形式的数据，但通常来讲，还是应该在服务器上用语言内建的方法来生成json以避免语法错误。

jsonp

   用来从另一个应用程序域传输数据。

xml

   用定制的xml格式传输数据

 

   我在大多数的情况先是用json格式传输数据的拥护者，因为它的灵活性很棒。尤其是在同时传送html和数据的时候。

• A代表异步

     ajax中的异步是许多jquery的新用户放松了警惕。因为ajax调用默认是异步的，响应并不会立即生效。响应只能通过一个回调函数来进行处理。所以例如下面的代码就不会工作：

var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!

     同时，也需要向我们的回调函数传递一个请求；这个回调函数会在请求成功后执行，在那是，我们才能够访问它返回的值。

$.get('foo.php', function(response) { console.log(response); });

• 相同原点策略和jsonp（Same-Origin Policy and JSONP）

    通常来讲，ajax请求被限定到了和页面请求相同的协议（http或者https），相同的端口，相同的域 。这种限制对通过jquery的ajax方法加载的脚本没有作用。

    另一个例外是面向在jsonp服务的另一个域的请求。在jsonp中，服务的提供者允许回应你通过<script>脚本加载到页面中的请求，通过这种方法来规避相同原点策略；那个脚本会包含你所请求的并且包裹在你提供的回调函数中的数据，

• ajax和Firebug

    firebug对于开发ajax请求非常重要。在ajax请求发生的时候，你可以在Firebug  的Console栏中

看到它们，你可以点击一个请求展开它，看一看它的细节，例如请求头，响应头，响应内容，还有更多。如果ajax请求没有达到你的预期效果，这你第一个应该追踪的地方，来查找那里出错了。

三、jquery的ajax相关方法

    虽然jquery提供了许多方便的ajax相关的方法，但是核心的$.ajax方法总体来说是最重要的，所要对于它的掌握是非常必要的。我们先回顾下这个方法，然后对其他的方法做个简略的描述。

     我大多的时候都在用$.ajax方法，而不是用那些小方法。就像你看到的那样，它提供了很多那些小方法所不具有的特性，同时我觉着它的语法也易于理解。

    $.ajax

  jquery的核心$.ajax方法是一个强大和直接的创建ajax请求的方法。它接收一个包含所有jquery需要完成请求的说明信息的对象。$.ajax一般情况下都是有值得，因为它在回调成功或者失败的都会给出确认的。同时，它接收能够被单独定义的配置对象的特性，也为代码重用提供了很好的基础。想要进一步的来了解配置信息，请访问http://api.jquery.com/jQuery.ajax/.

     例7.1：核心$.ajax的运用

$.ajax({
    // the URL for the request
    url : 'post.php',

    // the data to send
    // (will be converted to a query string)
    data : { id : 123 },

    // whether this is a POST or GET request
    type : 'GET',

    // the type of data we expect back
    dataType : 'json',

    // code to run if the request succeeds;
    // the response is passed to the function
    success : function(json) {
        $('<h1/>').text(json.title).appendTo('body');
        $('<div class="content"/>')
            .html(json.html).appendTo('body');
    },

    // code to run if the request fails;
    // the raw request and status codes are
    // passed to the function
    error : function(xhr, status) {
        alert('Sorry, there was a problem!');
    },

    // code to run regardless of success or failure
    complete : function(xhr, status) {
        alert('The request is complete!');
    }
});

注解：

关于数据类型设置的记录：如果服务器返回的数据形式与你所期望的不同，你的代码就会失败，而原因有时候会令人很费解，因为http响应代码并不会报错。当你进行ajax请求工作的时候，一定要确保你的服务器会返回你所期望的值，并且确定Content—type头对于数据类型是精确的。例如，对于json数据，Content-type头是application/json。

   $.ajax 的可选项

     对于$.ajax方法有许多的可选项，这就是它的强大之处。想要获得一个完全的可选项列表，请访问http://api.jquery.com/jQuery.ajax/;下面是几个常用的：

  async

    如果请求时同步发出的把它设置为false.默认情况下市true。注意，如果你把这个选项设置为false，你的请求会阻塞其他代码的执行，直到响应返回被接受。

cache

     在允许的情况下确定是否用被缓存的响应。默认情况下对于除了“script”和“jsonp”之外的所有的其他数据类型是true，当被设置为false的时候，url会有个简单的缓存附加到它的上面。

complete

    无论成功还是失败，当请求结束的时候回调函数开始运行。这个函数接收未加工的请求对象和请求的文本状态。

context

     在回调函数运行的域内（也即是当this指的时候函数回调函数内部的时候）。默认情况下，回调函数内部的this指向最初传递给$.ajax的对象。

data

    即将被传递到服务器的数据。它既可以是一个对象也可以是一个查询字符串。例如foo=bar&baz=bim

dataType

    你期望从服务器返回的数据类型。默认情况下，如果dataType没有被指定，jquery会参照响应的MIME类型。

error

    如果请求结果是一个错误，回调函数就会执行。这个函数接收未加工的请求对象和请求的文本状态。

jsonp

     当你进行一个jsonp请求的时候，回调函数的名字被包装到一个查询字符串中进行传送。默认是“callback”。

success

   如果请求成功了，回调函数就会执行。这个函数接收响应数据（如果数据类型是json，则把它强制转换成一个javascript对象），同时也接受请求的文本状态和未加工的请求对象。

timeout

     在认为请求失败之前所等待的时间的毫秒表示形式。
traditional

    在使用的jquery1.4版本之前，将它设置为true来使用参数的序列化。细节请看：http://api.jquery.com/jQuery.param/.

type

     请求的类型，“post”或者“get”。默认是“get”。其他请求类型，例如“put”和“delete”也可以。但是并不是所有浏览器都支持它们。

url

    请求的url

     url这个选项是唯一一个在$.ajax配置对象中的必须属性；其他的都是可选的。

便利的小方法

     如果你不喜欢用可配置的$.ajax,也大可不必担心，jquery提供的ajax便利小方法在实现ajax请求的时候也是一个利器。这些方法围绕个核心的$.ajax方法来实现的，并且简单的设置了一下$.ajax方法的可选项。

如下：

$.get

      提供一个Get请求给提供的url

$.post

    提供一个POST请求给提供的url

$.getScript

   给页面添加一段脚本

$.getJSON

   提供一个GET请求，并期望返回一个json类型的数据。

 

   在每种情况下，方法都会接受如下参数：

  URL 

          请求的URL地址——必须的

Data

         传递给服务器的数据——可选。它既可以是一个对象也可以是一个查询字符串。例如foo=bar&baz=bim。

注解：

这个选项不适用与$.geScirpt.

success callback

     如果请求成功了发生的回调函数——可选。这个函数接收响应数据（如果数据类型是json，则把它强制转换成一个javascript对象），同时也接受请求的文本状态和未加工的请求对象。

datatype

     你希望从服务器返回数据的类型——可以选。

注解：

这个选项只适用于那些从名字上无法确认数据类型的方法。

例7.2：用小方法的jquery的ajax

// get plain text or html
$.get('/users.php', { userId : 1234 }, function(resp) {
    console.log(resp);
});

// add a script to the page, then run a function defined in it
$.getScript('/static/js/myScript.js', function() {
    functionFromMyScript();
});

// get JSON-formatted data from the server
$.getJSON('/details.php', function(resp) {
    $.each(resp, function(k, v) {
        console.log(k + ' : ' + v);
    });
});

 

$.fn.load

   $.fn.load 方法在jquery的ajax方法中是独一无二的——它被一个选择结果来调用。$.fn.load方法从一个url获得html，然后用得到的html来构建被选中的元素。除了提供一个url给方法外，你也可以选择性的提供一个选择器；jqueyr会从返回的html中寻找匹配的的内容。

例7.3：用$.fn.load构建元素

$('#newContent').load('/foo.html');

例7.4：用$.fn.load 构建基于选择器的元素

$('#newContent').load('/foo.html #myDiv h1:first', function(html) {
  alert('Content updated!');
});

四、ajax和表单

     在处理表单问题的时候，jquery的ajax能力得到了很好的发挥。jquery表单插件（jQuery Form Plugin）对于给表单添加ajax能力有很好的支持，所以你应该尽可能的用这个插件而不是去重复的造轮子。但是简单的两个jquery方法你还是应该掌握的：$.fn.serialize和$.fn.serializeArray

例7.5：将数据转换成一个查询字符串

$('#myForm').serialize();

例7.6：创建一个对象数组来包含表单数据

$('#myForm').serializeArray();

// creates a structure like this:
[
    { name : 'field1', value : 123 },
    { name : 'field2', value : 'hello world' }
]

五、运用jsonp

    jsonp的出现——本质上是一个相关了解的夸张脚本黑客——为强有力的内容传输提供了支持。许多知名的网站都提供jsonp服务，允许你通过一个api来访问它们的内容。Yahoo! Query 是一个广受欢迎的jsonp形式数据的代码，下面例子我们就会用它来获得关于猫的新闻。

里7.7：运用YQL和JSONP

$.ajax({
    url : 'http://query.yahooapis.com/v1/public/yql',

    // the name of the callback parameter,
    // as specified by the YQL service
    jsonp : 'callback',

    // tell jQuery we're expecting JSONP
    dataType : 'jsonp',

    // tell YQL what we want and that we want JSON
    data : {
        q : 'select title,abstract,url from search.news where query="cat"',
        format : 'json'
    },

    // work with the response
    success : function(response) {
        console.log(response);
    }
});

    jquery在幕后处理是jsonp的所有复杂操作——我们需要做的就是告诉jquery被YQL确定参数的jsonp回调函数的名字，因而整个过程开起来就像一个普通的ajax请求一样。

六、ajax事件

    无论一个ajax请求的开始还是结束，我们经常会想要执行一个特定的操作，例如展示或者隐藏一个登录指示器。这个时候，你可以绑定一个ajax事件到元素上，就像绑定其他事件一样，而不是为每个ajax请求内部定义一个行为。想要进一步了解ajax事件，请访问：http://docs.jquery.com/Ajax_Events.

例7.8：用ajax事件启动一个登录指示器。

$('#loading_indicator')
    .ajaxStart(function() { $(this).show(); })
    .ajaxStop(function() { $(this).hide(); });

七、练习

   (略)