learning jQuery 学习笔记十五（+jQuery 1.4.1 API）

注：本笔记内容摘自《jQuery基础教程》+ jQuery 1.4.1中文参考

       AJAX表示一组首字母缩写词—Asynchronous JavaScript and XML(异步JavaScript和XML)。一个AJAX解决方案中涉及的技术如下：

       JavaScript，通过用户或其他浏览器相关事件捕获交互作用。

XMLHttpRequest对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求。

服务器上的XML文件，或者其它类似的数据格式。

其它JavaScript，解释来自服务器的数据并将其呈现到页面上。

 

基于请求加载数据

       AJAX是一种无需刷新页面即可从服务器上加载数据的手段。

第一段示例代码：

$(document).ready(function(){

       $(‘#letter-a .button’).click(function(){

       $(‘#dictionary’).load(‘a.html’);

       alert(‘Loaded!’);

});

});

其中，.load()方法替我们完成了所有繁琐复杂的工作！这里，我们通过常规的jQuery选择符为HTML片段指定了目标位置，然后将要加载的文件的URL作为参数传递给.load()方法。现在，当点击第一个按钮时，这个文件就会被加载并插入到<div id=”dictionary”>内部。而且，当插入完成后，浏览器里就会呈现出新的HTML。

 

AJAX请求

jQuery 1.4.1 API

load(url, [data], [callback])                                    返回值:jQuery

概述

载入远程HTML 文件代码并插入至 DOM 中。

默认使用GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some >selector"。请查看示例。

参数

url   String

待装入HTML 网页网址。

data (可选)Map,String

发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback (可选)Callback

载入成功时回调函数。

示例

描述:

加载文章侧边栏导航部分至一个无序列表。

HTML 代码:

<b>jQuery Links:</b>

<ul id="links"></ul>

jQuery 代码:

$("#links").load("/Main_Page#p-Getting-Started li");

描述:

加载feeds.html 文件内容。

jQuery 代码:

$("#feeds").load("feeds.html");

描述:

同上，但是以 POST 形式发送附加参数并在成功时显示信息。

jQuery 代码:

 $("#feeds").load("feeds.php",{limit: 25}, function(){

  alert("The last 25 entries in the feed have been loaded");

 });