锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / JQuery / 基于请求加载数据
服务方向
人工智能数据处理
人工智能培训
kaldi数据准备
小语种语音识别
语音识别标注
语音识别系统
语音识别转文字
kaldi开发技术服务
软件开发
运动控制卡上位机
机械加工软件
软件开发培训
Java 安卓移动开发
VC++
C#软件
汇编和破解
驱动开发
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883
微信:ryysoft

基于请求加载数据


Ajax只是一种无需刷新页面即可从服务器(或客户端)上加载数据的手段。这些数据的格式可以是很多种,而且,当数据到达时也有很多处理它们的方法可供选择。

假设我们要创建一个页面,用以显示字典中的词条,词条按照英文首字母分组。那么,定义 页面内容区的HTML代码可以像这下面这样:

<div id="dictionary">
</div>

不刷新页面而从服务器加载数据;

1.通过JavaScript在浏览器中向服务器发送数据;

2.在客户端使用HTML、XML和JSON等数据;

3.向用户反馈Ajax请求的状态。


下载代码示例

因为需要一种触发加载过程的方式,所以我们添加了几个调用事件处理程序的按钮:

<div class="letters">
<div class="letter" id="letter-a">
<h3><a href="entries-a.htmlM>A</a></h3>
</div>
<div class="letter" id="letter-b">
<h3><a href="entries-a.html">B</a></h3>
</div>
<div class="letter" id="letter-c">
<h3><a href="entries-a.html">C</a></h3>
</div>
<div class="letter" id="letter-d">
<h3><a href="entries-a.html">D</a></h3>
</div>
<!-- and so on -->
</div>

这些简单的链接可以把我们引导到包含字母对应的字典条目的页面。我们将根据渐进增强的原则,让这些链接在不重新加载整个页面的前提下更新页面。
再添加一些CSS规则,就得到了如图所示的页面。


字典条目


追加HTML


AJAX应用程序通常只不过是一个针对HTML代码块的请求。这种被称作AHAH(Asynchronous HTTP and HTML,异步HTTP和HTML)的技术,通过JQuery来实现只是小菜一碟。首先,需要一些供插入用的HTML,我们把这些HTML放在与主文档位于同一目录下的a.html文件中。

操作JavaScript对象


通过请求获取充分格式化的HTML虽然很方便,但这也意味着必须在传输文本内容的同时也传输很多HTML标签。有时候,我们希望能够尽量少传输一些数据,然后马上处理这些数据。在这种情况,我们希望取得能够通过JavaScript进行遍历的数据结构。

使用JQuery的选择符可以遍历和操作取得的HTML结构,但是还有一种JavaScript内置的数据格式,既能减少数据传输,也会减少编码量。

取得JSON

前面我们看到过,JavaScript对象是由一些“键-值”对组成的,而且还可以方便地使用花括号({ })来定义。另一方面,JavaScript的数据则可以使用方括号(【】)和隐式声明的逐渐递增的键进行动态定义。将这两种语法组合起来,可以轻松地表达复杂而庞大的数据结构。

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

{

"key":"value",

"key2":{

"array",

"of",

"items"

}

}

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

全局JQuery函数

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

如果JavaScript中有类似其他面向对象语言中的类,那我们可以把$.getJSON()称为类方法。

为了便于理解,我们在这里称其为全局函数;实际上,为了不与其他函数名称发生冲突,这些全局函数使用的是JQuery命名空间。

执行脚本

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

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

友情链接
版权所有 Copyright(c)2004-2024 锐英源软件
统一社会信用代码:91410105098562502G 豫ICP备08007559号 最佳分辨率 1440*900
地址:郑州市金水区文化路97号郑州大学北区院内南门附近