第3.101課 上課 SpringMVC對Ajax異步請求的支持

3_101

SpringMVC對Ajax異步請求的支持

 異步請求概念

  Ajax異步請求介紹

 

AJAX: Ansyc Javascript And Xml (異步請求).

異步是指基於Ajax的應用與服務器通訊的方法。對於傳統的Web應用，每次用戶發送請求或向服務器請求得到新數據時，瀏覽器都會徹底丟棄當前頁面，而等待從新加載的頁面。在服務器徹底響應以前，用戶瀏覽器將是一片空白，用戶的動做必須中斷。異步是指用戶發送請求後，徹底無須等待，請求在後臺發送，不會阻塞用戶的當前活動，用戶無須等待第一次請求獲得徹底響應，就能夠當即發送第二次請求。簡單的說,異步請求不會刷新當前html頁面。

 

異步指的是服務器端響應數據的獲取方式。

 

同步：

 

異步：

 

  XMLHttpRequest異步請求

   異步&同步的區別

1.同步請求：

請求的過程：瀏覽器(當前的html頁面會丟棄) ---> http協議 ---> Web服務器(tomcat)

響應的過程：Web服務器(tomcat) ---> http協議 --> 返回一個新html頁面.

 

2.異步請求：

請求的過程：瀏覽器(當前的html頁面不會丟棄) ---> Ajax引擎(http協議) ---> Web服務器(tomcat)

響應的過程：Web服務器(tomcat) ---> 準備部分數據 --> Ajax引擎(http協議) --> DOM編程.

    異步表現爲網頁局部刷新

    同步表現爲網頁所有刷新

   發送異步請求的步驟

    1.建立發送異步請求的Ajax引擎對象

XMLHttpRequest：內置函數 (msie8+、firefox、chrome、opera).

var xhr = new XMLHttpRequest();

 

// msie7-

ActiveXObject: 內置函數

var xhr = new ActiveXObject("瀏覽器的版本號");

    2.調用xhr對象中的方法創建服務器的之間鏈接

// 第一個參數：請求方式(get|post)

// 第二個參數：請求URL

// 第三個參數：異步還同步。true: 異步請求中的異步；false: 異步請求中的同步. (主要是響應數據)

xhr.open("post|get", "請求的url", true|false);

    3.發送異步請求

xhr.send();

    4.獲取響應數據

xhr.onreadystatechange = function(){

if (xhr.readyState == 4){ // 讀取服務器端的響應數據完成

if (xhr.status == 200){ // 表明服務器響應正常

// 獲取響應文本

xhr.responseText;

}

}

};

 

readyState的五種狀態：

0：XMLHttpRequest對象尚未完成初始化。

1：XMLHttpRequest對象開始發送請求。

2：XMLHttpRequest對象的請求發送完成。

3：XMLHttpRequest對象開始讀取服務器的響應。

4：XMLHttpRequest對象讀取服務器響應結束。

 

status的狀態碼：

200：服務器響應正常。

400：沒法找到請求的資源。

401：訪問資源的權限不夠。

403：沒有權限訪問資源。

404：須要訪問的資源不存在。

405：須要訪問的資源被禁止。

407：訪問的資源須要代理身份驗證。

414：請求的URL太長。

500：服務器內部錯誤。

  jQuery框架的異步請求和處理

   $.ajax()

jQuery核心異步請求方法：

格式:

$.ajax(url, [settings]);

-- 第一個參數：請求URL

-- 第二個參數：settings是一個json格式js對象(異步請求設置對象).

 

$.ajax({

url : "", // 請求URL

type : "get|post", // 發送請求的方式

data : "key=value&key=value|{key:value,key:value}|[{key:value,key:value},{key:value,key:value}]", // 請求參數

dataType : "text|html|xml|json|script|jsonp", // 服務器端響應回來的數據類型

async : true|false, // 異步仍是同步

success : function(data){ // 異步請求成功須要回調的函數

// data : 響應數據(jquery已經處理好的響應數據)

},

error : function(XMLHttpRequest, textStatus, errorThrown){ // 異步請求的失敗

// XMLHttpRequest : 異步請求的核心函數

// textStatus : 文本狀態

// errorThrown : 錯誤緣由

}

});

   $.get()

//發送get請求

$.get(url, data, function(data, status){

// status(狀態碼): success 、error

// data : 響應數據

}, dataType);

 

說明：

第1個參數：請求URL

第2個參數：請求參數

第3個參數：回調函數

第4個參數：服務器端響應回來的數據類型

   $.post()

//發送post請求

$.post(url, data, function(data, status){

// status(狀態碼): success 、error

// data : 響應數據

}, dataType);

 

說明：

第1個參數：請求URL

第2個參數：請求參數

第3個參數：回調函數

第4個參數：服務器端響應回來的數據類型

 springMVC支持ajax異步請求和處理返回json數據

  1.在頁面引入jquery.js

 

  2.建立頁面元素

  3.定義異步提交表單

 

 

 

 

 

  4.springmvc服務器端代碼

 

 

 

 

 

  5.到依賴jar包