jQuery——通过Ajax发送数据

Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)，一个Ajax解决方案涉及如下技术：

1. JavaScript：处理与用户及其他浏览器相关事件的交互，解释来自服务器的数据，并将其呈现在页面上。
2. XMLHttpRequest：这个对象可以在不中断其他浏览器任务的情况下向服务器发送请求。
3. 文本文件：服务器提供的XML、HTML或JSON格式的文本数据。

---

###基于请求加载数据

Ajax是一种无需刷新页面即可从服务器（或客户端）上加载数据的手段。

Ajax应用程序通常只不过是一个针对HTML代码块的请求。

####操作JavaScript对象

（1）取得JSON

JavaScript对象是由一些“键-值”对组成的，而且还可以方便地使用花括号（{}）来定义。另一方面，JavaScript的数组则可以使用方括号（[]）和隐式声明的逐渐递增的键进行动态定义。

JSON（JavaScript Object Notation,JavaScript对象表示法），通过这种表示法能够方便地取代数据量庞大的XML格式：

{
  "key":"value",
  "key 2": [
      "array",
      "of",
      "items"
           ]
}

在对象字面量和数组字面量的基础上，JSON格式的语法具有很强的表达能力，但对其中的值也有一定的限制。如，JSON规定所有对象键以及所有字符串值，都必须包含在双引号中。而且，函数也不是有效的JSON值，所以开发人员最好不要手工编辑JSON，而应该用服务器端语言来生成。

要取得JSON中的数据，可以使用.getJSON()方法，这个方法会在取得相应文件后对文件进行处理。在数据从服务器返回后偶，它只是一个简单的JSON格式的文本字符串。$.getJSON()方法会解析这个字符串，并将处理得到的JavaScript对象提供给调用代码。

（2）使用全局jQuery函数

.getJSON()是作为全局jQuery对象（由jQuery库定义的jQuery或$对象）的方法定义的，也就是说，它不是个别jQuery对象实例（即通过$()函数创建的对象）的方法。

.getJSON()函数可以接受2个参数，这个参数是当加载完成时调用的函数。

Ajax请求都是异步的，回调函数提供了一种等待数据返回的方式，而不是立即执行代码。回调函数也需要一个参数，该参数中保存着返回的数据。

（3）执行脚本

有时候，在页面初次加载时就取得所需的全部JavaScript也是没有必要的。具体需要取得哪个脚本，要视用户的操作而定。虽然可以在需要时动态地引入script标签，但注入所需代码的更优雅的方式则是通过jQuery直接加载.js文件。

向页面中注入脚本与加载HTML片段一样简单。但需要使用全局函数$.getScript，这个全局函数与它的同辈函数类似，接受一个URL参数以查找脚本文件。

####加载XML文档

通过$.get()函数加载XML文档，通常这个函数只是取得由URL指定的文件，然后将纯文本格式的数据提供给回调函数。但是，在根据服务器提供的MIME类型知道响应的是XML的情况下，提供给回调函数的将是XML ＤＯＭ树。

遍历ＸＭＬ文档的方式同ＨＴＭＬ文档一样，也可以使用．find()、.filter()及其他遍历方法。

---

###向服务器传递数据

Ajax的价值只有当服务器能够基于浏览器的输入动态 形成数据时才能得到充分体现。

####执行GET请求

$.get()函数的对象来构建查询查询字符串。

####执行POST请求

使用POST方法与使用GET方法的HTTP请求你几乎都是一样的。从视觉上来看，它们之间一个最大的区别就是GET请求把参数放在URL一部分的查询字符串中，而POST请求则不是。

####序列化表单

.serialize()方法，这个方法作用于一个jQuery对象，将匹配的DOM元素转换成能够随Ajax请求传递的查询字符串。

---

###为Ajax请求提供不同的内容

为了给没有JavaScript用户提供更好地体验，可以有条件的加载包含html、head和body以及其他所有内容的完整的页面。为此，就要利用jQuery随同Ajax请求一起发送的请求头部。

---

###关注请求

jQuery提供了一组函数，通过它们能够为各种为Ajax相关的事件注册回调函数。

其中，.ajaxStart()和.ajaxStop()可以把它们添加给任何jQuery对象。当Ajax请求开始且尚未进行其他传输时，会触发.ajaxStart()的回调函数。相反，当最后一次活动请求终止时，则会执行通过.ajaxStop()注册的回调函数。

.ajaxError()，会向它们的回调函数发送一个队XMLHttpRequest对象的引用。这样就可以做到区别不同的请求来提供不同的行为。

---

###错误处理

.status属性中包含着服务器返回的状态码，这些代码由HTTP规范定义，当触发.fail()处理程序时，可以根据表解读错误。

400——————请求语法错误

401——————未授权

403——————禁止访问

404——————未发现请求的URL

500——————服务器内部错误

---

###安全限制

使用iframe这个标签来加载远程数据，可以为iframe元素指定任何URL作为其获取数据的来源，包括与提供页面的服务器不匹配的URL。因此，第三方服务器上的数据能够轻易地加载到iframe中，并在当前页面上显示出来。然而，要操作iframe中的数据，仍然存在同使用script标签时一样的协作需求；位于iframe中的脚本需要明确地向父文档中的对象提供数据。

####使用JSONP加载远程数据

使用script标签从远程获取JavaScript文件的思路，可以变通为从其他服务器取得JSON文件。

JSONP的格式是把标准JSON文件包装在一对圆括号中，圆括号又前置一个任意字符串。这个字符串，即所谓的P（Padding,填充），由请求数据的客户端来决定。

而且，由于有一对圆括号，因此返回的数据在客户端可能会导致一次函数调用，或者是为某个变量赋值——取决于客户端请求中发送的填充字符串。

---

###其他工具

####Ajax方法

使用低级的$.ajax()函数时，可以获得下列特殊的好处：

避免浏览器缓存来自服务器的响应。非常适合服务器动态生成数据的情况。

抑制正常情况下所有Ajax交互都可以触发的全局处理程序（例如$.ajaxStart()注册的处理程序）。

在远程主机需要认证的情况下，可以提供用户名和密码。

####修改默认选项

使用$.ajaxSetup()函数可以修改调用Ajax方法时每个选项的默认值。这个函数与$.ajax()接受相同的选项对象参数，之后的所有Ajax请求都将使用传递给该函数的选项——除非明确覆盖。

####部分加载HTML页面

要去掉页面中多余的内容，可以利用.load()的一些新特性——在指定要加载文档的URL时，也可以提供一个jQuery选择符表达式。如果指定了这个表达式，.load()方法就会利用 它查找加载文档的匹配部分。最终，只有匹配的部分才会被插入到页面中。