您的位置:知识库 » Web前端

从零开始学习jQuery (六) AJAX快餐

作者: ziqiu.zhang  来源: 博客园  发布时间: 2009-05-08 11:51  阅读: 17634 次  推荐: 2   原文链接   [收藏]  
摘要:本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式.
[1] 原始Ajax与jQuery中的Ajax
[2] jQuery Ajax详解
[3] jQuery.getJSON
[4] Ajax相关函数.

系列文章导航:

从零开始学习jQuery (一) 开天辟地入门篇

从零开始学习jQuery (二) 万能的选择器

从零开始学习jQuery (三) 管理jQuery包装集

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

从零开始学习jQuery (五) 事件与事件对象

从零开始学习jQuery (六) AJAX快餐

从零开始学习jQuery (七) jQuery动画-让页面动起来!

从零开始学习jQuery (九) jQuery工具函数

从零开始学习jQuery (十) jQueryUI常用功能实战

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件


3. jQuery.getJSON( url,  [data], [callback] )

Returns: XMLHttpRequest

相当于:   jQuery.get(url, [data],[callback], "json")

说明:

通过 HTTP GET 请求载入 JSON 数据。

在 jQuery 1.2 中,您可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

注意:此行以后的代码将在这个回调函数执行前执行。

讲解:

getJSON函数仅仅将get函数的type参数设置为"JSON"而已. 在回调函数中获取的数据已经是按照JSON格式解析后的对象了:

$.getJSON("../data/AjaxGetCityInfo.aspx", { "resultType": "json" }, function(data, textStatus)
{
alert(data.length);
alert(data[
0].CityName);
});

服务器端返回的字符串如下:

Code

示例中我返回的饿是一个数组, 使用data.length可以获取数组的元素个数,  data[0]访问第一个元素, data[0].CityName访问第一个元素的CityName属性.

4.jQuery.getScript( url, [callback] )

Returns: XMLHttpRequest

相当于:   jQuery.get(url, null, [callback], "script")

说明:

通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。

讲解:

以前我使用dojo类库时官方默认的文件不支持跨域最后导致我放弃使用dojo(虽然在网上找到了可以跨域的版本, 但是感觉不够完美).  所以我特别对这个函数的核心实现和使用做了研究.

首先了解此函数的jQuery内部实现, 仍然使用get函数, jQuery所有的Ajax函数包括get最后都是用的是jQuery.ajax(), getScript将传入值为"script"的type参数,  最后在Ajax函数中对type为script的请求做了如下处理:

var head = document.getElementsByTagName("head")[0];            
var script = document.createElement("script");
script.src
= s.url;
 


上面的代码动态建立了一个script语句块, 并且将其加入到head中:

head.appendChild(script);

当脚本加载完毕后, 再从head中删除:

            // Handle Script loading
if ( !jsonp ) {
var done = false;

// Attach handlers for all browsers
script.onload = script.onreadystatechange = function(){
if ( !done && (!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete") ) {
done
= true;
success();
complete();

// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
head.removeChild( script );
}
};
}

 


我主要测试了此函数的跨域访问和多浏览器支持.下面是结果:

IE6 FireFox 注意事项
非跨域引用js 通过 通过 回调函数中的data和textStatus均可用
跨域引用js 通过 通过 回调函数中的data和textStatus均为undifined

下面是我关键的测试语句, 也用来演示如何使用getScript函数:

$("#btnAjaxGetJSON").click(function(event)
{
$.getScript(
"../scripts/getScript.js", function(data, textStatus)
{
alert(data);
alert(textStatus);
alert(
this.url);
});
});

$(
"#btnAjaxGetJSONXSS").click(function(event)
{
$.getScript(
"http://resource.elong.com/getScript.js", function(data, textStatus)
{
alert(data);
alert(textStatus);
alert(
this.url);
});
});

5. jQuery.post( url, [data], [callback], [type] )

Returns: XMLHttpRequest

说明:

通过远程 HTTP POST 请求载入信息。

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

讲解:

具体用法和get相同, 只是提交方式由"GET"改为"POST".


6. jQuery.ajax( options )

Returns: XMLHttpRequest

说明:

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。

注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests

注意:如果dataType设置为"script",那么所有的远程(不在同一域名下)的POST请求都将转化为GET请求。(因为将使用DOM的script标签来加载)

jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。

讲解:

这是jQuery中Ajax的核心函数, 上面所有的发送Ajax请求的函数内部最后都会调用此函数.options参数支持很多参数, 使用这些参数可以完全控制ajax请求. 在Ajax回调函数中的this对象也是options对象.

因为平时使用最多的还是简化了的get和post函数, 所以在此不对options参数做详细讲解了. options参数文档请见:

http://docs.jquery.com/Ajax/jQuery.ajax#options

2
2
 

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻