Ajax介紹

什麼是AJAX?

AJAX(Asynchronous Javascript And XML),即異步的js和xml.

用途 : 不從新刷新整個頁面的狀況下,與服務器交互並局部更新頁面內容.

實現AJAX的兩個步驟

　　1.前端用JS寫AJAX代碼

　　2.後端響應AJAX請求

一.前端AJAX代碼

AJAX有兩種寫法,分別是:

　　1).用javascript寫

　　2).用js框架寫(如jQuery)

AJAX主要用兩種請求方式:

　　1).GET ==> @請求參數寫在url後,不安全

　　　　　　　  @發送數據量有限制(url長度有限,好比Chrome的url最大長度爲8182字節) 

　　　　　　　  @會獲取緩存結果,由於get通常作查詢操做,沒必要每次都與數據庫鏈接(解決方法,用Math.random()在url地址後加一個隨機數參數)

　　2).POST ==> @比GET安全,請求參數放在請求body中

　　　　　　　　 @沒有長度限制

　　　　　　　　 @POST不能使用緩存(由於通常作刪改操做,必須與數據庫交互)

I.首先用JS代碼寫AJAX請求

展現代碼以前,先介紹實現AJAX的核心對象window.XMLHttpRequest,用於在後臺與服務器交換數據

XMLHttpRequest的屬性們:

　　onreadystatechange : 用於存儲(回調)函數，每當 readyState 屬性改變時，就會調用該函數.  

　　readyState : 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化.0: 請求未初始化1: 服務器鏈接已創建2: 請求已接收3: 請求處理中4: 請求已完成,且響應已就緒

　　status : 請求狀態 200: "OK"  404: 未找到頁面

1.使用get請求方式

有3個步驟
function useGet() {
		//1.建立XMLHttpRequest對象
		var xmlhttp;
		if (window.XMLHttpRequest)
		{
			//  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
			xmlhttp=new XMLHttpRequest();
		}
		else
		{
			// IE6, IE5 瀏覽器執行代碼
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		//2.設置得到響應後的操做
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				document.getElementById("result").value=xmlhttp.responseText;
			}
		}
		//3.設置請求信息(open()),發送請求(send())
		//請求方法用get時,須要把請求參數寫在url中(?a=1&b=2).  true表示開啓異步
		xmlhttp.open("GET", "${pageContext.request.contextPath }/test/ajaxTest?a=1&b=2", true);
		xmlhttp.send();
	}

擴展 : 　　

　　回調函數 : 用於存入主函數(useGet())中.讓主函數調用的函數即回調函數,在上邊代碼中xmlhttp.onreadystatechange=後面的function內容就是回調函數,回調函數是在主函數執行完後才執行

2.使用post請求方式

 使用post請求的寫法和get請求的寫法稍有不一樣,多一個setRequestHeader()函數來設置請求頭的Content-type,由於get方法中,請求參數不在請求體中,因此get方法無需設置Content-type,而post方法須要設置

//設置異步請求信息,post請求中,請求參數無需寫在url中
xmlhttp.open("POST","${pageContext.request.contextPath }/test/getRealName",true);
//設置請求頭(application/json表示發送的數據是json格式的字符串)
xmlhttp.setRequestHeader("Content-type","application/json; charset=UTF-8");
//發送請求,  JSON.stringify()用於把js對象轉換爲字符串
xmlhttp.send(JSON.stringify({"username" : username}));
//順便一提,JavaScript中把字符串轉換成JSON對象的方法
//JSON.parse(str)

　　

II.後端響應AJAX請求的代碼

以SpringMVC爲例

首先要注意幾點 : 

　　1).springMVC中Ajax請求無需爲Controller方法return跳轉地址.由於異步請求仍是在原頁面局部刷新,並不會跳轉頁面.因此即便給方法返回類型設置爲void也沒問題!

//方法返回類型設置爲void也無妨
@RequestMapping("/ajaxTest")
public void ajaxTest(int num1, int num2, HttpServletResponse response) {
	try {
		//設置字符集編碼
		response.setCharacterEncoding("UTF-8");
		//建立PrintWriter對象,
		PrintWriter writer = response.getWriter();
		Integer resInteger = num1*num2;
		//用PrintWriter對象的write()方法將數據寫入HTTP response body中,JS中XMLHttpRequest對象的responseText會接收到該數據
		writer.write(resInteger.toString());
	} catch (IOException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
}

　　2).@ResponseBody和@RequestBody的用法要了解

	使用位置	做用
@ResponseBody	Controller層方法的上邊	使用該註解後,方法的返回結果將直接寫入響應體(HTTP response body)中, 而再也不走視圖解析器(把返回值解析爲跳轉路徑)
@RequestBody	Controller層方法的參數類型前	將請求體的數據使用HttpMessageConverter解析,而後封裝到形參上

 

　　

 

 

　　

 

 

 在AJAX中,主要使用@ResponseBody把數據轉換爲JSON格式返回給前端,@RequestBody把前端傳入的JSON格式數據封裝到JavaBean中(配合jackson-databind實現)

 

　　3).前臺發送json格式數據時,必須引入jackson-databind,用於把接受到的json格式數據轉化爲POJO

    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.0</version>
    </dependency>

後臺代碼實例 : 

@RequestMapping("/getRealName")
@ResponseBody  //設置@ResponseBody後,該方法再也不走視圖解析器,即便返回String也不會被視圖解析器攔截
public User result1(@RequestBody User user) {  //@RequestBody把請求體中的數據封裝到POJO中
	User u = ts.getRealName(user);
　　　　　//返回User類型對象,會被自動解析成JSON格式字符串併發回給前端
	return u;
}

　　

是否使用@RequestBody和@ResponseBody看你本身的需求,用不到的話就沒必要使用.

 

f