jQuery與Ajax以及序列化,jQueryAjax序列化

來源:互聯網
上載者:User

jQuery與Ajax以及序列化,jQueryAjax序列化

關於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?tags=car&tagmode=any&format=json&jsoncall back=?",function(data){//某些操作})})

//JSONP是個非官方協議,採用json與<script>標記結合的方式,主要用於web應用程式跨域

•$.ajax()方法 •這個方法是jQuery最底層的Ajax實現,所以理所當然更加強大以及複雜。

雖然它只有一個參數,但是這個參數對象包含的屬性非常多,不過都是可選的。以下列出所有屬性: • url:預設當前頁地址,也可以手動寫請求的地址

•type:預設為GET,也可以寫POST
•timeout:佈建要求逾時時間(毫秒)
•data:發送的資料
•dataType:預期伺服器返回的資料類型。
•beforeSend:發送前的調用的函數,如果次函數返回false將取消本次ajax請求。

function(XMLHttpRequest){//XMLHttpRequest是唯一的參數this;//調用本次Ajax請求時傳遞的options參數} 

•complete:請求完後,無論成功還是失敗都調用。

function(XMLHttpRequest,textStatus){//textStatus描述成功請求類型this;//調用本次Ajax請求時傳遞的options參數}

•success:請求成功後的回呼函數

function(data,textStatus){//data為成功返回的資料this;//調用本次Ajax請求時傳遞的options參數}

•error:請求失敗調用的函數

function(XMLHttpRequest,textStatus,errorThrown){// textStatus為錯誤資訊,errorThrown為捕獲的錯誤對象,通常只有其中一個包含資訊this;//調用本次Ajax請求時傳遞的options參數} 

•global:預設為true。表示是否觸發全域Ajax事件。
•序列化元素 •serialize()方法 •它能夠將DOM元素內容序列化為字串

//不僅可以序列化整個表單,也可以序列化單個元素,並且都是自動編碼過的$.post("myurl",$("#form1").serialize(),function(data,textStatus){$("#resText").html(data);})

•serializeArray()方法 •它能夠將DOM元素內容序列化為JSON格式
•$.param()方法 •這是serialize方法的核心,用來對一個數組或對象按照索引值對進行序列化

var obj={a:1,b:2,c:3};var k=$.param(obj);//輸出為a=1&b=2&c=3 

•jQuery中的Ajax全域事件 •ajaxStart()方法:當Ajax請求開始就觸發
•ajaxStop()方法:當Ajax請求結束就觸發

<div id="loading">載入中...</div>$("#loading").ajaxStart(function(){$(this).show();//ajax開始請求就顯示載入中});$("#loading").ajaxStop(function(){$(this).hide();//ajax開始結束就隱藏載入中}); 

•ajaxComplete():當Ajax請求完成就觸發
•ajaxError():當Ajax請求發生就觸發,捕捉到的錯誤可以作為最後一個參數傳遞
•ajaxSend():當Ajax請求發送前就觸發
•ajaxSuccess():當Ajax請求成功就觸發
•如果想使某個Ajax請求不受全域事件的影響,可以在$.ajax中將global屬性設定為false,這個在前面已經講過了。當然也可以在ajax請求前:

$.ajaxPrefilter(function(options){//每次發送前請求options.global=true;})

好吧,寫完了。最後順帶提一下,setTimeout("doMethod()",4000);為4s後執行doMethod這個函數。

//一個簡單的定時發送功能function updateMsg(){$.post("myurl",{time:timestamp},function(xml){//do something});setTimeout("updateMsg()",4000);}
您可能感興趣的文章:
  • jquery序列化form表單使用ajax提交後處理返回的json資料
  • jQuery中ajax的post()方法用法執行個體
  • jQuery中Ajax的get、post等方法詳解
  • jquery+ajax實現跨域請求的方法
  • jquery中ajax使用error調試錯誤的方法
  • PHP+jQuery+Ajax實現多圖片上傳效果
  • jQuery Ajax調用WCF服務詳細教程
  • PHP+jQuery+Ajax實現使用者登入與退出
  • Jquery中$.post和$.ajax的用法小結
  • php+ajax+jquery實現點擊載入更多內容
  • jQuery+AJAX實現無重新整理下拉載入更多

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.