小天帶你瞭解ajax

時間 2019-11-30

標籤瞭解 ajax 欄目 Ajax 简体版

原文原文鏈接

Ajax (asynchronous javascript and xml)

　　在沒有ajax的時候，頁面每次提交數據都必須銷燬當前的頁面，從新從服務器端得到一個頁面。這樣作不只影響用戶體驗，並且會致使流量的浪費（都是錢啊）。爲了不這種狀況，google在2005年經過其Goggle Suggest使AJAX變得流行起來。javascript

(1)ajax的定義

　　在小天看來，ajax的本質就是利用瀏覽器提供的一個特殊的對象:XMLHttpRequest對象，也能夠稱爲AJAX對象，向服務器發送異步請求。服務器返回部分數據（一般不須要返回完整頁面），這樣的話，用戶的操做就不會被打斷，也就避免了多餘流量的浪費。html

(2)獲取ajax對象

　　首先，既然要利用XMLHttpRequest對象，固然要獲取這個對象。可是，因爲IE的一些黑歷史，仗着本身當年的市場佔有率高，就是莽 rua！它的ajax對象叫ActiveXObject。要區分瀏覽器來獲取這個對象。可是jquery等js框架已經將這一步集成了。如今很難想象有人寫js會不用jquery。因此這裏只是大體瞭解一下就行了。辣雞IE。壯哉我大chrome。java

function getXhr(){
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	} else {
		xhr = new ActiveXObject("Microsoft.XMLHttp");
	}
	return xhr;
}

　　很難想象當年的IE有多大的勇氣纔敢逆時代前進。這樣不兼容的例子真的不少不少，致使開發者都想放棄IE，更不用說用戶了。
　　弱小和無知不是生存的障礙，傲慢纔是。jquery

（3）ajax對象的幾個重要的屬性

　　a.onreadystatechange:用來綁定一個事件處理函數，用來處理readystatechange事件。
　　注：當ajax對象的readyState屬性值發生了任何改變（好比從0變成了1），就會產生readystatechange事件
　　b.readyState:有五個值（0，1，2，3，4），表示ajax對象與服務器通訊的狀態。其中，當值爲4時，表示AJAX對象已經得到了服務器返回的全部數據。
　　哈哈，小天以爲，記住4就夠啦。其餘的不太懂。
　　c.responseText:得到服務器返回的文本數據。
　　d.responseXML:得到服務器返回的XML數據。
　　e.status:得到狀態碼。（好比說200表示成功，404啥的。。500啥的。。不想碰到啊又想到了被搶課支配的恐懼）web

（4）編程步驟

　　step1.得到ajax對象。（參見（2））
　　step2.發送請求。
　　有兩種請求get或者post請求，其中區別優劣小天就不贅述了。
　　情形一發送get請求
　　a.調用ajax對象的open方法
　　xhr.open(請求類型,請求地址,同步/異步（true表示異步）);
　　ps: ajax也能夠發送同步請求，通俗的說，就是瀏覽器會鎖定這個頁面，用戶感受不到這個頁面的刷新，可是在服務器作出響應以前，根本不能夠對頁面作出任何的操做。如今已經不多用ajax作同步處理了。拿一個異步的東西作同步，那不是傻嗎。( ▼-▼ )。
　　eg:
　　　　xhr.open('get','check_uname.do?name=tom',true);
　　b.綁定事件處理函數
　　xhr.onreadystatechange=函數名;
　　eg:
　　xhr.onreadystatechange=f1;
　　c.發送請求
　　xhr.send(null);ajax

　　情形二發送post請求
　　a.xhr.open('post','請求地址',true);
　　b.xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
　　c.xhr.onreadystatechange=函數名;
　　d.xhr.send('name=tom');
　　
　　注：b步驟按照http協議規範，若是發送的是post請求，在請求數據包裏面，應該有content-type消息頭。默認狀況下，ajax對象不帶消息頭，因此須要調setRequestHeader方法來設置這個消息頭。

　　step3.編寫服務器端的程序
　　serlvet的話就是經過PrintWriter來返回文本數據就能夠了。也可使用json
　　至於SpringMVC和ajax的結合，會單開一篇隨筆。

　　step4.編寫事件處理函數chrome

function f1(){
	//先得到服務器返回的數據
	if(xhr.status == 200 && xhr.readyState == 4){
		var txt = xhr.responseText;
		//利用這些數據（txt）更新頁面
		...
	}
}

（5）實戰：註冊頁面（get請求）

　　這個算是很是經典的AJAX的案例了。
　　需求就是：當用戶輸入用戶名以後，判斷用戶名是否爲Sally，若是是，那麼文本框以後出現提示用戶名已存在，若是不是Sally提示可使用。編程

　　在寫的時候，小天發現本身的jquery和javascript已經忘得差很少了( ╯□╰ )，不過仍是勉強完成了。以後看來須要複習一下了。這個小案例沒有使用jquery，可是對javascript一些很複雜的語法進行了封裝。json

//js工具類
function getXhr(){
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	} else {
		xhr = new ActiveXObject("Microsoft.XMLHttp");
	}
	return xhr;
}
//有種本身編寫了jquery的感受( ▼-▼ )
function $(id){
	return document.getElementById(id);
}

function $F(id){
	return $(id).value;
}
		

//jsp頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>regist</title>
<script type="text/javascript" src="js/ajax.js">
</script>
<script type="text/javascript">
	function check(){
		var xhr = getXhr();
		xhr.open('get','check.do?uname='+ $F('uname'),true);
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && 
					xhr.status == 200){
				//得到服務器返回的數據
				var txt = xhr.responseText;
				
				$('uname_msg').innerHTML = txt;
			}
		};
		
		xhr.send(null);
	}
</script>
</head>
<body style="font-size:30px;">
	 <form action="" method="get">
	 	<fieldset>
	 		<legend>註冊</legend>
	 		用戶名：<input id="uname" type="text" name="uname" onblur="check();" />
	 		<span id= "uname_msg"></span><br/>
	 		密碼：<input type="password" name="pwd"/><br/>
	 		<input type="submit" value="註冊"/>
	 	</fieldset>
	 </form>
</body>
</html>


//servlet頁面
public class ActionServlet extends 
	HttpServlet{
	public void service(
			HttpServletRequest request,
			HttpServletResponse response) 
	throws ServletException,IOException{
		System.out.println("service()");
		//得到請求資源路徑
		// http://ip:port/ajax-day01/check.do
		String action = request.getServletPath();
		//設置編碼類型。
		response.setContentType(
				"text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		//依據分析的結果，進行不一樣的處理
		if("/check.do".equals(action)){
			String uname = 
				request.getParameter(
						"uname");
			System.out.println("uname:"
						+ uname);
			if("Sally".equals(uname)){
				out.println("賬號已經存在（╯－＿－）╯╧╧");
			}else{
				out.println("可使用( •̀ ω •́ )y");
			}
		}else if("/getLuck".equals(action)){
			Random r = new Random();
			int number = r.nextInt(8888);
			System.out.println("number:" + number);
			out.println(number);
		}
	}
}

　　注：這裏沒有把web.xml貼出來很簡單的配置，就不在此贅述了。瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。