Ajax工做原理以及函數的簡單封裝

時間 2019-12-05

標籤 ajax 原理以及函數簡單封裝欄目 Ajax 简体版

原文原文鏈接

什麼是AJAX？javascript

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。html

AJAX 不是新的編程語言，而是一種使用現有標準的新方法。java

AJAX 是與服務器交換數據並更新部分網頁的藝術，在不從新加載整個頁面的狀況下。
ajax

AJAX運用的意義?chrome

新浪微博、百度地圖、股票信息的顯示、網站登陸驗證碼等等這些都應用到了ajax技術，那麼ajax技術運用有什麼意義呢？編程

首先從我的最直觀的感覺來講是用戶體驗的提高，你能想象你在使用百度地圖的時候更換一個地點你的網頁就刷新一次的心情嗎？ajax部分更新網頁能夠更快的處理用戶的需求而不是把寶貴的時間浪費在加載其餘部分的頁面上。至於技術上的意義，學識尚淺，等到本身有必定的看法後再補充。可是看到其餘博主的看法以爲頗有道理，先搬過來給你們分享一下。數組

咱們在平時的開發中都多多少少的接觸或者應用到了ajax，談到ajax技術的意義，咱們關注得最多的毫無疑問是提高用戶的體驗。可是，若是咱們結合未來電腦和互聯網的發展趨勢，咱們會發現ajax技術在某些方面正好表明了這種趨勢。爲何這樣說呢？咱們知道，自從電腦出現以來，一直是桌面軟件佔據着絕對主導的地位，可是互聯網的出現和成功使這一切開始發生着微妙的變化。至關一部分的人都相信，早晚有一天，數據和電腦軟件將會從桌面轉移到互聯網。也就是說，未來的電腦有可能拋棄笨重的硬盤，而直接從互聯網來獲取數據和服務，我記得我念大學的時候，有位教授給咱們上課的時候，曾經設想過這樣一種情景，也許在未來的電腦桌面上，沒有任何多餘的軟件和程序，而僅僅只有一個IE，雖然如今看起來咱們距離這一天還很遙遠，而且這其中還有不少的問題須要解決，可是我以爲這個並不是夢想，而是早晚將實現的現實。那麼，這其中的主要問題就是互聯網的鏈接不穩定，誰也不肯意看着本身的電腦從服務器一點一滴的下載數據，那麼，ajax是否是解決了這個問題呢，說實話，與其說ajax解決了這個問題，倒不如它只是掩蓋了這個問題，它只是在服務器和客戶端之間充當了一個緩衝器，讓用戶誤覺得服務沒有中斷。精確的說，ajax並不能提升從服務器端下載數據的速度，而只是使這個等待不那麼使人沮喪。可是正是這一點就足以產生巨大的影響和震動，它實際上也對桌面軟件產生了巨大的衝擊。這一點我用一個例子來講明，咱們能夠比較一下Outlook Express和Gmail，前者是典型的桌面軟件，後者是ajax所實現的B/S模式，實際上後者目前已經在慢慢取代前者了，Gmail在收發郵件的時候已經和Outlook Express的功能幾乎沒有差異了，並且它不須要安裝客戶端程序。這就是爲何微軟對ajax所帶來的衝擊有着如此的恐懼心理，而且在它前不久所進行的調查之中，將google看作他們將來十年內的主要競爭對手的主要緣由之一。固然，這種變化也並不會將桌面軟件所有淘汰，現有的瀏覽器尚未一個能像PhotoShop等桌面程序那樣處理複雜的圖像。可是咱們也不能忽視它帶來的影響和衝擊。
瀏覽器

原文連接：Ajax工做原理緩存

AJAX函數的封裝和調用服務器

封裝函數部分：

function ajax(url, fnSucc, fnFaild)
{
	//1.建立Ajax對象
	if(window.XMLHttpRequest)
	{
		//IE7+ chrome firefox
		var oAjax=new XMLHttpRequest();
	}
	else
	{
		//IE五、6
		var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	//2.鏈接服務器（打開和服務器的鏈接）
	//open( method , url , async )
	//method ：請求的類型；GET 或 POST
	//url ：文件在服務器上的位置
	//async ：true（異步）或 false（同步）
	
	oAjax.open('GET', url, true);
	
	//3.發送
	oAjax.send();
	
	//4.接收
	oAjax.onreadystatechange=function ()
	{
		/** readyState狀態含義
		 *  0: 請求未初始化
			1: 服務器鏈接已創建
			2: 請求已接收
			3: 請求處理中
			4: 請求已完成，且響應已就緒
		 */
		if(oAjax.readyState==4)
		{
			if(oAjax.status==200)
			{
				//alert('成功了：'+oAjax.responseText);
				fnSucc(oAjax.responseText);
			}
			else
			{
				//alert('失敗了');
				if(fnFaild)
				{
					fnFaild();
				}
			}
		}
	};
}

調用函數部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function () {
				var a = document.getElementById('a');
				var user = document.getElementById('a1');
				var Password = document.getElementById('a2');
				a.onclick = function (){
					//防止緩存,每次調用連接都加一個惟一的時間
					ajax('a.txt?t='+new Date().getTime(),function (str){
						var arr = eval(str);//將字符串轉換爲數組
						user.value = arr[0].a;
						Password.value = arr[0].b;
					},function(){
						alert('fail');
					});
				}
			}
		</script>
	</head>
	<body>
		<input type="button" name="a" id="a" value="123" />
		user：<input type="text" name="a" id="a1" value="" />
		password：<input type="text" name="a" id="a2" value="" />
	</body>
</html>

a.txt中的內容

[{a:'zfx',b:'zfx123'},{a:'zfx2',b:'zfx456'}]

須要注意的是在這裏我txt文件中是一個數組，那麼咱們咱們讀取到的實際上是一個字符串，咱們就須要將字符串轉換成一個數組來調用。還有就是爲了不咱們讀取到的是緩存數據，咱們向url添加一個惟一的ID。

須要詳細的瞭解ajax的每個模塊能夠直接看w3c的文檔：點擊打開連接

相關標籤/搜索

每日一句

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