【web前端開發】之Ajax的原理、實現步驟和實現方式

前言:ajax的知識相對比較簡單，此文章僅表明鄙人的總結和理解，若有錯漏，歡迎指正...

1、原理：

Ajax的原理簡單來講經過XmlHttpRequest對象來向服務器發送異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。
XMLHttpRequest是ajax的核心機制，是一種支持異步請求的技術。簡單的說，也就是javascript能夠及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。

說人話就是：「HTTP協議的異步通訊」。

那什麼是同步，異步呢？
同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；
異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。

2、實現步驟：

get 請求

1) 建立一個XMLHttpRequest對象
2) 調用該對象的open方法
3) 若是是get請求，設置回調函數onreadystatechange = callback
4) Send
複製代碼

post 請求

1) 建立一個XMLHttpRequest對象
2) 調用該對象的open方法
3) 調用setRequestHeader(「Content-Type」, 「application/x-www-form-urlencoded」);
4) 設置回調函數onreadystatechange = callback
5) Send
複製代碼

3、實現方式：

ajax通用調用方法

<script type="text/javascript">
            $('#bid').click(function(){
				$.ajax({
				url:'3.query.php',//地址
				dataType:'json',//數據類型
				type:'GET',//類型
				timeout:2000,//超時
				//請求成功
				success:function(data,status){
					//alert(data);
					//alert(status);
				},
				//失敗/超時
				error:function(XMLHttpRequest,textStatus,errorThrown){
					if(textStatus==='timeout'){
						alert('請求超時');
						setTimeout(function(){
							alert('從新請求');
						},2000);
					}
					//alert(errorThrown);
				}
			})
		})
        </script>
複製代碼

jQuery - AJAX get() 方法

語法：

$.get(URL,callback);
複製代碼

例子：

$("button").click(function(){
  	$.get("demo_test.asp",function(data,status){
    		alert("Data: " + data + "\nStatus: " + status);
  	});
});
複製代碼

jQuery - AJAX post() 方法

語法：

$.post(URL,data,callback);
複製代碼

例子：

$("button").click(function(){
  	$.post("demo_test_post.asp",
  	{
   	 name:"Donald Duck",
    	city:"Duckburg"
  	},
  	function(data,status){
    		alert("Data: " + data + "\nStatus: " + status);
  	});
});
複製代碼

想要了解更多關於ajax的知識，可參考如下博客：

面試題 —— Ajax的基本原理總結
總結 - Ajax工做原理和實現步驟

---

結語：以往都是看別人的博客進行學習技術，其中不乏有精華博客也有吊兒郎當的CV大法文章，因此決定將本身所學所用所整理的知識分享給你們，主要仍是想爲了後浪們少走些彎路，多些正能量的博客，若有錯漏，歡迎指正，僅但願你們能在個人博客中學到知識，解決到問題，那麼就足夠了。謝謝你們！（轉載請註明原文出處）