jQuery教程-函数学习之AJAX部分

2021年1月12日   |   by tgcode

函数$.ajax的解析

函数:$.ajax(properties)
功能:用一个http请求访问一个远程页面
返回:XMLHttpRequest
参数:

(String) url  请求地址;
(String) type 请求类型(”GET”,”POST”);
(String) dataType:从服务器端返回的数据类型(”xml”,”html”,”script”,”json”);
(Boolean) ifModified:根据Last-Modified header判断返回内容是否改变;
(Number) timeout:请求超时;
(Boolean) global:对此次请求是否引起全局的ajax事件出来,默认true;
(Function) error:错误处理函数;
(Function) complete:请求完成后的处理函数;
(Object|String) data:发送到服务器端的数据;
(String) contentType :默认”application/x-www-form-urlencoded”;
(Boolean) processData :传输到服务器端的数据默认被转换到query string中以适合默认”application/x-www-form-urlencoded”方式,如果你想以DOMDocumenttgcodes方式传输数据,就将该选项设为false;
(Boolean) aysnc:是否异步传输,默认为true;
(Function) beforeSend:请求前响应函数;

例子:(加载并且执行一个js文件)

jQuery Code

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->$.ajax({
type: “GET”,
url: “test.js”,
dataType: “script”
})

向服务器保存数据并且响应用户的动作完成

jQuery Code

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->$.ajax({
type: “POST”,
url: “some.php”,
data: “name
=John&location=Boston”,
success:
function(msg){
alert( “Data Saved: ”
+ msg );
}
});

jQuery Code

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->var html = $.ajax({
url: “some.php”,
async:
false
}).responseText;

jQuery Code

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->var xmlDocument = [create xml document];tgcode
$.ajax({
url: “page.php”,
processData:
false,
data: xmlDocument,
success: handleResponse
});

函数$.ajaxSetup的解析

函数:$.ajaxSetup(settings),$.ajaxTimeout(time)
功能:设定请求的一些参数
返回: undefined

例子:

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->$.ajaxSetup( {
url: “
/xmlhttp/”,
global:
false,
type: “POST”
} );
$.ajaxTimeout(
5000 );

函数$.get的解析

函数:$.get(url, params, callback),$.getIfModified(url, params, callback),
$.getJSON(url, params, callback),$.getScript(url, callback)
功能:get方式提交数据

例子:

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->$.get(”test.cgi”,
{ name: “John”, time: “2pm” },
function(data){
alert(”Data Loaded: ”
+ data);
});

函数$.post

函数:$.post(url, params, callback)

功能:post方式提交数据

例子:

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->$.post(”test.cgi”,
{ name: “John”, time: “2pm” },
function(data){
alert(”Data Loaded: ”
+ data);
});

函数ajaxComplete的解析

函数:ajaxComplete(callback),ajaxComplete(callback),ajaxSend(callback)

ajaxStart(callback),ajaxStop(callback),ajaxSuccess(callback)

功能:XMLHttpRequest状态改变过程中各个响应处理函数

例子:

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->$(”#msg”).ajaxComplete(function(request, settings){
$(
this).append(”li>Request Complete./li>”);
});
$(”#msg”).ajaxSuccess(
function(request, settings){
$(
this).append(”li>Successful Request!/li>”);
});
$(”#loading”).ajaxStop(
function(){
$(
this).hide();
});
$(”#msg”).ajaxSend(
function(request, settings){
$(
this).append(”li>Starting request at ” + settings.url +/li>”);
});

函数load的解析

函数:load(url, params, callback),loadIfModified(url, params, callback)

功能:加载html内容
返回:jQuery对象
参数:同get和post方式提交
例子:

%title插图%num%title插图%num代码

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->//jQuery Code
$(”#feeds”).load(”feeds.html”);
Before
div id=”feeds”>/div>
Result:
div id=”feeds”>b&gtgcodet;45/b> feeds found./div>

//jQuery Code
$(”#feeds”).load(”feeds.html”,
{limit:
25},
function() { alert(”The last 25 entries in the feed have been loaded”); }

函数serialize的解析

函数:serialize()

功能:将表单元素和值序列化成string
返回:String
例子:

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->jQuery Code
$(”input[@type
=text]“).serialize();
Before
input type=’text’ name=’name’ value=’John’/>
input type=’text’ name=’location’ value=’Boston’/
Result
name
=John&location=Boston

相关推荐: 让我们再聊聊浏览器资源加载优化

  几乎每一个前端程序员都知道应该把script标签放在页面底部。关于这个经典的论述可以追溯到Nicholas的High Performance Javasript这本书的第一章Loading and Execution中,他之所以建议这么做是因为: Put …

Tags: ,