Ajax 技術應用

1 Ajax 簡介

1.1 Ajax是什麼

Ajax (Asynchronous JavaScript and XML) 是一種Web應用技術,能夠藉助客戶端腳本(javascript)與服務端應用進行異步通信，獲取服務端數據之後,能夠進行局部刷新。進而提升數據的響應和渲染速度。

1.2Ajax技術應用場景

1）Ajax技術最大的優點就是底層異步，而後進行局部刷新，進而提升用戶體驗，這種技術如今在不少項目中都有很好的應用。
2）Ajax能夠僅向服務器發送並取回必要的數據，並在客戶端採用JavaScript處理來自服務器的響應。這樣在服務器和瀏覽器之間交換的數據大量減小，服務器響應的速度就能夠加快。
劣勢是：不能之間進行跨域訪問

2 Ajax 快速入門

2.1請求響應過程分析

全部的Ajax請求都會基於DOM(HTML元素)事件，，經過XHR(XMLHttpRequest)對象實現與服務端異步通信局部刷新。

2.2Ajax應用的編程步驟以下

1）基於dom事件建立XHR對象(XMLHttpRequest對象)
2）註冊XHR對象監聽狀態，經過回調函數（callback）處理狀態信息
3）建立於服務端的鏈接
4）發送異步請求實現與服務端的通信

2.3Ajax入門代碼簡易實現

業務描述,設計以下頁面,在頁面上點擊Get Request按鈕時,向服務端發送異步請求獲取服務端數據,而後將響應結果更新到頁面上.

2.3.1第一步服務端代碼設計

**
package com.cy.ajax.controller;
@Controller
@RequestMapping("/")
public class AjaxController {
 @RequestMapping("doAjax01UI")
 public String doAjax01UI() {
 return "ajax-01";
 }
 //處理ajax請求的服務端設計
 @RequestMapping("doAjaxGet")
 @ResponseBody //將方法返回值以字符串形式進行輸出
 public String doAjaxGet() throws Exception{
System.out.println("==doGet()==");
 //Thread.sleep(3000);//模擬耗時操做
 return "Ajax Get request result";
 }
}

2.3.2客戶端代碼設計

客戶端頁面關鍵dom元素設計

<!-- Ajax方式的異步請求測試 -->
 <fieldset> <!-- 分組設置 -->
 <legend>異步請求</legend>
 <button onclick="doAjaxGet()">Get Request</button>
 <span id="ajaxResultId">loading data ....</span>
 </fieldset>

客戶端頁面中關鍵Ajax代碼設計與實現

//Ajax方式的請求
 function doAjaxGet(){//錯誤調試:debugger,console.log(),排除法
 //1.建立XHR對象
 var xhr=new XMLHttpRequest();
 //2.設置狀態監聽(將服務端響應的結果更新到ajaxResultId位置)
xhr.onreadystatechange=function(){
 //console.log(xhr.readState);  if(xhr.readyState==4&&xhr.status==200){
  console.log(xhr.responseText);
document.getElementById("ajaxResultId").innerHTML=xhr.responseText;
  }
 };
 //3.創建鏈接
xhr.open("GET","http://localhost/doGet",true);//true表示異步(底層會啓動線程與服務端通信)
 //4.發送請求
 xhr.send();
}

3 Ajax技術進階實現

3.1Ajax關鍵代碼的封裝

在實際編程過程當中咱們一般會封裝代碼共性。提取代碼特性，而後來提升代碼的可重用性。例如：
第一步：封裝Ajax Get請求，關鍵代碼分析以下：

function doAjaxGet(url,params,callback){
 //1.建立XmlHttpRequest對象
 var xhr=new XMLHttpRequest();
 //2.設置狀態監聽，監聽XmlHttpRequest對象與服務端通信的過程(例如鏈接是否創建，請求是否在處理，響應是否已產生)
xhr.onreadystatechange=function(){//callback(回調函數)
 //基於xhr對象獲取的通信狀態，對響應數據進行處理
 //readyState狀態說明
 //0：未初始化，還沒有調用open() 方法
 //1：啓動。已經調用open() 方法，但還沒有調用send() 方法
 //2：發送。已經調用send() 方法，但還沒有接收到響應
 //3：接收。已經接收到部分響應
 //4：完成。已經接收到所有響應數據，並且已經能夠在客戶端使用了
if(xhr.readyState==4&&xhr.status==200){//500表示服務端出錯了
  //服務端響應的結果會傳遞給XHR對象，咱們能夠藉助responseText獲取響應結果
  callback(xhr.responseText);
 }
 }
 //3.建立與服務端的鏈接
xhr.open("GET",url+"?"+params,true);//true表示異步
 //4.發送請求
 xhr.send(null); //Get請求，send方法不傳內容
 //5.對響應結果進行處理(在回調函數中處理)。
}

第二步：封裝Ajax Post請求

function doAjaxPost(url,params,callback){
//1.建立XmlHttpRequest對象
var xhr=new XMLHttpRequest();
//2.設置狀態監聽，監聽XmlHttpRequest對象與服務端通信的過程.
xhr.onreadystatechange=function(){//callback(回調函數)
//基於xhr對象獲取的通信狀態，對響應數據進行處理
if(xhr.readyState==4&&xhr.status==200){//500表示服務端出錯了
//服務端響應的結果會傳遞給XHR對象，
 //咱們能夠藉助xhr.responseText獲取響應結果
callback(xhr.responseText);
}
}
//3.建立與服務端的鏈接
xhr.open("POST",url,true);//true表示異步
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.發送請求
xhr.send(params); //post請求將參數寫到send方法
//5.對響應結果進行處理(在回調函數中處理)。
}

第三步：在業務方法中應用封裝好的代碼