最近重溫了下ajax與json技術,發現又收穫了不少,這裏記錄下,我是一隻接觸編程8個月的小白,如有錯誤,還請指出,後面直接上乾貨。
首先,爲什麼要學習ajax與ajax的優勢?
以我自己的理解,其實ajax就是方便數據從前端傳遞到後端。在java中,主要有兩種。第一種就是通過html的form表單,通過submit直接傳輸到後端,但是這個提交有一個壞處,就是服務器端(servlet端)返回數據的話只能是重新跳轉一個頁面(requet.getRequest.Dispatcher(url)。forward(request,response)或重定向response.sendRedirect(url))來進行處理,這樣會很不方便,如果涉及要用戶登錄驗證什麼的話豈不是要重新跳轉個頁面來判斷用戶是否輸入正確?這裏的用戶體驗就很不好,而ajax則實現了異步請求,完美的解決了這個問題。
前端數據傳輸到後端的通用特點:
前端數據傳輸到後端無非要三點:請求方式、請求地址、傳輸的參數(數據)還有就是接收服務器返回的數據進行處理。form表單中的method,action,還有input中的name屬性就是來傳遞這些東西的,而ajax中則更方便
eg:
$.ajax({
type:"post",//請求方式
url:"control.jsp",//請求地址
data:json,//傳輸的參數,json格式的數據
success:function(data){//服務器返回的數據
}
});
這就是jquery的ajax請求的格式。後面會談到js的ajax請求,jquery不過是將js的ajax請求封裝了下而已,主要是解決了瀏覽器的兼容問題。
js中的ajax請求:
直接上最簡單的格式,不封裝
var xhr = new XMLHttpRequest();//定義一個XMLHttpRequest對象,這裏提一句,ajax與form傳輸參數都需 要滿足http協議,ajax請求的就是一個XMLhttpRequest,傳輸的是XML的數據,只是XML和json是可以相互轉換的。
xhr.open("請求方式",url,true);//url包括地址和參數,具體參數寫法必須username="zz"?password="12345",中間用?隔開,而true表示是異步請求,如果是false是同步請求。
xhr.onchangereadystate = function(){
};//對返回的數據進行處理,這裏包括返回的狀態碼等 xhr.readyState == 4,表示請求完美通過,還有1,2,3等,例如找不到服務器等錯誤,服務器關閉等請度娘。
xhr.send();必須有這一句,表示開始請求了,當然還有滿足兼容性等問題,需要用到AxtivexObject對象(ie8以下,ie8以上都是XMLHttpRequest請求),
不難看出js的請求是多麼麻煩,所以建議還是使用jquery的ajax請求方便的多。這裏說一句,所謂的請求方式無非是解決數據傳輸的安全,大小等問題,例如get請求是直接在url欄裏可以看到的,而post不能,而且get請求傳輸的數據太小,post可以傳輸大的,get一般用於直接頁面跳轉等,post用於需要傳輸參數時,並且相對比較安全的。
json數據的解析?
json是什麼?其實就是一種數據傳輸,java中的map就是一種鍵值對,js中也經常用到,json的格式就是
var json = {key:value,key1:value1,key2:value2}就是這樣的格式,在js的規範要求中,key是不需要用雙引號或單引號的。
例如傳輸賬號和密碼可以定義json:
var data = {username:uname,password:pwd};
java後臺的數據返回(json)?
java後臺返回數據返回的都是String流,我纔開始玩ajax的時候,java返回一個對象的時候後臺一直收到的是一個String流
這裏就涉及到兩點:服務器序列化成json格式,ajax收到的是String流,將其轉換成Json對象,
服務器可以利用一個json的包來序列化對象,而客戶端接收到後可以eval一下,這裏附上ajax對收到的數據的處理
$.ajax({
type:"post",//請求方式
url:"data.jsp",//請求地址
data:params,//傳輸的數據,參數
success:function(data){//服務器返回的話(數據)
var jdata = data.trim();
jdata = eval("("+ jdata +")");
}
});
data.trim()是去除返回數據的空格,自己嘗試可以看到這是一個enter。這樣就可以處理該對象了
繁瑣的json處理:
例如一個json:
var json = {
name:uname,
address:{北京,成都,綿陽},
teacher:{student1:"小明",student2:"小紅",student3:"小可"}
}
這個json就比較麻煩,但是如果ajax收到這個json怎樣處理呢?利用數組
var name = json.name//去到uname
var address = [];
for(var i; i < json.address.length;i++){
address[i] = json.address[i];
}//賦值唄,將address的值取出來
var student1 = json.teacher.student1;//取到小明
var student2 = json.teacher.student2;//取到小紅
var student3 = json.teacher.student3;//取到小可
其實無非就是化繁爲簡。
注:小白一枚,第一次發文章,也是總結了這兩天看到的,如有錯誤還請不吝指出,感激之至。