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 DOM树。

遍历XML文档的方式同HTML文档一样,也可以使用.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()方法就会利用 它查找加载文档的匹配部分。最终,只有匹配的部分才会被插入到页面中。

相关推荐
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页