Wie AJAX funktioniert

1. Hintergrund der Ajax-Technologie

Es ist unbestreitbar, dass Ajax Technologie Die Popularität von Ajax ist auf die starke Werbung von Google zurückzuführen. Gerade aufgrund der umfassenden Anwendung der Ajax-Technologie durch Google Earth, Google Suggest und Gmail ist die Popularität von ajax war geboren. Dies ist auch für Microsoft äußerst verlegen, da Microsoft bereits 1997 die Schlüsseltechnologie in Ajax erfunden hatte und mit der Einführung von IE5 im Jahr 1999 begann, XmlHttpRequest Object zu unterstützen. und Microsoft hat bereits begonnen, Ajax in einigen seiner Produkte zu verwenden, beispielsweise in einigen Anwendungen im Menü der MSDN-Website. Leider erkannte Microsoft aus irgendeinem unbekannten Grund nach der Erfindung der Kerntechnologie von Ajax deren Potenzial nicht und entwickelte und förderte sie nicht, sondern stellte sie zurück. Ich persönlich finde das sehr seltsam, denn angesichts der Ressourcen und der strategischen Vision von Microsoft ist es unwahrscheinlich, dass es die Aussichten der Ajax-Technologie nicht erkennen kann. Die einzige Erklärung könnte das Verschwinden seines Hauptkonkurrenten Netscape zu dieser Zeit sein machte es lahm und langsam. Schließlich machen auch Giganten ein Nickerchen, wie zum Beispiel die strategischen Fehler von IBM gegenüber Microsoft. Es war dieser Fehler, der dazu führte, dass der aktuelle Konkurrent Google die führende Position in der Ajax-Technologie einnahm. Tatsächlich liegt die derzeitige Führungsposition von Google in der Ajax-Technologie außerhalb der Reichweite von Microsoft wenn ich die Mängel von Ajax beschreibe. Mittlerweile ist sich auch Microsoft dieses Problems bewusst und hat daher begonnen, im Bereich Ajax aufzuholen, beispielsweise durch die Einführung eines eigenen Ajax-Framework-Atlas, der auch in .NET2 bereitgestellt wird .0 Eine Schnittstelle zur Implementierung eines asynchronen Rückrufs, nämlich die ICallBack-Schnittstelle. Warum ist Microsoft so nervös, dass es bei Ajax hinterherhinkt? Lassen Sie uns nun die tiefgreifende Bedeutung hinter der Ajax-Technologie analysieren.

2. Was ist Ajax

Ajax bedeutet „ „Asynchronous Javascript AND XML“ bezeichnet eine Webentwicklungstechnologie zur Erstellung interaktiver Webanwendungen. Ajax umfasst die Verwendung von XHTML- und CSS-Standards zur Implementierung von Webseiten, die Verwendung von DOM zur Erzielung einer dynamischen Anzeige und Interaktion, die Verwendung von XML für den Datenaustausch und die Datenverarbeitung und schließlich die Verwendung von JavaScript zum Binden und Verarbeiten aller Daten. ajax delegiert einen Teil der Serverlast an den Client, nutzt bestimmte Funktionen des Clients zur Datenverarbeitung und reduziert die tatsächliche und psychologische Wartezeit des Benutzers. Der Benutzer muss nicht mehr mit der langen Browserzeit aufgrund der Seitenaktualisierung konfrontiert werden . Wenn Sie schlechte Ergebnisse löschen oder gar nicht mehr reagieren, bietet dies dem Benutzer das bestmögliche Erlebnis. Ajax basiert auf standardisiertem XML, wird häufig verwendet und unterstützt und ist einfach zu warten und zu ändern. ajax ist sehr praktisch, um externe Daten aufzurufen. Wenn die Seite und die Daten getrennt werden müssen, können Sie ajax
verwenden, um die Daten abzurufen.

3. ajaxTechnologie inklusive

Jeder weiß, dass Ajax

keine neue Technologie ist, sondern eine Kombination mehrerer Originaltechnologien. Es besteht aus den folgenden Technologien.
1. Verwenden Sie CSS und XHTML zum Ausdrucken.
2. Verwenden Sie das DOM-Modell für Interaktion und dynamische Anzeige. 3. Verwenden Sie XMLHttpRequest, um asynchron mit dem Server zu kommunizieren. 4. Verwenden Sie JavaSSkript zum Binden und Aufrufen.

4. AjaxPrinzip und XmlHttpRequestObjekt

ajax besteht einfach darin, eine asynchrone Anfrage über das XmlHttpRequest-Objekt an den Server zu senden, die Daten vom Server abzurufen und dann Javascript zu verwenden um das DOM zu betreiben und die Seite zu aktualisieren. Der wichtigste Schritt besteht darin, die Anforderungsdaten vom Server abzurufen. Um diesen Prozess und dieses Prinzip zu verstehen, müssen wir etwas über XMLHttpRequest verstehen. XMLHttpRequest ist der Kernmechanismus von ajax. Es wurde erstmals in IE5 eingeführt und ist eine Technologie, die asynchrone Anfragen unterstützt. Vereinfacht ausgedrückt kann JavaScript Anfragen an den Server stellen und Antworten zeitnah verarbeiten, ohne den Benutzer zu blockieren. Erzielen Sie keinen Refresh-Effekt. Sie können das Funktionsprinzip von Ajax durch das Bild unten besser verstehen

So funktioniert XMLHttpRequest. Die Attribute des
XMLHttpRequest-Objekts sind:
onreadystatechange Der Ereignishandler für das Ereignis, das jedes Mal ausgelöst wird, wenn sich der Status ändert.
responseText Gibt die Zeichenfolgenform der Daten vom Serverprozess zurück.
responseXML DOM-kompatibles Dokumentdatenobjekt , das vom Serverprozess zurückgegeben wurde. status   Vom Server zurückgegebener numerischer Code, z. B. 404 (nicht gefunden) und 200 (bereit).
statusText   Zeichenfolgeninformationen, die den Statuscode begleiten   
Objekt
status Wert0 (nicht initialisiert) Objekt
wurde erstellt, aber nicht initialisiert (die Open-Methode wurde noch nicht aufgerufen)

Objekt wurde eingerichtet, die Sendemethode wurde noch nicht aufgerufen

XMLHttpRequestObjekte möglicherweise unterschiedliche Methoden erforderlich. Dieser Unterschied spiegelt sich hauptsächlich zwischen IE und anderen Browsern wider. Das Folgende ist eine relativ standardmäßige Methode zum Erstellen eines XMLHttpRequest-Objekts

<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提交方式 <span style="font-family: 宋体;">xmlHttp.send(url);
		xmlHttp.send(null);
	}

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

Aus dem Workflow von XMLHttpRequest können wir ersehen, dass XMLHttpRequest vollständig zum Senden einer Anfrage an den Server verwendet wird und seine Rolle auch darauf beschränkt ist Dies, aber seine Rolle ist der Schlüssel zur gesamten ajax-Implementierung, denn ajax besteht aus nichts anderem als zwei Prozessen, dem Stellen einer Anfrage und dem Beantworten der Anfrage. Und es handelt sich ausschließlich um eine clientseitige Technologie. XMLHttpRequest behandelt das Kommunikationsproblem zwischen dem Server und dem Client, weshalb es so wichtig ist.

Wir können uns den Server als eine Datenschnittstelle vorstellen, die einen Klartext-Stream zurückgibt Der Textstrom kann im XML-Format vorliegen, er kann HTML sein, er kann Javascript-Code sein oder er kann einfach eine Zeichenfolge sein. Zu diesem Zeitpunkt fordert XMLHttpRequest diese Seite vom Server an und der Server schreibt das Textergebnis in die Seite. Dies ist derselbe wie beim normalen Webentwicklungsprozess. Der Unterschied besteht darin, dass der Client das Ergebnis nicht direkt erhält wird auf der Seite angezeigt, aber zuerst von Javascript verarbeitet und dann auf der Seite angezeigt. Viele der beliebten Ajax-Steuerelemente, wie z. B. MagicAjax usw., können DataSet und andere Datentypen zurückgeben. Sie kapseln im Wesentlichen nur die Ergebnisse dieses Prozesses , sie sind kein so großer Unterschied.

5. Vor- und Nachteile von ajax

Vorteile von Ajax:
1. Der größte Punkt ist, dass die Seite nicht aktualisiert wird und innerhalb der Seite mit dem Server kommuniziert, was dem Benutzer ein sehr gutes Erlebnis bietet.

2. Verwenden Sie den asynchronen Modus, um mit dem Server zu kommunizieren, ohne den Betrieb des Benutzers zu unterbrechen, und haben Sie eine schnellere Reaktionsfähigkeit.

3. Sie können einen Teil der zuvor vom Server belasteten Arbeit auf den Client übertragen und die ungenutzte Kapazität des Clients für die Verarbeitung nutzen Dies reduziert die Belastung des Servers und die Bandbreitenbelastung und spart Platz und Kosten für die Bandbreitenmiete. Und um die Belastung des Servers zu verringern, besteht das Prinzip von Ajax darin, „Daten bei Bedarf abzurufen“, wodurch die Belastung des Servers durch redundante Anforderungen und Antworten minimiert werden kann .

4. Basierend auf standardisierter und weithin unterstützter Technologie ist es nicht erforderlich, Plug-Ins oder kleine Programme herunterzuladen.

Nachteile von Ajax:
Weil die meisten von uns normalerweise auf Ajax achten Zu den Vorteilen, die wir mitbringen, gehört eine verbesserte Benutzererfahrung. Die durch Ajax verursachten Mängel wurden ignoriert. Die unten erläuterten Mängel von Ajax sind alle auf seine angeborene Natur zurückzuführen.

1. ajax deaktiviert die Zurück-Schaltfläche, wodurch der Zurück-Mechanismus des Browsers zerstört wird. Die Zurück-Schaltfläche ist eine wichtige Funktion einer Standard-Website, funktioniert jedoch nicht gut mit JavaScript. Dies ist ein ernstes Problem, das durch Ajax verursacht wird, da Benutzer häufig hoffen, den vorherigen Vorgang durch Zurückkehren abzubrechen. Gibt es also eine Lösung für dieses Problem? Die Antwort lautet: Ja. Jeder, der Gmail verwendet hat, weiß, dass die unter Gmail verwendete Ajax-Technologie dieses Problem löst. Sie können unter Gmail zurückkehren, aber es kann nicht geändert werden. Der Mechanismus ist einfach Eine umständliche, aber effektive Möglichkeit, die Änderungen auf der Seite zu reproduzieren, indem ein versteckter IFRAME erstellt oder verwendet wird, wenn der Benutzer auf die Schaltfläche „Zurück“ klickt, um auf den Verlauf zuzugreifen. (Zum Beispiel, wenn ein Nutzer bei Google sucht Wenn Sie in Maps auf „Zurück“ klicken, wird in einem ausgeblendeten IFRAME gesucht und die Suchergebnisse dann im Ajax-Element wiedergegeben, um den Anwendungsstatus auf den damaligen Stand wiederherzustellen. ) Obwohl dieses Problem gelöst werden kann, sind die damit verbundenen Entwicklungskosten sehr hoch, was im Widerspruch zu der schnellen Entwicklung steht, die das Ajax-Framework erfordert. Dies ist ein sehr ernstes Problem, das durch Ajax verursacht wird.

2. Sicherheitsprobleme
Technologie bringt auch neue Dinge für IT-Unternehmen in Sachen Sicherheit Bedrohungen ist die Ajax-Technologie wie die Einrichtung eines direkten Kanals zu Unternehmensdaten. Dadurch können Entwickler unbeabsichtigt mehr Daten und Serverlogik offenlegen als zuvor. Die Logik von ajax kann vor der clientseitigen Sicherheitsscan-Technologie verborgen werden, sodass Hacker neue Angriffe von Remote-Servern aus starten können. Darüber hinaus ist es bei Ajax auch schwierig, einige bekannte Sicherheitslücken zu vermeiden, wie z. B. Cross-Site-Scripting-Angriffe, SQL--Injection-Angriffe und anmeldeinformationsbasierte Sicherheitslücken . usw.
3. Die Unterstützung für die Suchmaschine Index ist relativ schwach.
4. Der Ausnahmemechanismus des Programms wurde zerstört. Zumindest aus heutiger Sicht zerstören ajax-Frameworks wie ajax.dll und ajaxpro.dll den Ausnahmemechanismus des Programms. Bezüglich dieses Problems bin ich während des Entwicklungsprozesses darauf gestoßen, aber nach Überprüfung gibt es im Internet fast keine relevante Einführung. Später habe ich selbst ein Experiment durchgeführt, bei dem ich Ajax und den traditionellen Formularübermittlungsmodus verwendet habe, um ein Datenelement zu löschen ... was uns beim Debuggen große Schwierigkeiten bereitete.
5. Darüber hinaus gibt es einige andere Probleme, z. B. die Verletzung der ursprünglichen Absicht der URL- und Ressourcenpositionierung. Wenn ich Ihnen beispielsweise eine URL-Adresse gebe und die Ajax-Technologie verwendet wird, unterscheidet sich das, was Sie unter der URL-Adresse sehen, möglicherweise von dem, was ich unter dieser URL-Adresse sehe. Dies widerspricht der ursprünglichen Absicht der Ressourcenpositionierung.
6. Einige Handheld-Geräte (wie Mobiltelefone, PDAs usw.) unterstützen derzeit kein Ajax, wenn wir beispielsweise den Browser auf dem Mobiltelefon öffnen Die Ajax -Technologie wird derzeit auf Websites nicht unterstützt. Dieses Problem hat natürlich nichts mit uns zu tun.

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教程有兴趣的朋友有所帮助。