ajax的jquery寫法和原生寫法
一、ajax的簡介
Ajax被認為是(Asynchronous(異步) JavaScript And Xml的縮寫)。現在,允許瀏覽器與服務器通信而無須刷新當前頁面的技術都被叫做Ajax.
同步是指:發送方發出數據後,等接收方發回響應以後才發下一個數據包的通訊方式。
異步是指:發送方發出數據後,不等接收方發回響應,接著發送下個數據包的通訊方式 。
二、ajax的缺陷
AJAX大量使用了JavaScript和AJAX引擎,而這個取決於瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持,Mozilla雖然也支持AJAX,但是提供XMLHttpRequest的方式不一樣。所以,使用AJAX的程序必須測試針對各個瀏覽器的兼容性。
AJAX更新頁面內容的時候並沒有刷新整個頁面,因此,網頁的後退功能是失效的;有的用戶還經常搞不清楚現在的數據是舊的還是已經更新過的。這個就需要在明顯位置提醒用戶“數據已更新”。
對流媒體的支持沒有FLASH好。
一些手持設備(如手機、PDA等)現在還不能很好的支持Ajax。
form數據的序列化:
$(‘#submit‘).click(function(){ $(‘#form‘).serialize(); //會根據input裏面的name,把數據序列化成字符串;eg:name=yang $(‘#form‘).serializeArray(); //會根據input裏面的name,把數據序列化成數組;eg:[object]//註意:沒有name會獲取不到值 //下面兩種不是jQuery的方法 JSON.parse() //json字符串轉化為json對象 JSON.stringify() //json對象轉化為json字符串 });
三、ajax的四種type類型:
1、GET請求會向數據庫發索取數據的請求,從而來獲取信息,該請求就像數據庫的select操作一樣,只是用來查詢一下數據,不會修改、增加數據,不會影響資源的內容,即該請求不會產生副作用。無論進行多少次操作,結果都是一樣的。
2、與GET不同的是,PUT請求是向服務器端發送數據的,從而改變信息,該請求就像數據庫的update操作一樣,用來修改數據的內容,但是不會增加數據的種類等,也就是說無論進行多少次PUT操作,其結果並沒有不同。
3、POST請求同PUT請求類似,都是向服務器端發送數據的,但是該請求會改變數據的種類等資源,就像數據庫的insert操作一樣,會創建新的內容。幾乎目前所有的提交操作都是用POST請求的。
4、DELETE請求顧名思義,就是用來刪除某一個資源的,該請求就像數據庫的delete操作。
簡單的說就是
get理解為查詢 delete就是刪除 post就是新增 put就是更新數據
四、ajax的原生寫法:
window.onload = function(){ //XMLHttpRequest 對象 是ajax的基礎 //var xml = new XMLHttpRequest() 創建對象 //IE5/IE6 不支持XMLHttpRequest() 創建ActiveXObject() var xml; if(window.XMLHttpRequest) { xml = new XMLHttpRequest(); //創建對象 }else { xml = new ActiveXObject("Microsoft.XMLHTTP"); //IE5/IE6 }; //發送到服務器 XMLHttpRequest() open() send() xml.open("get","http://localhost:8080/info",true); xml.send(); //xml.setRequestHeader(‘Content-type‘,‘applicateion/json‘); //修改請求頭部 //xml.send(JSON.stringify({name:‘123‘,id:1})); //xml.send(string);string 用於post請求 //響應 xml.onreadystatechange = function(){ if(xml.readyState ==4 && xml.status==200){ //判斷readyState/status狀態 console.log(xml.responseText); //獲取字符串形式的響應數據 } } }
五、ajax的jquery寫法:
$.ajax({ type:"POST", //請求方式 get查詢 post增加 put修改 delete刪除 url:"http://localhost:8080/info",//請求路徑 async:true, //或false 是否異步 data:{name:‘ycg‘,age:25},
timeout:5000,//超時時間 dataType:‘json‘, //返回的數據格式:json/xml/html/script/jsonp/text beforeSend:function(xhr){
console.log(‘發送前‘);
}
success:function(data,textStatus,jqXHR){
console.log(‘成功‘);
}, error:function(error){ console.log(‘錯誤‘); },
complete:function(){
console.log(‘結束‘);
} })
ajax的jquery寫法和原生寫法