第六章 ajax

  ajax应用程序通常只不过是一个针对HTML的代码块请求。这种被称作AHAH(asynchronous HTTP and HTML,异步HTTP和HTML)的技术,通过jQuery来实现。

  所有的Ajax请求在默认情况下都是异步的。

  对于必须要延迟到加载完成才能继续的操作,jQuery提供了一个回调函数没通过回调函数可以再某些效果完成之后执行操作。Ajax回调的功能与此类似,只不过是在数据从服务器返回后执行操作。

  1、追加HTML

  2、操作javascript

  取得JSON

  前面我们曾经看到过,JavaScript对象是有一些“键-值”对组成的,而且还可以方便的使用花括号{}来定义。另一方面,JavaScript的数组则可以使用方括号【】和饮食声明的

逐渐递增的键进行动态定义。将这两种语法组合起来,可以轻松的表达复杂而且庞大的数据结构。

  Douglas Crockford为了这种简单的语法起了一个名字,叫做JSON(javascript object notation ,javascript对象表示法)。通过这种表示方法能够方便的取代数据量庞大的XML格式:

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

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

  要取得这些数据,可以使用$.getJSON()方法。这个方法会在取得相应文件后对文件进行处理,会解析这个字符串,并将处理得到的JavaScript对象提供给调用代码。

  使用全局jQuery函数

  到目前为止,我们使用的多有jquery方法都需要通过$()函数构建一个jQuery对象进行调用。通过选择符表达式,我们可以指定一组要操作的DOM记额点,然而再用这些jQuery方法以某种方式对他们进行操作。$.getJSON()函数却不一样。从逻辑上说,没有该方法适用的DOM元素;座位结果的对象只能提供给脚本,而不能插入到页面中。为此,gerJSON()是作为全局jQuery对象(有jQuery库定义的jQuery活$对象)的方法定义的,也就是说,他不是个别jQuery对象实例(即通过$()函数创建的对象)的方法。

  如果javascript中有类似其他面向对象语言中的类,那我们可以把$.getJSOn()称为类似方法。为了便于理解,我们在这里称其为全局函数;实际上为了不与其他函数名称发生冲突,这些全局函数使用的是jQuery命名空间。

  $.getJSON()函可以接受第二个参数,这个参数是当家在完成时调用的函数。如上所述,Ajax请求的都是异步的,回调函数提供了一种等待数据返回的方式,而不是立刻执行代码。回调函数也需要一个参数,改参数中保存着返回的数据。

$.getJSON(‘b.json‘,function(data))

可以通过data变量来遍历JSON数据结构了。具体来说 需要迭代顶级数组,为每个项构建相应的HTML代码。虽然可以再这里使用标准的for循环,但是我们需要借此机会介绍jQuery的另一个实用全局函数$.each()。对应方法是.each()。$.each()函数不操作jQuery对象,它以数组或者对象作为第一个参数,以回调函数作为第二个参数。此外,还需要将每次循环中数组或对象的当前索引和当前项座位回调函数的两个参数。

关于加粗位置,需要仔细阅读,数组或对象作为第一参数(data),以回调函数作为第二个参数 function(entryIndex,entry){}entry是创建div的className//有点不太懂这块。注意下面这段话

  这里通过$.each()函数一次遍历每个项,使用entry对象的内容构建起HTML代码结构。构建好HTML之后,通过.html()把他插入到<div>中替换以前的内容。

通过这段话将其理解为。entry是要创建的对象,并且看为数据库输入的对象。

  尽管JSON格式很简洁,但他却不容许任何错误。包括方括号、花括号、引号和逗号都必须合理且正确的使用,否则文件不会加载。并且在多数浏览器中,当文件加载失败时我们看不到任何错误信息;脚本知识静默的彻底终止运转。

  3、执行脚本

  虽然可以在需要时动态的引入<script>标签,但诸如需要代码的更优雅的方式则是通过jQuery直接加载.js文件。

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

$.getScript(‘c.js);

  以这种方式取得的脚本在当前页面的全局环境下执行。这意味着脚本有权访问在全局环境中定义的函数和变量,当然也包括jQuery自身。

这里先中断一下,要了解学习一下XML。

时间: 2024-11-10 07:04:27

第六章 ajax的相关文章

锋利jQuery 学习整理之 第六章 jQuery 与Ajax 的应用

1.Ajax 的XMLHttpRequest 对象 XMLHttpRequest 是Ajax 的核心,它是Ajax 实现的关键---发送异步请求.接受响应及执行回调都是通过它来完成的.XMLHttpRequest最早是在Microsoft Internet Explorer  5.0  ActiveX 组件中被引用的. 2.JQuery 中的Ajax jQuery 对Ajax 进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第二层是load().$.load()和$.post(

Ajax本地跨域问题 Cross origin requests are only supported for HTTP(针对jQuery基础教程第四版第六章)

出现的问题: 解决的步骤: 谷歌浏览器出现的效果: 针对jQuery基础教程(第四版),第六章  成功: 原文地址:https://www.cnblogs.com/qinghui258/p/8432569.html

增长黑客内容摘要(四五六章)

增长黑客内容摘要(四五六章) 一.第四章 4.1 职场社交巨头的用户激活秘诀 用户的数量与结成的关系网络深度直接决定了其价值的大小. 策略:1.新册用户到达“邀请好友”页面时,如果系统默认建议用户邀请的朋友数量少于4人,则他们很可能会轻易地忽略这一步骤:如果多于4人,则可能会让用户感到焦虑和麻烦:而不偏不倚刚好4人,能实现最大程度的邀请转化率.2.新注册用户源源不断地带来更多用户,同时老用户也会时不时回来看看,处理请求,或者主动发起好友邀请. 4.2 A/B测试,网站活跃率提升的法宝 备选方案模

数据库系统实现 第六章 查询执行

第六章 查询执行 查询执行也就是操作数据库的算法 一次查询的过程: 查询-->查询编译(第七章)-->查询执行(第六章)-->数据 查询编译预览 查询编译可以分为三个步骤: a)分析:构造分析树,用来表达查询和它的结构 b)查询重写,分析树被转化为初始查询计划,通常是代数表达式,之后初始的查询计划会被优化为一个时间更小的计划 c)物理计划生成,将查询计划转化成物理的计划, 为了选择更好的查询计划,需要判断 1)查询哪一个代数的等价形式是最有效的 2)对选中形式的每一个操作,所使用的算法选

第六章:异常机制

第六章:异常机制 异常的定义 异常:在程序运行过程中出现的意外事件,导致程序中断执行. 异常处理 try...catch 语法:try{ //可能出现异常的代码}catch(异常类型 异常对象名){ //处理异常的代码:}执行过程:当try中的代码异常发生时抛出一个异常对象,该异常对象与catch中异常类型进行匹配,匹配成功进入catch块,否则不执行catch中代码(相当于异常未被处理).程序只有当异常处理成功后才能继续执行. try...catch...catch 语法:try{ //可能出

2017上半年软考 第六章 重要知识点

第六章 项目整体管理 []项目整体管理概述 [][]项目整体管理的含义.作用和过程 项目整体管理6个过程?p264 项目整体管理包括什么? 项目管理的核心是什么? 项目整体管理涉及哪几个方面?p265 [][]项目经理是整合者 项目经理作为整合者要做什么?p265 [][]整体管理的地位 []项目整体管理实现过程 [][]制定项目章程概述 项目章程的意义是什么? 项目章程包括什么? [][]制定项目章程 项目章程的作用? 项目章程的输入? 制定项目章程的工具和技术?p267 项目章程的输出?p2

ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第六章:管理产品图片:多对多关系(上)

这章介绍了怎样创建一个新的实体来管理图片,怎样使用HTML窗体来上传图片文件和使用多对多关系来使它们与产品相关,并且怎样来保存图片到文件系统中.这章也介绍了更多复杂的错误处理增加客户端错误到模型中为了把它们显示回给用户.在这章中播种数据库使用的产品图片可能在在第六章的从Apress网页站点下载代码中. 注意:如果你想遵从这章的代码,你必须完成第五章的代码或者从www.apress.com下载第五章的源代码作为一个起点. 创建实体保存图片文件名 这个项目,我们正要使用文件系统在Web项目中存储图片

Linux与云计算——第二阶段Linux服务器架设 第六章:目录Directory服务器架设—FreeIPA

Linux与云计算--第二阶段Linux服务器架设 第六章:目录Directory服务器架设-FreeIPA 1 FreeIPA 配置FreeIPA服务器 Configure IPA Server to share users' account in your local network. [1] Install FreeIPA. [[email protected] ~]# yum -y install ipa-server ipa-server-dns bind bind-dyndb-lda

APUE读书笔记-第六章 系统数据文件和信息

昨天看完了,今天来看看第六章.感觉第六章的内容不是非常重要.简单看看吧 6.2 口令文件 口令文件其实就是/etc文件夹下的passwd文件,但处于安全性的考虑,我们无法直接读取它.就是通过直接限制权限的方式对其进行保护,passwd文件具体权限如下: -rw-r--r-- 1 root root 可以看到只有root用户具有读写权限,与root同组的用户与其他用户仅具有读权限. 不过为了解决以上问题,Linux中给出了一系列数据结构与函数帮助我们操纵口令文件,首先是关键数据结构,定义位于/in