AJAX の仕組み

1. ajaxテクノロジーの背景

ajaxテクノロジーの人気がGoogleの精力的なプロモーションによるものであることは否定できません。それはまさにajaxテクノロジーの強力なプロモーションによるものです。 ajax の応用が広く普及したことにより、ajax の人気が高まりました。そして、これは Microsoft にとっても非常に当惑することになります。なぜなら、Microsoft は 1997 年の時点で ajax の主要なテクノロジーを発明しており、1999 年に IE5 がリリースされたとき、XmlHttpRequestオブジェクト のサポートを開始しており、Microsoft は以前からMSDN Web サイト メニューの一部のアプリケーションなど、一部の製品で ajax の適用を開始しました。残念ながら、何らかの理由で、Microsoft は ajax の中核テクノロジーを発明した後、その可能性を認識せず、開発、推進することなく、棚上げされました。私は個人的にこれを非常に奇妙に感じています。なぜなら、Microsoft のリソースと戦略的ビジョンを考えると、ajax テクノロジーの見通しが見えないとは考えられないからです。唯一の説明は、当時の Microsoft の主な焦点が競合他社である Netscape の消滅だったからかもしれません。結局のところ、Microsoft に対する IBM の戦略的ミスなど、巨人も休んでいるのです。現在の競合他社である Google が ajax で主導的な地位を確立したのはこの間違いでした。実際、ajax テクノロジーにおける Google の現在のリーダーシップは Microsoft の手の届かないところにあります。これについては後ほど説明します。 。現在、Microsoft もこの問題を認識しているため、独自の ajax フレームワーク アトラスを立ち上げるなど、ajax の分野で追いつき始めており、.NET2.0 で非同期コールバックを実装するためのインターフェイスも提供しています。つまり、ICallBack インターフェイスです。では、なぜ Microsoft は ajax で後れをとることにこれほど神経質になっているのでしょうか?ここで、ajax テクノロジーの背後にある深い意味を分析してみましょう。

2. ajax

ajaxとは「Asynchronous Javascript AND XML」（非同期JavaScriptとXML）で、インタラクティブなWebアプリケーションを作成するためのWeb開発技術を指します。 ajax には、XHTML と CSS 標準を使用して Web ページを実装すること、DOM を使用して動的な表示と対話を実現すること、XML を使用してデータ交換と処理を行うこと、そして最後に JavaScript を使用してすべてのデータをバインドして処理することが含まれます。 ajaxサーバーの負担の一部をクライアントに委任し、クライアントの特定の機能を使用してデータを処理し、ユーザーの実際の心理的な待ち時間を短縮し、ユーザーが長時間の空白スペースやブラウザの停止に遭遇することがなくなりました。ページの更新の応答が悪く、ユーザーに可能な限り最高のエクスペリエンスが提供されます。 ajax標準化された XML に基づいており、広く使用およびサポートされているため、保守と変更が容易です。 ajaxページとデータを分離する必要がある場合、ajaxを使用して外部データを呼び出すと非常に便利です。

三、ajax

に含まれる技術 ajaxが新しい技術ではなく、いくつかの独自の技術を組み合わせたものであることは誰もが知っています。以下の技術で構成されています。
1. CSSとXHTMLを使って表現します。
2. インタラクションと動的な表示には DOM モデルを使用します。
3. XMLHttpRequest を使用してサーバーと非同期通信します。
4. javaSscriptを使用してバインドして呼び出します。

4. ajaxとXmlHttpRequestオブジェクト

の原理は、単にXmlHttpRequestオブジェクトを使用することです。サーバーステップリクエストに例外を発行します。サーバーからデータを取得し、JavaScript を使用して DOM を操作し、ページを更新します。この中で最も重要なステップは、サーバーからリクエスト データを取得することです。このプロセスと原理を理解するには、XMLHttpRequest について理解しておく必要があります。 XMLHttpRequest は ajax のコアメカニズムであり、IE5 で初めて導入され、非同期リクエストをサポートするテクノロジーです。簡単に言うと、JavaScript はユーザーをブロックすることなく、サーバーにリクエストを送信し、応答をタイムリーに処理できます。リフレッシュ効果は得られません。 下の図を見ると、ajaxの動作原理をよりよく理解できます

<script language="javascript">
	var xmlHttp = null;

	//创建XMLHttpRequest<strong>对象
	function GetXmlHttpRequest()
	{
		var xmlHttp = null;
		try
		{
			xmlHttp = new XMLHttpRequest();  //对于firefox等浏览器
		}
		catch(e)
		{
			try
			{
				xmlHttp = new ActiveXObject("Msxm12.XMLHTTP"); //对于IE浏览器
			}
			catch(e)
			{
				try
				{
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch(e)
				{
					xmlHttp = false;
				}
			}
		}
		//返回XMLHttpRequest<strong>对象
		return xmlHttp;
	}
	
	//发出异步请求
	function sendRequest()
	{

		//获取页面表单提交的文本框的值
		var  prov_name = document.getElementById("province").value;

		if ((prov_name == null) || (prov_name == &#39;&#39;))
			return;
	
		xmlHttp = GetXmlHttpRequest();
		if (xmlHttp == null)
		{
			alert("浏览器不支持xmlHttpRequset!");
			return;
		}

		//构建请求的URL地址
		var url = &#39;18-5.php&#39;;
		url = url + "?prov=" + prov_name;
	
		//使用get()方法打开一个到url的链接，为发出的请求做准备
		xmlHttp.open("GET",url,true);

		//设置一个函数 ，当服务器完成请求后调用，该函数名为updatePage
		xmlHttp.onreadystatechange = updatePage;
		//发送请求（GET提交方式） <span style="font-family: 宋体;">POST提交方式 </script>

XmlHttpRequest の 2 つのメソッド、open と send について、open メソッドは次を指定します。

などの一般的な ajax コントロールの多くは、DataSet などの他のデータ型を返すことができますが、本質的には、それらの間に大きな違いはありません。 。
5. ajaxのメリットとデメリット

ajaxのメリット: 最大のポイントは、ページが更新されないことです。内のサーバーと通信します。ページを作成し、ユーザーにエクスペリエンスを提供します。

2. 非同期モードを使用して、ユーザーの操作を中断することなくサーバーと通信し、より高速な応答機能を備えます。

3. これまでサーバーの負担となっていた作業の一部をクライアントに転送し、クライアントのアイドル容量を使用して処理することで、サーバーと帯域幅の負担を軽減し、スペースと帯域幅のレンタルを節約できます。費用がかかります。そして、サーバーの負担を軽減するために、ajaxの原則は「オンデマンドでデータを取得する」ことであり、これにより、冗長なリクエストと応答によるサーバーの負担を最小限に抑えることができます
。

4. 標準化され広くサポートされているテクノロジーに基づいているため、プラグインやアプレットをダウンロードする必要はありません。

ajaxの欠点:
通常、私たちはユーザーエクスペリエンスの向上など、ajaxがもたらす利点に主に注目しているからです。そして、ajaxによってもたらされた欠点は無視されてきました。以下で説明する ajax の欠陥はすべて、その固有性によって引き起こされます。

1. ajax は、ブラウザの戻るメカニズムを破壊する「戻る」ボタンを強制終了します。 「戻る」ボタンは標準的な Web サイトの重要な機能ですが、JavaScript ではうまく機能しません。これは、ajax によって引き起こされる深刻な問題です。ユーザーは、前に戻って前の操作をキャンセルしたいと考えることが多いためです。では、この問題に対する解決策はあるのでしょうか?答えは「はい」です。Gmail を使用したことがある人は、Gmail で使用されている ajax テクノロジーがこの問題を解決することを知っています。ただし、ajax のメカニズムを変更することはできません。この方法は、ユーザーが履歴にアクセスするために戻るボタンをクリックしたときにページ上の変更を再現するために、非表示の IFRAME を作成または使用することです。 (たとえば、ユーザーが Google で検索するとき マップで戻るをクリックすると、非表示の IFRAME が検索され、検索結果が ajax 要素に反映され、アプリケーションの状態がその時点の状態に復元されます。 ) ただし、この問題は解決できますが、それに伴う開発コストは非常に高く、ajax フレームワークに必要な迅速な開発とは相反するものです。これは ajax によって引き起こされる非常に深刻な問題です。

2. セキュリティ問題
テクノロジーは、IT 企業に新たなセキュリティ脅威ももたらします ajax テクノロジーは、企業データへの直接チャネルを確立するようなものです。これにより、開発者は以前よりも多くのデータとサーバー ロジックを誤って公開してしまう可能性があります。 ajax のロジックはクライアント側のセキュリティ スキャン テクノロジから隠すことができ、ハッカーがリモート サーバーから新たな攻撃を確立できるようになります。さらに、ajax は、クロスサイト スクリプティング攻撃、SQLインジェクション攻撃、資格情報ベースのセキュリティ 脆弱性 など、いくつかの既知のセキュリティの弱点を回避することも困難です。
3. 検索 index エンジンのサポートは比較的弱いです。
4. プログラムの例外メカニズムを破壊しました。少なくとも現在の観点からすると、ajax.dll や ajaxpro.dll などの ajax フレームワークは、プログラムの例外メカニズムを破壊します。この問題に関しては、私も開発過程で遭遇したことがありますが、調べてみるとネット上には関連する紹介がほとんどありません。その後、ajax と従来のフォーム送信モードを使用してデータの一部を削除するという実験を自分で行いました...これはデバッグに大きな困難をもたらしました。
5. さらに、URL やリソースの配置の本来の意図に反するなど、いくつかの問題があります。たとえば、URL アドレスを与えた場合、ajax テクノロジーが使用されている場合、その URL アドレスの下に表示されるものは、この URL アドレスの下に表示されるものと異なる可能性があります。これは、リソースの配置の本来の目的に反します。
6. 一部の携帯端末 (携帯電話、PDA など) は現在 ajax を十分にサポートしていません。たとえば、モバイル ブラウザーで ajax テクノロジーを使用して Web サイトを開くと、現在サポートされています。もちろん、この問題は私たちとは何の関係もありません。

6. ajax

目前我们采用的比较多的ajax框架主要有ajax.dll,ajaxpro.dll,magicajax.dll 以及微软的atlas框架。ajax.dll和ajaxpro.dll这两个框架差别不大，而magicajax.dll只是封装得更厉害一些，比如说它可以直接返回DataSet数据集，前面我们已经说过，ajax返回的都是字符串，magicajax只是对它进行了封装而已。但是它的这个特点可以给我们带来很大的方便，比如说我们的页面有一个列表，而列表的数据是不断变化的，那么我们可以采用magicajax来处理，操作很简单，添加magicajax之后，将要更新的列表控件放在magicajax的控件之内，然后在pageload里面定义更新间隔的时间就ok了，atlas的原理和magicajax差不多。但是，需要注意的一个问题是，这几种框架都只支持IE，没有进行浏览器兼容方面的处理，用反编译工具察看他们的代码就可以知道。
除了这几种框架之外，我们平时用到的比较多的方式是自己创建xmlHttpRequest对象，这种方式和前面的几种框架相比更具有灵活性。另外，在这里还提一下aspnet2.0自带的异步回调接口，它和ajax一样也可以实现局部的无刷新，但它的实现实际上也是基于xmlhttprequest对象的，另外也是只支持IE，当然这是微软的一个竞争策略。

七、ajax简单示例

示例实现的功能是当用户在WEB页面的下拉列表框中选择某个省的名称时，会在页面上显示该省的省会名称，而此时页面并不刷新。省会名称将由服务端传送至浏览器。这个示例包含三个部分（这里的服务端是PHP程序）

1、HTML页面，包含下拉列表框和要显示省会名称的位置

2、JavaScript程序，实现发送请求和处理响应。

3、服务端的PHP程序，用来接受浏览器的请求，向浏览器传送结果数据。

（客户端）HTML页面：

<meta http-equiv="Content-Type" c charset='utf-8"'>
<title>
<strong>ajax</strong>简单应用</title>
<script language="javascript">
	var xmlHttp = null;

	//创建XMLHttpRequest<strong>对象
	function GetXmlHttpRequest()
	{
		var xmlHttp = null;
		try
		{
			xmlHttp = new XMLHttpRequest();  //对于firefox等浏览器
		}
		catch(e)
		{
			try
			{
				xmlHttp = new ActiveXObject("Msxm12.XMLHTTP"); //对于IE浏览器
			}
			catch(e)
			{
				try
				{
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch(e)
				{
					xmlHttp = false;
				}
			}
		}
		//返回XMLHttpRequest<strong>对象
		return xmlHttp;
	}
	
	//发出异步请求
	function sendRequest()
	{

		//获取页面表单提交的文本框的值
		var  prov_name = document.getElementById("province").value;

		if ((prov_name == null) || (prov_name == &#39;&#39;))
			return;
	
		xmlHttp = GetXmlHttpRequest();
		if (xmlHttp == null)
		{
			alert("浏览器不支持xmlHttpRequset!");
			return;
		}

		//构建请求的URL地址
		var url = &#39;18-5.php&#39;;
		url = url + "?prov=" + prov_name;
	
		//使用get()方法打开一个到url的链接，为发出的请求做准备
		xmlHttp.open("GET",url,true);

		//设置一个函数 ，当服务器完成请求后调用，该函数名为updatePage
		xmlHttp.onreadystatechange = updatePage;
		//发送请求
		xmlHttp.send(null);
	}

	//回调函数 处理服务器响应
	function updatePage()
	{
		if(xmlHttp.readyState!= 4)
		{
			document.getElementById("city").innerHTML="数据正在加载...";
		}
		//判断xmlHttpRequset()<strong>对象的readyState值是否等于4
		if(xmlHttp.readyState == 4 && xmlHttp.status ==200)
		{
			//获取服务器返回的响应数据
			var response = xmlHttp.responseText;
			document.getElementById(&#39;city&#39;).innerHTML = response;
		}
	}

</script>



<h3>请选择一个省（自治区）<h3>
</h3>
</h3>

<?php $city_arr = array(
		&#39;ah&#39;=>'合肥',
		'fj'=>'福州',
		'gs'=>'兰州',
		'gx'=>'南宁',
		'gd'=>'广州',
		'gz'=>'贵阳',
		'hn'=>'海口',
		'hb'=>'石家庄',
		'hh'=>'郑州',
		'hlg'=>'哈尔滨',
	);

	if (empty($_GET['prov']))
	{
		echo iconv("UTF-8", "UTF-8", '<font color="red">您还没有选择省（自治区）</font>'); //注意：你的PHP文件使用的是<strong>GB2312</strong>编码保存的话，那iconv('<strong>GB2312</strong>','UTF-8','<span style="font-family: 宋体;"><font color="red">您还没有选择省（自治区）</font></span><span style="font-family: 宋体;">');</span>
	}
	else
	{
		$prov = $_GET['prov'];
		$city = $city_arr[$prov];
		echo iconv("UTF-8", "UTF-8", '所选省（自治区）省会（首府）为：'.$city); <span style="font-family: 宋体;">//注意：你的PHP文件使用的是<strong>GB2312</strong>编码保存的话，那iconv('<strong>GB2312</strong>','UTF-8','</span><span style="font-family: 宋体;">所选省（自治区）省会（首府）为：'.$city</span><span style="font-family: 宋体;">);</span><span style="font-family: 宋体;">
</span>	}
?>

以上就介绍了AJAX工作原理，包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。