jQuery與Ajax以及序列化
關(guān)于AJAX
所謂Ajax,全名Asynchronous JavaScript and XML。(也就異步的JS和XML)
簡單點(diǎn)來講就是不刷新頁面來發(fā)送和獲取數(shù)據(jù),然后更新頁面。
Ajax的優(yōu)勢
•無需插件支持
•優(yōu)秀的用戶體驗(yàn)
•提高web程序的性能
•減輕服務(wù)器和帶寬的負(fù)擔(dān)
Ajax的不足
•瀏覽器兼容不足
•破壞瀏覽器前進(jìn)和后退按鈕的正常功能
•對搜索引擎的支持不足
•開發(fā)和調(diào)試工具的 缺乏
好吧,這些都是幾年前的不足。技術(shù)的發(fā)展很快,這些不足也會慢慢彌補(bǔ),起碼現(xiàn)在調(diào)試Ajax并不難。
Ajax的核心是XMLHttpRequest對象,它是Ajax實(shí)現(xiàn)的關(guān)鍵。
傳統(tǒng)的實(shí)現(xiàn)Ajax的例子就不舉了,太蛋疼了,我都沒記,網(wǎng)上一搜一大堆。
關(guān)于jQuery中的Ajax
$.ajax()方法是封裝了最原始的js的Ajax方式。
load(),$.get(),$.post()是封裝了$.ajax()得來
$.getScript()和$.getJSON()是進(jìn)一步的封裝。
•load()方法 •用處:載入遠(yuǎn)程HTML代碼并插入DOM中,通常用于獲取靜態(tài)的數(shù)據(jù)文件,結(jié)構(gòu)為:load(url [,data] [,callback])。 •url為請求的地址
•data可選,為發(fā)動到服務(wù)器的參數(shù)對象
•callback為回調(diào)函數(shù),請求不論成功還是失敗都調(diào)用
•載入頁面的時候甚至可以在地址里加上篩選
$("#resDiv").load("test.html .myClass");//這個div里只載入test.html頁面里面 樣式為myClass 的元素 //舉一個完整的例子 $(function(){ $("#resDiv").load("text.php",{name:"troy",textInfo:"hello"},function(responseText,textStatus,XMLHttpRequest){ //responseText:請求返回的內(nèi)容 //textStatus: 請求狀態(tài):success、error、notmodiffied、timeout 4種 //XMLHttpRequest: XMLHttpRequest對象 }); });
•$.get()方法 •明顯的看到調(diào)用的方式不同,所以說這函數(shù)是jQuery的全局函數(shù)。而此前的方法和load()這種都是對jQuery對象進(jìn)行操作
•$.get()方法使用GET方式來進(jìn)行異步請求,結(jié)構(gòu)為:$.get(url [,data] [,callback] [,type]) •前三個參數(shù)就不說了,唯一不同的是callback只有請求成功才調(diào)用
•type參數(shù)為服務(wù)器端返回內(nèi)容的格式,包括xml,html,script,json,text和_default
•例子
$("#send").click(function() $.get("get1.php" ,{ username:$("#username").val(), content:$("#content").val() } ,function(data,textStatus){ //data: 返回的內(nèi)容,可以是XML文檔、JSON文件、HTML片段 //textStatus: 請求狀態(tài):success、error、notmodiffied、timeout 4種 } ) })
•$.post()方法 •它與get方法的玩法一樣,不過一個是get方式,一個是post方式。
•$.getScript()方法 •有的時候頁面初次加載沒必要獲取所有的腳本,所以jQuery提供了getScript這種方法來直接加載js文件。
•例子
$('#send').click(function(){ $.getScript('test.js',function(){ //do something 這個時候腳本已經(jīng)加載了,不需要再對js文件進(jìn)行處理 }); });
• $.getJSON()方法 •用于加載JSON文件,用法同上,只不過返回的json數(shù)據(jù)而已
$('#send').click(function(){ $.getJSON("myurl",function(data){ var html=""; $.each(data,function(commentIndex,comment){ html+=commentIndex+":"+comment['username']+";"; }) alert(html); }) }); //注意一下ecch這種玩法,同樣是個全局函數(shù)。他的回調(diào)函數(shù)中,第一個參數(shù)為成員的索引,第二個為變量和內(nèi)容
順便擴(kuò)展一下,跨域訪問的JSONP
$("#send").click(function(){ $.getJSON("http://www.某網(wǎng)站.com/services/getMyCmpJson?tags=car&tagmode=any&format=json&jsoncall back=?" ,function(data){ //某些操作 } ) })
//JSONP是個非官方協(xié)議,采用json與<script>標(biāo)記結(jié)合的方式,主要用于web應(yīng)用程序跨域
•$.ajax()方法 •這個方法是jQuery最底層的Ajax實(shí)現(xiàn),所以理所當(dāng)然更加強(qiáng)大以及復(fù)雜。
雖然它只有一個參數(shù),但是這個參數(shù)對象包含的屬性非常多,不過都是可選的。以下列出所有屬性: • url:默認(rèn)當(dāng)前頁地址,也可以手動寫請求的地址
•type:默認(rèn)為GET,也可以寫POST
•timeout:設(shè)置請求超時時間(毫秒)
•data:發(fā)送的數(shù)據(jù)
•dataType:預(yù)期服務(wù)器返回的數(shù)據(jù)類型。
•beforeSend:發(fā)送前的調(diào)用的函數(shù),如果次函數(shù)返回false將取消本次ajax請求。
function(XMLHttpRequest){//XMLHttpRequest是唯一的參數(shù) this;//調(diào)用本次Ajax請求時傳遞的options參數(shù) }
•complete:請求完后,無論成功還是失敗都調(diào)用。
function(XMLHttpRequest,textStatus){//textStatus描述成功請求類型 this;//調(diào)用本次Ajax請求時傳遞的options參數(shù) }
•success:請求成功后的回調(diào)函數(shù)
function(data,textStatus){//data為成功返回的數(shù)據(jù) this;//調(diào)用本次Ajax請求時傳遞的options參數(shù) }
•error:請求失敗調(diào)用的函數(shù)
function(XMLHttpRequest,textStatus,errorThrown){ // textStatus為錯誤信息,errorThrown為捕獲的錯誤對象,通常只有其中一個包含信息 this;//調(diào)用本次Ajax請求時傳遞的options參數(shù) }
•global:默認(rèn)為true。表示是否觸發(fā)全局Ajax事件。
•序列化元素 •serialize()方法 •它能夠?qū)OM元素內(nèi)容序列化為字符串
//不僅可以序列化整個表單,也可以序列化單個元素,并且都是自動編碼過的 $.post("myurl",$("#form1").serialize(),function(data,textStatus){ $("#resText").html(data); })
•serializeArray()方法 •它能夠?qū)OM元素內(nèi)容序列化為JSON格式
•$.param()方法 •這是serialize方法的核心,用來對一個數(shù)組或?qū)ο蟀凑真I值對進(jìn)行序列化
var obj={a:1,b:2,c:3}; var k=$.param(obj);//輸出為a=1&b=2&c=3
•jQuery中的Ajax全局事件 •ajaxStart()方法:當(dāng)Ajax請求開始就觸發(fā)
•ajaxStop()方法:當(dāng)Ajax請求結(jié)束就觸發(fā)
<div id="loading">加載中...</div> $("#loading").ajaxStart(function(){ $(this).show();//ajax開始請求就顯示加載中 }); $("#loading").ajaxStop(function(){ $(this).hide();//ajax開始結(jié)束就隱藏加載中 });
•ajaxComplete():當(dāng)Ajax請求完成就觸發(fā)
•ajaxError():當(dāng)Ajax請求發(fā)生就觸發(fā),捕捉到的錯誤可以作為最后一個參數(shù)傳遞
•ajaxSend():當(dāng)Ajax請求發(fā)送前就觸發(fā)
•ajaxSuccess():當(dāng)Ajax請求成功就觸發(fā)
•如果想使某個Ajax請求不受全局事件的影響,可以在$.ajax中將global屬性設(shè)置為false,這個在前面已經(jīng)講過了。當(dāng)然也可以在ajax請求前:
$.ajaxPrefilter(function(options){//每次發(fā)送前請求 options.global=true; })
好吧,寫完了。最后順帶提一下,setTimeout("doMethod()",4000);為4s后執(zhí)行doMethod這個函數(shù)。
//一個簡單的定時發(fā)送功能 function updateMsg(){ $.post("myurl",{time:timestamp},function(xml){ //do something }); setTimeout("updateMsg()",4000); }
- jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
- jQuery中ajax的post()方法用法實(shí)例
- jQuery中Ajax的get、post等方法詳解
- jquery+ajax實(shí)現(xiàn)跨域請求的方法
- jquery中ajax使用error調(diào)試錯誤的方法
- PHP+jQuery+Ajax實(shí)現(xiàn)多圖片上傳效果
- jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程
- PHP+jQuery+Ajax實(shí)現(xiàn)用戶登錄與退出
- Jquery中$.post和$.ajax的用法小結(jié)
- php+ajax+jquery實(shí)現(xiàn)點(diǎn)擊加載更多內(nèi)容
- jQuery+AJAX實(shí)現(xiàn)無刷新下拉加載更多
相關(guān)文章
jQuery實(shí)現(xiàn)設(shè)置、移除文本框默認(rèn)值功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)設(shè)置、移除文本框默認(rèn)值功能,本文實(shí)現(xiàn)是類似html5 placeholder(空白提示)效果,正常時文本框有提示文字,當(dāng)文本框獲得焦點(diǎn)時變?yōu)榭瞻?需要的朋友可以參考下2015-01-01jQuery實(shí)現(xiàn)鼠標(biāo)移入顯示蒙版效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)移入顯示蒙版效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-01-01jquery調(diào)用wcf并展示出數(shù)據(jù)的方法
網(wǎng)上看了很多jquery調(diào)用wcf的例子,可能是主機(jī)的原因,我用的是gd主機(jī),所以都沒有成功,昨天自己搞了一天,終于成功了,現(xiàn)把方法和代碼和大家分享2011-07-07在IE 瀏覽器中使用 jquery的fadeIn() 效果 英文字符字體加粗
在IE 瀏覽器中使用 jquery的fadeIn() 效果 英文字符字體加粗的解決方法分享。2011-06-06jQuery.Callbacks()回調(diào)函數(shù)隊(duì)列用法詳解
這篇文章主要介紹了jQuery.Callbacks()回調(diào)函數(shù)隊(duì)列用法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery.Callbacks()回調(diào)函數(shù)隊(duì)列的功能、控制標(biāo)志含義與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-06-06jquery validate和jquery form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交
在ajax流行的時代,好像很少能看見傳統(tǒng)的同步提交表單方式了,是啊我們當(dāng)然要用更加給力的AJAX來實(shí)現(xiàn)異步無刷新提交表單,好了開始今天的jQuery之旅吧,今天我們來利用jquery.validate和jquery.form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交 ,需要的朋友可以參考下2015-08-08