函数 | 说明 |
---|---|
$.ajax() | 用于通过后台HTTP请求加载远程数据。 |
$.get() | 用于通过HTTP GET形式的AJAX请求获取远程数据。 |
$.post() | 用于通过HTTP POST形式的AJAX请求获取远程数据。 |
$.getJSON() | 用于通过HTTP GET形式的AJAX请求获取远程JSON编码的数据。 |
$.getScript() | 用于通过HTTP GET形式的加载JavaScript文件并运行它。 |
jQuery.ajax()函数用于通过后台HTTP请求加载远程数据。
jQuery.ajax()函数是jQuery封装的AJAX技术实现,通过该函数,我们无需刷新当前页面即可获取远程服务器上的数据。
jQuery.ajax()函数是jQuery的底层AJAX实现。jQuery.get()、 jQuery.post()、 load()、 jQuery.getJSON()、 jQuery.getScript()等函数都是该函数的简化形式(都调用该函数,只是参数设置有所不同或有所省略)。
该函数属于全局jQuery对象(也可理解为静态函数)。
jQuery 1.0 新增该静态函数。
jQuery 1.5 新增支持
用法二是用法一的变体,它只是将参数对象settings中的可选属性url单独提取出来作为一个独立的参数。
函数 | 说明 |
---|---|
url | String类型 发送的内容类型请求头,用于告诉服务器——浏览器可以接收服务器返回何种类型的响应。 |
settings | 可选/Object类型一个Object对象,其中的每个属性用来指定发送请求所需的额外参数设置。 |
参数settings是一个对象,jQuery.ajax()可以识别该对象的以下属性(它们都是可选的):
属性 | 默认值 | 说明 |
---|---|---|
accepts | 取决于dataType属性 | Object类型 URL请求字符串。 |
async | true | Boolean类型 指示是否是异步请求。同步请求将锁定浏览器,直到获取到远程数据后才能执行其他操作。 |
cache | true(dataType为’script’或’jsonp’时,则默认为false)。 | Boolean类型 指示是否缓存URL请求。如果设为false将强制浏览器不缓存当前URL请求。该参数只对HEAD、GET请求有效(POST请求本身就不会缓存)。 |
beforeSend | Function类型 指定在请求发送前需要执行的回调函数。该函数还有两个参数:其一是jqXHR对象,其二是当前settings对象。这是一个Ajax事件,如果该函数返回false,将取消本次ajax请求。 | |
complete | Function/Array类型 指定请求完成(无论成功或失败)后需要执行的回调函数。该函数还有两个参数:一个是jqXHR对象,一个是表示请求状态的字符串(‘success’、 ‘notmodified’、 ‘error’、 ‘timeout’、 ‘abort’或’parsererror’)。这是一个Ajax事件。从jQuery 1.5开始,该属性值可以是数组形式的多个函数,每个函数都将被回调执行。 | |
contents | 1.5 新增 | Object类型 一个以”{字符串:正则表达式}”配对的对象,用来确定jQuery将如何解析响应,给定其内容类型。 |
contentType | ‘application/x-www-form-urlencoded; charset=UTF-8’ | String类型 使用指定的内容编码类型将数据发送给服务器。W3C的XMLHttpRequest规范规定charset始终是UTF-8,你如果将其改为其他字符集,也无法强制浏览器更改字符编码。 |
context | Object类型 用于设置Ajax相关回调函数的上下文对象(也就是函数内的this指针)。 | |
converters | 1.5 新增,默认值:{‘* text’: window.String, ‘text html’: true, ‘text json’: jQuery.parseJSON, ‘text xml’: jQuery.parseXML} | String类型 一个数据类型转换器。每个转换器的值都是一个函数,用于返回响应转化后的值。 |
crossDomain | 1.5 新增,默认值:同域请求为false,跨域请求为true | Boolean类型 指示是否是跨域请求。如果你想在同一域中强制跨域请求(如JSONP形式),请设置为true。例如,这允许服务器端重定向到另一个域。 |
data | 任意类型 发送到服务器的数据,它将被自动转为字符串类型。如果是GET请求,它将被附加到URL后面。 | |
dataFilter | Function类型 指定处理响应的原始数据的回调函数。该函数还有两个参数:其一表示响应的原始数据的字符串,其二是dataType属性字符串。 | |
dataType | jQuery智能猜测,猜测范围(xml、 json、 script或html) | String类型 指定返回的数据类型。该属性值可以为: ’xml’ :返回XML文档,可使用jQuery进行处理; ’html’: 返回HTML字符串; ’script’: 返回JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意:在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载); ’json’: 返回JSON数据。JSON数据将使用严格的语法进行解析(属性名必须加双引号,所有字符串也必须用双引号),如果解析失败将抛出一个错误。从jQuery 1.9开始,空内容的响应将返回null或{}。’jsonp’: JSONP格式。使用JSONP形式调用函数时,如”url?callback=?”,jQuery将自动替换第二个?为正确的函数名,以执行回调函数; ’text’: 返回纯文本字符串。 |
global | true | Boolean类型 指示是否触发全局Ajax事件。将该值设为false将阻止全局事件处理函数被触发,例如ajaxStart()和ajaxStop()。它可以用来控制各种Ajax事件。 |
headers | {} | Object类型 以对象形式指定附加的请求头信息。请求头X-Requested-With: XMLHttpRequest将始终被添加,当然你也可以在此处修改默认的XMLHttpRequest值。headers中的值可以覆盖beforeSend回调函数中设置的请求头(意即beforeSend先被调用)。 |
ifModified | false | Boolean类型 允许当前请求仅在服务器数据改变时获取新数据(如未更改,浏览器从缓存中获取数据)。它使用HTTP头信息Last-Modified来判断。从jQuery 1.4开始,他也会检查服务器指定的’etag’来确定数据是否已被修改。 |
isLocal | 取决于当前的位置协议。 | Boolean类型 允许将当前环境视作”本地”,(例如文件系统),即使默认情况下jQuery不会如此识别它。目前,以下协议将被视作本地:file、*-extension和widget。 |
jsonp | String类型 重写JSONP请求的回调函数名称。该值用于替代”url?callback=?”中的”callback”部分。 | |
jsonpCallback | false | String/Function类型 为JSONP请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。从jQuery 1.5开始,你也可以指定一个函数来返回所需的函数名称。 |
mimeType | 1.5.1 新增 | String类型 一个mime类型用来覆盖XHR的mime类型。 |
password | String类型 用于响应HTTP访问认证请求的密码。 | |
processData | true | Boolean类型 默认情况下,通过data属性传递进来的数据,如果是一个对象(技术上讲,只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM树信息或其它不希望转换的信息,请设置为false。 |
scriptCharset | String类型 设置该请求加载的脚本文件的字符集。只有当请求时dataType为”jsonp”或”script”,并且type是”GET”才会用于强制修改charset。这相当于设置 标签的charset属性。通常只在当前页面和远程数据的内容编码不同时使用。 |
|
success | Function/Array类型 指定请求成功后执行的回调函数。该函数有3个参数:请求返回的数据、响应状态字符串、jqXHR对象。从jQuery 1.5开始,该属性值可以是数组形式的多个函数,每个函数都将被回调执行。 | |
error | Function/Array类型 指定请求失败时执行的回调函数。该函数有3个参数:jqXHR对象、 请求状态字符串(null、 ‘timeout’、 ‘error’、 ‘abort’和’parsererror’)、 错误信息字符串(响应状态的文本描述部分,例如’Not Found’或’Internal Server Error’)。这是一个Ajax事件。跨域脚本和跨域JSONP请求不会调用该函数。从jQuery 1.5开始,该属性值可以是数组形式的多个函数,每个函数都将被回调执行。 | |
timeout | Number类型 设置请求超时的毫秒值。 | |
traditional | Boolean类型 如果你希望使用传统方式来序列化参数,将该属性设为true。 | |
type | “GET” | String类型 请求类型,可以为’POST’或’GET’。注意:你也可以在此处使用诸如’PUT’、’DELETE’等其他请求类型,但它们不被所有浏览器支持。 |
url | 当前页面URL | String类型 请求的目标URL。 |
username | “GET” | String类型 用于响应HTTP访问认证请求的用户名。 |
xhr | 在IE下是ActiveXObject(如果可用),在其他浏览器中是XMLHttpRequest | Function类型 一个用于创建并返回XMLHttpRequest对象的回调函数。你可以重写该属性以提供自己的XHR实现,或增强其功能。 |
xhrFieldsObject | 1.5.1 新增 | Function类型 一个具有多个”字段名称-字段值”对的对象,用于对本地XHR对象进行设置。一对「文件名-文件值」在本机设置XHR对象。 |
headers使用示例:
$.ajax({
url: "my.php" ,
headers: {
"Referer": "http://www.365mini.com" // 有些浏览器不允许修改该请求头
,"User-Agent": "newLine" // 有些浏览器不允许修改该请求头
,"X-Power": "newLine"
,"Accept-Language": "en-US"
}
});
statusCode使用示例:
$.ajax({
url: a_not_found_url ,
// 当响应对应的状态码时,执行对应的回调函数
statusCode: {
404: function() {
alert( "找不到页面" );
},
200: function(){
alert("请求成功");
}
}
});
xhrFieldsObject使用举例,如果需要,你可以用它来为跨域请求设置XHR对象的withCredentials属性为true:
$.ajax({
url: a_cross_domain_url,
// 将XHR对象的withCredentials设为true
xhrFields: {
withCredentials: true
}
});
注意:
1、如果你的所有AJAX请求都需要设置settings中某些参数,你可以使用jQuery.ajaxSetup()函数进行全局设置,而无需在每次执行jQuery.ajax()时分别设置。
2、在jQuery 1.4(含)之前,选项参数complete、succes、error等Ajax事件的回调函数的第3个参数不是经过jQuery封装的jqXHR对象,而是原生的XMLHttpRequest对象。
jQuery.ajax()函数的返回值为jqXHR类型,返回当前该请求的jqXHR对象(jQuery 1.4及以前版本返回的是原生的XMLHttpRequest对象)。
如果没有给jQuery.ajax()指定任何参数,则默认请求当前页面,并且不对返回数据进行处理。
jQuery.ajax()函数的settings对象中,常用的属性有:url、type、async、data、dataType、success、error、complete、beforeSend、timeout等。
请参考下面这段初始HTML代码:
<div id="content">div>
以下是与jQuery.ajax()函数相关的jQuery示例代码,以演示jQuery.ajax()函数的具体用法:
$.ajax({
url: "jquery_ajax.php"
, type: "POST"
, data: "name=codeplayer&age=18"
, success: function( data, textStatus, jqXHR ){
// data 是返回的数据
// textStatus 可能为"success"、"notmodified"等
// jqXHR 是经过jQuery封装的XMLHttpRequest对象
alert("返回的数据" + data);
}
});
$.ajax({
url: "jquery_ajax.php?page=1&id=3"
, type: "POST"
// jQuery会自动将对象数据转换为 "name=codeplayer&age=18&uid=1&uid=2&uid=3"
, data: { name:"codeplayer", age:18, uid: [1, 2, 3] }
// 请求成功时执行
, success: function( data, textStatus, jqXHR ){
alert("返回的数据" + data);
}
// 请求失败时执行
, error: function(jqXHR, textStatus, errorMsg){
// jqXHR 是经过jQuery封装的XMLHttpRequest对象
// textStatus 可能为: null、"timeout"、"error"、"abort"或"parsererror"
// errorMsg 可能为: "Not Found"、"Internal Server Error"等
alert("请求失败:" + errorMsg);
}
});
// 将url单独提取出来作为第一个参数(jQuery 1.5+才支持)
$.ajax("jquery_ajax.php?action=type&id=3", {
dataType: "json" // 返回JSON格式的数据
, success: function( data, textStatus, jqXHR ){
// 假设返回的字符串数据为{ "name": "CodePlayer", age: 20 }
// jQuery已帮我们将该JSON字符串转换为对应的JS对象,可以直接使用
alert( data.name ); // CodePlayer
}
});
$.ajax( {
// 注意这里有个参数callback=?
url: "http://cross-domain/jquery_ajax.php?name=Jim&callback=?&age=21"
, async: false // 同步请求,发送请求后浏览器将被锁定,只有等到该请求完成(无论成功或失败)后,用户才能操作,js代码才会继续执行
, dataType: "jsonp" // 返回JSON格式的数据
, success: function( data, textStatus, jqXHR ){
// 假设返回的字符串数据为{ "site_name": "CodePlayer", "site_desc": "专注于编程开发技术分享" }
// jQuery已帮我们将该JSON字符串转换为对应的JS对象,可以直接使用
alert( data.site_desc ); // 专注于编程开发技术分享
}
});
$.ajax( {
// 加载指定的js文件到当前文档中
url: "http://code.jquery.com/jquery-1.8.3.min.js"
, dataType: "script"
});
用于通过HTTP GET形式的AJAX请求获取远程数据。
jQuery.get()函数用于实现简单的GET形式的AJAX请求,它在底层是使用jQuery.ajax()来实现的,只是省略了大多数不常用的参数设置,并仅限于HTTP GET方式。
请注意,该函数是通过异步方式加载数据的。
这里介绍的jQuery.get()是一个全局方法(无需创建jQuery对象即可调用,你可以理解为静态函数)。jQuery中还有一个同名的实例方法get(),用于获取当前jQuery对象中匹配的指定索引的DOM元素。
该函数属于全局jQuery对象。
jQuery 1.0 新增该静态函数。
参数 | 说明 |
---|---|
url | String类型 指定请求的目标URL。 |
data | 可选/String/Object类型 发送请求传递的数据。 |
success | 可选/Function类型 请求成功时执行的回调函数。它有3个参数:其一是请求返回的数据,其二是请求状态文本(例如”success”、 “notmodified”),其三是当前jqXHR对象(在jQuery 1.4及之前版本中,该参数为原生的XMLHttpRequest对象)。 |
type | 可选/String类型 指定请求返回的数据类型,可以为xml、 html、 script、 json、 jsonp、text。如果省略该参数,jQuery将会根据请求进行智能猜测,猜测范围为:xml、 json、 script 或html。 |
参数success指定的回调函数只有在请求成功时才会执行,如果请求失败(例如找不到页面、服务器错误等)则不作任何处理。
jQuery.get()函数的返回值为jqXHR类型,返回发送该请求的jqXHR对象(在jQuery 1.4及之前版本中,返回的是原生的XMLHttpRequest对象)。
jqXHR对象是经过jQuery封装的类XMLHttpRequest对象。
jQuery.get()是jQuery.ajax()函数的如下简写形式:
jQuery.get(url, data, success, dataType);
// 等价于
$.ajax({
url: url,
type: "GET",
data: data,
success: success,
dataType: dataType
});
HTML示例代码:
<div id="content1">CodePlayerdiv>
<div id="content2">专注于编程开发技术分享div>
<div id="content3">http://***********div>
jQuery.get()函数相关的jQuery示例代码,以演示jQuery.get()函数的具体用法:
// 以GET请求方式获取http://localhost/index.php?id=5的数据,但不作任何处理
$.get( "http://localhost/index.php?id=5" );
// 等价于 http://localhost/index.php?id=5&orderId=5&money=100
$.get( "http://localhost/index.php?id=5", "orderId=5&money=100" );
// 等价于 http://localhost/index.php?id=5&orderId=5&money=100
$.get( "http://localhost/index.php?id=5", {orderId: 5, money: 100} );
/* ***** 一般不会使用上述不对获取的数据作任何处理的用法***** */
// 以GET请求方式获取http://localhost/index.php?id=5的数据,将返回的html内容追加到body标签内
$.get( "http://localhost/index.php?id=5", function(data, textStatus, jqXHR){
// data 是该请求返回的数据(可能经过处理)
// textStatus 可能是"success"、 "notmodified"等
// jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
$("body").append( data );
} );
$.get( "http://localhost/index.php?id=5", { bookId: 2 }, function(data, textStatus, jqXHR){
// 如果返回的原始文本数据为{ "name": "CodePlayer", "age": 20 }
// 由于get()指定了返回数据的类型为JSON,则jQuery将会尝试将返回数据转换为JSON对象
// 如果转换成功,这里的data就已经是一个js对象
alert( data.name ); // CodePlayer
}, "json" );
用于通过HTTP POST形式的AJAX请求获取远程数据。
jQuery.post()函数用于实现简单的POST形式的Ajax请求,它在底层是使用jQuery.ajax()来实现的,只是省略了大多数不常用的参数设置,并仅限于HTTP POST方式。
请注意,该函数是通过异步方式加载数据的。
该函数属于全局jQuery对象。
jQuery 1.0 新增该静态函数。
参数 | 说明 |
---|---|
url | String类型 指定请求的目标URL。 |
data | 可选/String/Object类型 发送请求传递的数据。 |
success | 可选/Function类型 请求成功时执行的回调函数。它有3个参数:其一是请求返回的数据,其二是请求状态文本(例如”success”、 “notmodified”),其三是当前jqXHR对象(在jQuery 1.4及之前版本中,该参数为原生的XMLHttpRequest对象)。 |
type | 可选/String类型 指定请求返回的数据类型,可以为xml、 html、 script、 json、 jsonp、text。如果省略该参数,jQuery将会根据请求进行智能猜测,猜测范围为:xml、 json、 script 或html。 |
参数success指定的回调函数只有在请求成功时才会执行,如果请求失败(例如找不到页面、服务器错误等)则不作任何处理。
jQuery.post()函数的返回值为jqXHR类型,返回发送该请求的jqXHR对象(在jQuery 1.4及之前版本中,返回的是原生的XMLHttpRequest对象)。
jqXHR对象是经过jQuery封装的类XMLHttpRequest对象。
jQuery.post()是jQuery.ajax()函数的如下简写形式:
jQuery.post(url, data, success, dataType);
// 等价于
$.ajax({
url: url,
type: "POST",
data: data,
success: success,
dataType: dataType
});
HTML示例代码:
<div id="content1">postdiv>
<div id="content2">专注于编程开发技术div>
<div id="content3">ddddddddddddddddiv>
jQuery.post()函数相关的jQuery示例代码,以演示jQuery.post()函数的具体用法:
// 以POST请求方式获取http://localhost/index.php?id=5的数据,但不作任何处理
$.post( "http://localhost/index.php?id=5" );
// 等价于 http://localhost/index.php?id=5&orderId=5&money=100
$.post( "http://localhost/index.php?id=5", "orderId=5&money=100" );
// 等价于 http://localhost/index.php?id=5&orderId=5&money=100
$.post( "http://localhost/index.php?id=5", {orderId: 5, money: 100} );
/* ***** 一般不会使用上述不对获取的POST数据作任何处理的用法***** */
// 以POST请求方式获取http://localhost/index.php?id=5的数据,将返回的html内容追加到body标签内
$.post( "http://localhost/index.php?id=5", function(data, textStatus, jqXHR){
// data 是该请求返回的数据(可能经过处理)
// textStatus 可能是"success"、 "notmodified"等
// jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
$("body").append( data );
} );
$.post( "http://localhost/index.php?id=5", { bookId: 2 }, function(data, textStatus, jqXHR){
// 如果返回的原始文本数据为{ "name": "CodePlayer", "age": 20 }
// 由于post()指定了返回数据的类型为JSON,则jQuery将会尝试将返回数据转换为JSON对象
// 如果转换成功,这里的data就已经是一个js对象
alert( data.name ); // CodePlayer
}, "json" );
用于通过HTTP GET形式的AJAX请求获取远程JSON编码的数据。
JSON是一种数据格式,JS原生支持JSON格式,通过jQuery.getJSON()从服务器获得的JSON数据,jQuery会先尝试将其转为对应的JS对象。
如果请求的URL中包括”callback=?”等类似的部分,jQuery会自动将其视作JSONP,并执行对应的回调函数来获取JSON数据。
重要注意:服务器返回的JSON数据必须符合严格的JSON语法,例如:所有属性名称必须加双引号,所有字符串值也必须加双引号(而不是单引号)。
请注意,该函数是通过异步方式加载数据的。
该函数属于全局jQuery对象。
jQuery 1.0 新增该静态函数。
参数 | 说明 |
---|---|
url | String类型 指定请求的目标URL。 |
data | 可选/String/Object类型 发送请求传递的数据。 |
success | 可选/Function类型 请求成功时执行的回调函数。它有3个参数:其一是请求返回的数据,其二是请求状态文本(例如”success”、 “notmodified”),其三是当前jqXHR对象(在jQuery 1.4及之前版本中,该参数为原生的XMLHttpRequest对象)。 |
参数success指定的回调函数只有在请求成功时才会执行,如果请求失败(例如找不到页面、服务器错误等)则不作任何处理。
jQuery.getJSON()函数的返回值为jqXHR类型,返回发送该请求的jqXHR对象(在jQuery 1.4及之前版本中,返回的是原生的XMLHttpRequest对象)。
jqXHR对象是经过jQuery封装的类XMLHttpRequest对象。
jQuery.getJSON()是jQuery.ajax()函数的如下简写形式:
jQuery.getJSON(url, data, success);
// 等价于
$.ajax({
url: url,
type: "GET",
data: data,
success: success,
dataType: "json"
});
HTML示例代码:
<div id="content1">CodePlayerdiv>
<div id="content2">专注于编程开发技术分享div>
<div id="content3">http://*******div>
jQuery.getJSON()函数相关的jQuery示例代码,以演示jQuery.getJSON()函数的具体用法:
//获取index.php?type=json的JSON数据,但不作任何处理
$.getJSON( "index.php?type=json" );
// 等价于 index.php?id=5&orderId=5&money=100
$.getJSON( "index.php?id=5", "orderId=5&money=100" );
// 等价于 http://localhost/index.php?id=5&orderId=5&money=100
$.getJSON( "http://localhost/index.php?id=5", {orderId: 5, money: 100} );
/* ***** 一般不会使用上述不对获取的JSON数据作任何处理的用法***** */
// 获取index.php?type=json的JSON数据,获取成功时弹出对话框
$.getJSON( "index.php?type=json", function(data, textStatus, jqXHR){
// data 是该请求返回的数据(可能经过处理)
// textStatus 可能是"success"、 "notmodified"等
// jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
// 如果服务器返回的JSON格式的数据是 {"id": 5, "name": "CodePlayer"}
// JSON格式的数据的属性名称必须加双引号,字符串值必须加双引号。
// jQuery已经将其转换成对应的JS对象
alert( data.id ); // 5
alert( data.name ); // CodePlayer
} );
// 获取"/action.php?m=list&page=2&size=10"的JSON数据,获取成功时弹出对话框
$.getJSON( "/action.php?m=list", { page: 2, size: 10 }, function(data, textStatus, jqXHR){
// 如果服务器返回的JSON格式的数据是 [ {"id":11, "title":"文章11"}, {"id":12, "title":"文章12"}, {"id":13, "title":"文章13"} ]
// jQuery将获取的JSON格式数据转换为JS数组
for(var i in data){
var obj = data[i];
alert( obj.title );
}
} );
用于通过HTTP GET形式的加载JavaScript文件并运行它。
该函数用于动态加载JS文件,并在全局作用域下执行文件中的JS代码。
该函数可以加载跨域的JS文件。请注意,该函数是通过异步方式加载数据的。
该函数属于全局jQuery对象。
jQuery 1.0 新增该静态函数。
参数 | 说明 |
---|---|
url | String类型 指定请求的目标URL。 |
success | 可选/Function类型 请求成功时执行的回调函数。它有3个参数:其一是请求返回的数据,其二是请求状态文本(例如”success”、 “notmodified”),其三是当前jqXHR对象(在jQuery 1.4及之前版本中,该参数为原生的XMLHttpRequest对象)。 |
参数success指定的回调函数只有在请求成功时才会执行,如果请求失败(例如找不到页面、服务器错误等)则不作任何处理。
jQuery.getScript()函数的返回值为jqXHR类型,返回发送该请求的jqXHR对象(在jQuery 1.4及之前版本中,返回的是原生的XMLHttpRequest对象)。
jqXHR对象是经过jQuery封装的类XMLHttpRequest对象。
jQuery.getScript()是jQuery.ajax()函数的如下简写形式:
jQuery.getScript(url, success);
// 等价于
$.ajax({
url: url,
type: "GET",
success: success,
dataType: "script"
});
jQuery.getScript()函数相关的jQuery示例代码,以演示jQuery.getScript()函数的具体用法:
// 加载并执行js文件:http://www.365mini.com/static/js/jquery-util.js
$.getScript( "http://www.365mini.com/static/js/jquery-util.js" );
// 加载并执行js文件:js.php?f=kissy,util,ui&version=1.3
$.getScript( "js.php?f=kissy,util,ui&version=1.3" );
//加载并执行js文件:http://www.365mini.com/static/js/jquery-util.js?v=1.3
//并在成功后执行回调函数
$.getScript( "http://www.365mini.com/static/js/jquery-util.js?v=1.3", function(data, textStatus, jqXHR){
// data 是该请求返回的数据(可能经过处理)
// textStatus 可能是"success"、 "notmodified"等
// jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
alert( "加载成功" );
// 这里假设加载的js文件中定义了函数renderUI(),这里即可执行
renderUI();
} );
注意:如果多次加载相同URL的js文件,即使服务器对js文件启用了缓存,在第二次及以后加载该js文件时,jQuery.getScript()仍然不会缓存。因为该函数会在js文件的URL后面添加一个时间戳参数后缀,从而避免浏览器获取缓存的js文件。
// 加载并执行js文件:http://www.365mini.com/static/js/jquery-util.js
$.getScript( "http://www.365mini.com/static/js/jquery-util.js" );
// 第二次加载并执行js文件:http://www.365mini.com/static/js/jquery-util.js
$.getScript( "http://www.365mini.com/static/js/jquery-util.js" );
请注意不要直接在jQuery.getScript()执行后直接调用该js文件中的变量或函数,因为jQuery.getScript()是异步加载的,在你访问其中的某个变量或函数时,可能该js文件尚未完全加载完毕。建议你最好在success回调函数中处理,或者你能够确认此时该js文件已经加载完毕
/ 加载并执行js文件:http://**/static/js/jquery-util.js
$.getScript( “http:/**/static/js/jquery-util.js” );
// 假设上述加载的js中存在函数utilExec()
// 调用 utilExec()函数
// 注意:请不要这样使用,因为$.getScript是异步加载的,你执行utilExec()时,可能该js文件尚未加载完成
// utilExec();