jQuery教程(12)-ajax操作之基于请求加载数据

文章标签: jquery,jquery-ajax
2015-1-12 13:13:04     38 人阅读    

         Ajax (Asynchronous JavaScript and XML,异步JavaScript和XML)这个概念是由Jesse James Garrett在2005年发明的。它的含义可谓丰富,因为这个术语本身涵盖的是一组相关的能力和技术。 从根本上来说,一个Ajax解决方案中涉及如下技术。
         JavaScript:处理与用户及其他浏览器相关事件的交互,解释来自服务器的数据,并将其 呈现在页面上。
        XMLHttpRequest:这个对象可以在不中断其他浏览器任务的情况下向服务器发送请求。 □文本文件:服务器提供的XML、HTML或JSON格式的文本数据。
         Ajax技术已经成为Web开发更上一层楼的关键,它能将静态的网页转换成具有交互性的Web 应用。丝毫不用奇怪,浏览器对XMLHttpRequest对象的实现也不完全一致,但jQuery可以帮我 们解决这个问题。


本章,我们要学习如下内容:
不刷新页面而从服务器加载数据;
      通过JavaScript在浏览器中向服务器发送数据;
      在客户端使用HTML、XML和JSON等数据;
      向用户反馈Ajax请求的状态。
     基于请求加载数据
      在所有炒作和粉饰的背后,Ajax只不过是一种无需刷新页面即可从服务器(或客户端)上加 载数据的手段。这些数据的格式可以是很多种,而且,当数据到达时也有很多处理它们的方法可 供选择。本章后面,当我们以多种方式完成同样的基本任务时,就能够清楚地看到这一点。
假设我们要创建一个页面,用以显示字典中的词条,词条按照英文首字母分组。那么,定义 页面内容区的HTML代码可以像这下面这样:

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


对,没错!这个页面一开始没有内容。下面我们将使用jQuery的各种Ajax方法取得字典词条 并用来填充这个<div>。
下载代码示例


如同本书其他HTML、CSS以及JavaScript示例一样,上面的标记只是完整文 档的一个片段。如果读者想试一试这些示例,可以从以下地址下载完整的示例 代码:Packt Publishing 网站 http://www.packtpub.com/support,或者本书网站 http://book.leamingjquery.com/

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

<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规则,就得到了如图所示的页面。

 

ajax操作之基于请求加载数据

 

 

 


原文地址:http://www.itmmd.com/201501/477.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

jQuery教程(13)-ajax操作之追加 HTML   上一篇
下一篇  JavaScript 教程学习笔记——事件 event(三)

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!