ajax的基本使用

1.什么是ajax?

ajax(異步 javaScript xml）能夠刷新網頁局部數據而不是刷新網頁。

2.如何使用ajax?

第一步，創建xmlHttpRequest對象 var xmlHttpRequest = new XmlHttpRequest();

var xhttp;
		if (window.XMLHttpRequest) {
			//現代主流瀏覽器
			xhttp = new XMLHttpRequest();
		} else {
			// 針對瀏覽器，比如IE5或IE6
			xhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

第二步,xmlHttpRequest對象的open()和send()方法發送給服務器

xhttp.open("get", "${pageContext.request.contextPath}/emps", true);
          
 xhttp.send();

open(）方法中的幾個參數分別是open(method,url,async)

method 是ajax的請求類型 get或者post請求

url 是請求的url 統一資源標識符

async是是否同步或者異步 true 或者 false

send()方法 發送出請求

第三步,使用xmlhttprequest對象的responseText或responseXML屬性獲得服務器的響應

document.getElementById("demo").innerHTML = xhttp.responseXML;

第四步,onreadystatechange是從 0 到4,0表示請求未被初始化 1表示服務器連接成功 2表示請求被服務器接收 3表示處理請求 4表示請求處理完成 並且准備響應

readyState屬性有多個狀態碼 就是請求狀態碼 200表示請求完成 

xhttp.status == 200 && xhttp.onreadystatechange==4　　

這是傳統的js的ajax寫法，現在在jquery中ajax的寫法為這樣的

 在JQuery中的寫法應該為這樣的

$.ajax({
    type: "",
    url: "",
    data: $('#someForm').serizlize(),
    success: function ( data ) {}
    timeout: 15000,
    error: function ( data ) {}
})

　由於JQuery中隊JavaScript進行了大量底層封裝，所以這個封裝的思路是

了解內部常見參數

type :是請求的方法 常見的有get 和post請求

url:請求的路徑

data:請求傳遞的數據 這個地方使用了form表單數據序列化 

success：請求成功調用什么方法 

timeout設置超時時間

error:請求失敗調用什么方法

這里是我自己寫的ajax的jaquery版本使用

$.ajax({
			url : "${pageContext.request.contextPath}/emps",
			data : "pn=" + pn,
			type : "get",
			async : true,
			success : function(result) {
				console.log(result);
				//1.解析員工數據
				build_emps_tables(result);
				//2.解析並顯示分頁信息
				build_page_info(result);

				build_page_nav(result);
			}
		});