zoukankan      html  css  js  c++  java
  • 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()方法就会利用 它查找加载文档的匹配部分。最终,只有匹配的部分才会被插入到页面中。

  • 相关阅读:
    线程池的实现原理
    log4j 具体解说(不能再具体了)
    MyEclipse中背景颜色的设定
    cacheManager载入问题
    SAP 经常使用T-CODE
    Oracle 版本号说明
    用XMPP实现完整Android聊天项目
    选择如何的系统更能适合App软件开发人员?
    爱国者布局智能硬件,空探系列PM2.5检測仪“嗅霾狗”大曝光
    Innodb引擎状态查看
  • 原文地址:https://www.cnblogs.com/aixing/p/13327768.html
Copyright © 2011-2022 走看看