JavaWeb學習——Ajax

一、Ajax概述
  1.什麼是同步,什麼是異步
  同步現象:客戶端發送請求到服務器端,當服務器返回響應之前,客戶端都處於等待卡死狀態
  異步現象:客戶端發送請求到服務器端,無論服務器是否返回響應,客戶端都可以隨意做其他事情,不會被卡死
  2.Ajax的運行原理
  頁面發起請求,會將請求發送給瀏覽器內核中的Ajax引擎,Ajax引擎會提交請求到服務器端,在這段時間裏,客戶端可以任意進行任意操作,直到服務器端將數據返回給Ajax引擎後,會觸發你設置的事件,從而執行自定義的js邏輯代碼完成某種頁面1 功能。
ajax異步訪問與普通訪問的區別
二、js原生的Ajax技術(瞭解)
  js原生的Ajax其實就是圍繞瀏覽器內內置的Ajax引擎對象進行學習的,要使用js原 生的Ajax完成異步操作,有如下幾個步驟:
1)創建Ajax引擎對象
2)爲Ajax引擎對象綁定監聽(監聽服務器已將數據響應給引擎)
3)綁定提交地址
4)發送請求
5)接受響應數據
示例代碼
  注意1:如果是post提交,在發送請求之前設置一個頭

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

注意2:所有異步訪問都是通過ajax引擎

三、json數據格式
  1.json是一種與語言無關的數據交換的格式,作用:
    使用ajax進行前後臺數據交換
    移動端與服務端的數據交換
  2.Json的格式與解析
    1)對象格式:{“key1”:obj,“key2”:obj,“key3”:obj…}
    2)數組/集合格式:[obj,obj,obj…]
    注意:對象格式和數組格式可以互相嵌套,json的key是字符串 jaon的value是Object
    json的解析:json是js的原生內容,也就意味着js可以直接取出json對象中的數據
  
  3.Json的轉換插件
    將java的對象或集合轉成json形式字符串
      json的轉換插件是通過java的一些工具,直接將java對象或集合轉換成json字符串。
      常用的json轉換工具有如下幾種:
        1)jsonlib
        2)Gson:google
        3)fastjson:阿里巴巴

四、Jquery的Ajax技術
   jquery是一個優秀的js框架,自然對js原生的ajax進行了封裝,封裝後的ajax的操 作方法更簡潔,功能更強大,與ajax操作相關的jquery方法有如下幾種,但開發中 經常使用的有三種:
   1)$.get(url, [data], [callback], [type])
   2)$.post(url, [data], [callback], [type])
   其中:
     url:代表請求的服務器端地址
     data:代表請求服務器端的數據(可以是key=value形式也可以是json格式)
     callback:表示服務器端成功響應所觸發的函數(只有正常成功返回才執行)
     type:表示服務器端返回的數據類型(jquery會根據指定的類型自動類型轉換)
      常用的返回類型:text、json、html等
    例如:

$.get(//$.post(
	"/product/listProduct",                         //url
	{ name: "John", time: "2pm" },                  //data
	function(data){                                 //callback     
    	alert("Data Loaded: " + data);
  	},
  	"json"                                          //type        
)                     

3)$.ajax( { option1:value1,option2:value2... } );
   常用的option有如下:
     async:是否異步,默認是true代表異步
     data:發送到服務器的參數,建議使用json格式
     dataType:服務器端返回的數據類型,常用text和json
     success:成功響應執行的函數,對應的類型是function類型
     type:請求方式,POST/GET
     url:請求服務器端地址

 $.ajax({
	url: "/product/listProduct",
	async: true,
    data:{ name: "John", time: "2pm" },  
    success: function(data){                          
    	alert("Data Loaded: " + data);
  	},
  	error:function(){
  		alert("請求失敗!");
  	},
  	dataType:"json"
 });

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章