jQuery與Ajax以及序列化_jquery-js教程-PHP中文網

關於AJAX

所謂Ajax，全名Asynchronous JavaScript and XML。（也就異步的JS和XML）

簡單點來講就是不刷新頁面來發送和獲取數據，然後更新頁面。

Ajax的優勢

•無需外掛程式支援
•優秀的使用者體驗
•提高web程式的效能
•減輕伺服器和頻寬的負擔

Ajax的不足

•瀏覽器相容不足
•破壞瀏覽器前進與後退按鈕的正常功能
•對搜尋引擎的支援不足
•開發與調試工具的缺乏

好吧，這些都是幾年前的不足。技術的發展很快，這些不足也會慢慢彌補，起碼現在調試Ajax並不難。

Ajax的核心是XMLHttpRequest對象，它是Ajax實現的關鍵。

傳統的實現Ajax的例子就不舉了，太蛋痛了，我都沒記，網路上一搜一大堆。

關於jQuery中的Ajax

$.ajax()方法是封裝了最原始的js的Ajax方式。

load(),$.get(),$.post()是封裝了$.ajax()得來

$.getScript()和$.getJSON()是進一步的封裝。

•load()方法 •用處：載入遠端HTML程式碼並插入DOM中，通常用於取得靜態的資料文件，結構為：load(url [,data] [,callback])。 •url為請求的位址
•data可選，為發動到伺服器的參數物件
•callback為回呼函數，請求不論成功或失敗都呼叫
•載入頁面的時候甚至可以在地址裡加上篩選

$("#resDiv").load("test.html .myClass");//这个div里只载入test.html页面里面 样式为myClass 的元素


//举一个完整的例子
$(function(){
$("#resDiv").load("text.php",{name:"troy",textInfo:"hello"},function(responseText,textStatus,XMLHttpRequest){
//responseText：请求返回的内容
//textStatus： 请求状态：success、error、notmodiffied、timeout 4种 
//XMLHttpRequest: XMLHttpRequest对象
});
});

登入後複製

•$.get()方法 •明顯的看到呼叫的方式不同，所以說這函數是jQuery的全域函數。而此前的方法和load()這種都是對jQuery物件進行操作
•$.get()方法使用GET方式來進行非同步請求，結構為：$.get(url [,data] [,callback] [,type]) •前三個參數就不說了，唯一不同的是callback只有請求成功才會呼叫
•type參數為伺服器端傳回內容的格式，包括xml,html,script,json,text和_default
•範例

$("#send").click(function()
$.get("get1.php"
,{
username:$("#username").val(),
content:$("#content").val()
}
,function(data,textStatus){
//data: 返回的内容，可以是XML文档、JSON文件、HTML片段
//textStatus: 请求状态：success、error、notmodiffied、timeout 4种
}
)
})

登入後複製

•$.post()方法 •它與get方法的玩法一樣，不過一個是get方式，一個是post方式。
•$.getScript()方法 •有的時候頁面初次載入沒必要取得所有的腳本，所以jQuery提供了getScript這種方法來直接載入js檔案。
•範例

$('#send').click(function(){
$.getScript('test.js',function(){
//do something 这个时候脚本已经加载了，不需要再对js文件进行处理
});
});

登入後複製

• $.getJSON()方法 •用來載入JSON文件，用法同上，只不過傳回的json資料而已

$('#send').click(function(){
$.getJSON("myurl",function(data){
var html="";
$.each(data,function(commentIndex，comment){
html+=commentIndex+":"+comment['username']+";";
})
alert(html);
})
});
//注意一下ecch这种玩法，同样是个全局函数。他的回调函数中，第一个参数为成员的索引，第二个为变量和内容

登入後複製

順便擴充一下，跨域存取的JSONP

$("#send").click(function(){
$.getJSON("http://www.某网站.com/services/getMyCmpJson&#63;tags=car&tagmode=any&format=json&jsoncall back=&#63;"
,function(data){
//某些操作
}
)
})

登入後複製

//JSONP是個非官方協議，採用json與

作者最新文章