Ajax基本概念和原理
1.什麼是AJAX?
AJAX是一種無需重新加載整個網頁的情況下,能夠與更新部分網頁技術
·AJAX全稱爲"Asynchronous JavaScript and XML"(異步JavaScript和XML),是一種創建交互式網頁應用的網頁開發技術
·不是一種新技術是如下幾種技術的組合應用
HTML/XHTML——主要的內容表示語言。
CSS——爲XHTML提供文本格式定義。
DOM——對已載入的頁面進行動態更新。
XML——數據交換格式。
XSLT——將XML轉換爲XHTML（用CSS修飾樣式）。
XMLHttp——用XMLHttpRequest來和服務器進行異步通信，是主要的通信代理。
JavaScript--用來編寫Ajax引擎的腳本語言
<1>.爲什麼需要AJAX
有時候需要將本次的響應結果和前面的響應結果內容在同一個頁面展現給用戶
解決: 1.在後臺服務器端將多次響應的內容重新拼接成一個jsp頁面響應(單是這樣的話會造成很多內容會被重複的響應)
2.使用AJAX技術
<2>.AJAX訪問原理
2.XMLHttpRequest對象
當需要異步與服務器交換數據時,需要XMLHttpRequest對象來異步交換。XMLHttpRequset對象的主要屬性有:
·onreadystatechange--每次狀態改變所觸發事件的事件處理程序
·responeText--從服務器進程返回數據的字符串形式
·responeXML--從服務器進程返回的Dom兼容的文檔數據對象
·status--從服務器返回的數字代碼如404(未找到)和200(已就緒)
·status Text--伴隨狀態碼的字符串信息
·readyState--對象狀態值。對象的狀態值有以下幾個
·0-(未初始化)還沒有調用send()方法
·1-(載入)已調用send()方法,正在發送請求
·2-(載入完成)send()方法執行完成
·3-(交互)正在響應內容解析完成,可以在客戶端調用了
注意:對於readyState的狀態值,其中"0"狀態是在定義後自動具有的狀態值,而對於成功訪問的狀態(得到信息)我們大多數採用"4"進行判斷
AJAX的核心就是JavaScript對象XmlHttpRequest,這個對象爲向務器發送和解析服務器響應提供了流暢的接口。XmlHttpRequest可以使用JavaScript向服務器提出請求處理響應,而不阻塞用戶
XHR對象由IE5率先引入,在IE5中XHR對象是通過MSXML庫中一個ActuiveX對象實現的,根據I版本不同可能會遇到不同XHR對象,而IE7+與其他現代瀏覽器均支持原生的XHR對象在這些瀏覽器中我們只需要使用XMLHttpRequest構造函數就可以創造XHR對象的函數方法
var ajax;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else{
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
<2>.XMLHttpRequest對象用法
XMLHttpRequest對象有兩個重要的方法open和send
1.open(method,url,async)
規定請求的類型,URL以及是否異步吃力請求
method:請求類型 get||post
url:文件在服務器上的位置
async:true(異步)或false(同步)
2.send(String)
將請求發送到服務器
String:僅用於post請求
ajax.open('get','AjaxDemo01/Ajaxdemo.jsp',true);
ajax.send(null);
注意:open方法
URL是相對於當前頁面的路徑，也可以似乎用絕對路徑。
open方法不會向服務器發送真正請求，它相當於初始化請求並準備發送。
只能向同一個域中使用相同協議和端口的URL發送請求，否則會因爲安全原因報錯。
3.使用jQuery的方式來實現ajax
<1>使用$.ajax({})的方式
使用:
function fun(){
$.ajax({
url:"UserServlet",
type:"get",
data:{"username":"jack","age":23},
success:function(data){
alert(data);
},
error:function(){
alert("出錯了");
},
dataType:"text"
});
}
<2>$.get():發送get請求
*語法:$.get(url,[data],[callback],[type])
url:請求路徑
data:請求 參數
callback:回調函數
type:響應結果的類型
4.JSON對象
<1>.概念
JavaScript Object Notation JavaScript對象表示法--
Person p=new Person(); p.setName("張三"); p,setAge(23); p.setGender('男');
var p={"name":" 張三","age":23,"gender":"男"};
JSON多用於存儲和交換文本信息的語法
進行數據的傳輸
JSON比XML更小,更快,更易解析
<2>.語法
1.基本規則:
數據在名稱值/對中:在JSON中數據是由鍵值對創建的
*鍵用引號(單雙都可以)引起來,也可以不適用引號
*值得取值類型:
1.數字(整數和浮點型)
2.字符串(在雙引號中)
3.邏輯值(true和false)
4.數組(在方括號中){"person"[{""},{""}]}
5.對象(在花括號中){"address"{"province":"山西"}}
6.null
數據由逗號分開:多個鍵值對由逗號分隔
花括號保存對象:使用{}來定義json格式
方括號保存數組:[]
<script>
var person = {"name" : "jack","age" : 23,"gender" : true};
var persons = {
"persons" : [ {"name" : "張三","age" : 23,"gender" : true},
{"name" : "李斯","age" : 23,"gender" : true},
{"name" : "王五","age" : 23,"gender" : false} ]};
alert(persons);
var ps = [ {"name" : "張三","age" : 23,"gender" : true},
{"name" : "李斯","age" : 23,"gender" : true},
{"name" : "王五","age" : 23,"gender" : false} ];
alert(ps);
</script>
<2>.獲取數據
1.json對象.鍵名
var name=person.name;
2.json對象["鍵名"]
var name=person["name"];
3.數組對象[索引]
var name1=persons.persons[2].name;
ps[1].name
<3>.json遍歷
<script>
var person = {"name" : "jack","age" : 23,"gender" : true};
var ps = [ {"name" : "張三","age" : 23,"gender" : true},
{"name" : "李斯","age" : 23,"gender" : true},
{"name" : "王五","age" : 23,"gender" : false} ];
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for ( var key in p) {
alert(key + ":" + p[key]);
}
}
</script>
<4>.JSON數據和Java對象的相互轉化
*JSON解析器:常見的解析器 Jsonlib,Gson,fastjson,jackson
1.JSON轉爲java對象
1>.使用步驟
1).導入jackson的相關的jar包
2).創建jackson核心對象 ObjectMapper
3).調用ObjectMapper的相關方法進行轉換
1*.readValue(json字符串數據,Class);
2.java對象轉化爲json
1>使用步驟
1).導入jackson的相關的jar包
2).創建jackson核心對象 ObjectMapper
3).調用ObjectMapper的相關方法進行轉換
2>註解:
1).@JsonIgnore:排除屬性
2).@JsonFormat:屬性值格式化
@JsonFormat(pattern="yyyy-MM-dd")
3>複雜Java對象的轉換
1).List:數組
2).Map:對象格式一致
json(重點)方便實用其實就是講述按照json的格式拼接好的字符串,方便實用eval方法將接受的字符串數據直接轉換爲js對象
json格式:
var 對象名={
屬性名:屬性值;
屬性名:屬性值;
....
}
json是什麼?
JSON是一種輕量級的數據交換格式。適用於ajax應用程序的一種有效格式,它使js對象和字符串值之間得以快速轉化JSON同時也是一種傳遞對象的語法,對象可以是name/value對,數組和其他對象
JSON傳遞的對象爲函數時候必須是在js中進行傳遞,非js語言沒有辦法辨別它的語法的
JSON是基於文本的數據格式,相對於基於二進制的數據,所以JSON在傳遞的時候是傳遞符合JSON這種格式的字符串,而不是一個對象
JSON特徵及用途:
JSON是一種格式,基於文本,優於量級,用於交換數據
·一種數據格式
·基於文本的數據格式
·輕量級的數據格式
相同的數據以JSON的格式佔據的帶寬更小,這裏有大量數據請求和傳遞的情況下有明顯優勢的
·被廣泛地用於數據交換
書寫格式:
名稱/值對
名稱/值對組合中的名稱寫在前面(在雙引號中),值對寫在後面,中間用冒號隔開,2個組合之間用逗號隔開,其中值可以是:數字整數活浮點數,字符串(在雙引號中),邏輯值(true和false),數組(在方括號中),對象(在花括號中),null
使用方式: var josn={"name":"myname","password":123456};
關於客戶端和服務器的渲染
1.服務器端和客戶端不會一起崩
2.前後端分離的基本
