4.3.2 用jQuery进行异步加载(1)
4.3.2 用jQuery进行异步加载(1)
综合评级:
想读(1) 在读(1) 已读(8) 品书斋鉴(0) 已有10人发表书评
《Ajax实战:实例详解》第4章Ajax开源工具集,讨论支持Ajax的JavaScript库并进一步讲解Prototype、Dojo工具箱、jQuery和DWR库,另外特别介绍了它们给Ajax带来的变化。本小节为大家介绍的是用jQuery进行异步加载。
AD: 2013大数据全球技术峰会低价抢票中
4.3.2 用jQuery进行异步加载(1)
jQuery提供了不少方法来发送Ajax请求。有些是简单且实用的高层方法,用于初始化Ajax请求,并执行大多数一般的请求任务。其他一些方法是底层的,它们提供了对Ajax请求各方面的控制。
在本节的解决方案中,我们将使用具有代表性的一些方法。首先来处理最普遍的Ajax交互:从服务器获得动态内容。
1.问题
让我们来想象一个电子冰箱--一个假想的高科技电冰箱,它不仅可以保存食品,而且还提供一个网络接口能够让软件用来与其通信和交互。
电子冰箱用来记录其存货的虚拟技术并不重要。它可以是条形码扫描,RFID(无线电频率识别)标签,或者是其他虚构的技术。作为网页的作者,关心的是拥有一个服务器组件,能够让我们发出请求来获得食物状态的信息。
网页的焦点将是呈现电子冰箱中的食物列表。通过点击列表中的某一个食物,可以显示出更加详细的信息。
针对这个问题,我们将假设网页已经预先载入了食物的列表,它是通过某一种服务器端模板机制生成的。在下一节中,我们将看到一种从服务器动态获取列表的技术。
2.解决方案
一开始,为了在页面中使用jQuery,就必须导入jQuery库:
假设已经由服务器端机制生成了电子冰箱内的食物,并在一个select元素中陈列出来:
为了达到本示例的目的,我们仅列出8个食物。一般的冰箱通常会包含更多的食物,但是,我们都知道速食主义者的冰箱内的食物总是很稀少的。
服务器(或许可以叫做"电子冰箱驱动")分配给食物一个标识号,它被用来唯一标识每个食物。在这里,简单地用一个连续整型值。这个标识值将被设置为每个<options>的value,用来标明食物。
虽然我们知道需要select控件对用户的输入做出反应,但可以注意到,在创建<select>元素标记中并没有声明任何处理函数。这就需要提出jQuery设计背后的另一个体系。
jQuery的一个目标是让网页作者能够轻松地把脚本从文档标记中分离出来,这和CSS允许我们把表现从文档标记中分离出来的方法很像。诚然,我们可以不用jQuery来做到这些事,毕竟jQuery是用JavaScript编写的,而且不是所有无法做到的事它都去帮我们做了。但是,它还是为我们做了不少事,并且以轻松地从文档标记中分离脚本为目标来设计。所以,与其直接在<select>元素标记上增加一个onchange事件处理,还不如用借助jQuery的帮助,在脚本控制下增加这个事件处理。
在文档就绪前,我们无法操作页面上的DOM元素,所以在页面首部的<script>元素中,我们将用一个之前讨论过的jQuery ready()处理函数。在这个处理函数内,我们将用jQuery的方法来给元素增加一个change事件处理。请看下面的代码片段:
在ready()处理函数内,我们通过传递itemsControl这个id创建了一个封装了<select>元素的jQuery实例。之后,用了jQuery的change()方法,它把自己的参数分配给封装的元素,作为它的change事件处理。
这里,我们已经声明了一个showItemInfo()函数。其中,我们将为列表中选中的食物创建Ajax请求。
jQuery提供大量不同的方法来向服务器发送Ajax请求。这个解决方案的目的是希望从服务器得到一个预先格式化好的HTML片段(包含了食物的数据)。并且把它加载到一个元素中,即一个id是itemData的<div>元素。jQuery的load() 方法可以完美地达到这个要求。
4.3.2 用jQuery进行异步加载(1)相关推荐
- 4.3.2 用jQuery进行异步加载(2)
4.3.2 用jQuery进行异步加载(2) 2008-09-28 16:09 (英)格雷恩(Granc,D.)等著/贺师俊等译 人民邮电出版社 我要评论(5) 字号:T | T 综合评级: 想读(1 ...
- Jquery Ztree异步加载树
1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...
- JQuery,ajax异步加载selectoption/option/select多选框:
摘要:最近项目中用到了jquery,ajax,由于很长时间没用了,所以这次做花了很多时间,现在记录一下,方便以后回忆: 一:js文件: <script type="text/javas ...
- Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
- 基于jQuery的图片异步加载和预加载实例
如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...
- 【JQuery】初始化页面当异步加载时构建页面元素的顺序
今日帮同事看JQuery页面初始化的一个问题时,由于自己没怎么了解过JQuery,所以遇到了一点小麻烦,实现的效果就是初始化页面时,默认选中页面里某表格数据集的某行数据,这种问题,在Java\Delp ...
- jQuery.treetable使用及异步加载
Usage 1 GitHub 地址 https://github.com/ludo/jquery-treetable/ 2 API 地址 http://ludo.cubicphuse.nl/jquer ...
- echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...
- jq异步实现ajax,用jQuery的AJax实现异步访问、异步加载
本篇文章实现了用jQuery的AJax实现异步访问和异步加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. [异步访问] 用一个例子用以说明:点击按钮,将input内用户输入的数据发送给服务端, ...
最新文章
- 英特尔 QLC 3D NAND 数据存储
- ASP.NET 验证控件
- 只允许指定IP远程桌面连接_使用IP安全策略
- c语言程序填空打印出1 1000,计算机应用类专业综合复习试题(一)
- word python 域 操作_python实现在windows下操作word的方法
- CV之FR:计算机视觉之人脸识别(Face Recognition)方向的简介、使用方法、案例应用之详细攻略
- dedecms5.7 联动类型无法显示
- Linux复位usb hub,Linux USB subsystem --- USB Hub initialize
- 牛客网--19校招--俄罗斯方块
- 什么是ip地址、子网掩码、网关和DNS?
- python物理模拟_在Python游戏中模拟重力【Programming(Python)】
- android 开发问题----avd按钮无法按
- nginx 正向代理
- 监控领域蓝海:运维服务 我们玩的是创新
- vivado linux使用教程,Vivado2017.4下载|Xilinx Vivado 2017.4 最新版(含使用教程)下载...
- 黑马程序员—一张帖看完黑马所有学科、班级就业薪资贴
- 轻量级数据格式 —— JSON
- python中timeout什么意思_Python爬虫(五)timeout以及retrying的使用
- 社区项目发现的问题四 datatable的注意事项
- 如何查看Isilon节点的硬件信息?
热门文章
- 从Softmax回归到Logistic回归
- GIT上fork的项目获取最新源代码
- TypeScript 类(Class)
- 面试官系统精讲Java源码及大厂真题 - 16 ConcurrentHashMap 源码解析和设计思路
- 容器编排技术 -- Kubernetes 声明网络策略
- 容器编排技术 -- Kubernetes 使用Service暴露应用
- 使用Docker启动Kafka-Manager
- 【python】Macbook M1/M1pro/M1max 安装anaconda记录
- C#LeetCode刷题之#557-反转字符串中的单词 III(Reverse Words in a String III)
- 异步上传文件显示进度条