Wie erstelle ich Ajax selbst? Detaillierte Erläuterung der Schritte zum Erstellen von Ajax (mit Beispielanalyse)

In diesem Artikel geht es hauptsächlich darum, wie man einen Fall von Ajax erstellt. Schauen wir uns nun gemeinsam diesen Artikel an.

Ich lerne Ajax schon seit einiger Zeit Fassen Sie den Aufbau und die Funktionen von Ajax zusammen.

Ajax wird zum Anfordern von Daten aus dem Hintergrund verwendet. Seine Eigenschaft besteht darin, Daten asynchron anzufordern (Daten ohne Aktualisierung zu lesen, wenn Sie sie ausfüllen). Ein Formular mit vielen Elementen ist für Benutzer einfach ein Albtraum. Wenn ein Teil des Formulars falsch ausgefüllt wird, erscheint beim endgültigen Absenden ein Fehler und das Formular muss nach mehrmaligem Ausfüllen erneut ausgefüllt werden Der Benutzer kann das Wunschformular nicht mehr ausfüllen. Nach dem Aufkommen von Ajax wurde dieses Problem gut gelöst. Jedes Mal, wenn ein Element ausgefüllt wird, wird das Ergebnis über den Server überprüft und zurückgegeben, was die Effizienz bis zu einem gewissen Grad verbessert und den Benutzern ein besseres Erlebnis bietet. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte AJAX-Entwicklungshandbuch der PHP-Website für Chinesisch, um mehr zu erfahren)

Jetzt erklären wir einige Probleme bei der Verwendung von Ajax: Zuerst Unter IE werden die Daten nicht rechtzeitig aktualisiert (verursacht durch den Cache). Eine URL wird daher bei jeder Aktualisierung geändert. Die folgenden Parameter haben keinen Einfluss auf den Seitenabruf, aber Browser mit unterschiedlichen URLs laden die Seite neu und lösen so das Seiten-Cache-Problem. Sie können url+'?t='+new Date().getTime(); verwenden, zweitens gibt es ein Problem mit dem empfangenen Datenformat, das drittens eine einheitliche Codierung erfordert Alle Dinge werden mit Zeichen zurückgegeben. Zu diesem Zeitpunkt müssen wir die Daten selbst analysieren. Als nächstes schreiben Sie selbst einen Ajax:

1. Erstellen Sie ein Ajax-Objekt var oAjax=new XMLHttpRequest() ~Higher version browser or new ActiveXObject('Microsoft. XMLHTTP ')~IE

2. Stellen Sie eine Verbindung her oAjax.open(mode, address, asynchronous)

3. Anfrage senden oAjax.send();

4. Akzeptieren onreadystatechange liest, wenn sich der Status ändert

oAjax.readyState-Statuscode

0 Das Ajax-Objekt wurde gerade erstellt (neues Ajax-Objekt)

1. Mit dem Server verbunden (offene Methode gerade ausgeführt)

2. Senden abgeschlossen

3. Empfang abgeschlossen (Dateikopf)

4. Wenn die Inhaltsanforderung fehlschlägt, werden nach Abschluss des Empfangs 4

Der http-Statuscode angezeigt:

oAjax.status 200<=n<300 oder n==304 bedeutet erfolgreiches Senden

oAjax.responseText-Rückgabedaten

encodeURIComponent(str)                           Die Zeichenfolge wird als URI-Komponente codiert

ajax:

//data 	后台要的数据
//options	=	url,data,type,timeout,success,error
function ajax(options){	
	options=options||{};
	options.data=options.data||{};
	options.type=options.type||'get';
	options.timeout=options.timeout||0;	
	//整理data数据
	options.data.t=Math.random();//给data创建一个t 键
	var arr=[];
	for(var key in options.data){
		arr.push(key+'='+encodeURIComponent(options.data[key]));	
	}
	var str=arr.join('&');	
	if(window.XMLHttpRequest){//1
		var oAjax=new XMLHttpRequest();	
	}else{
		var oAjax=new ActiveXObject('Microsoft.XMLHTTP');	
	}	
	if(options.type=='get'){
		oAjax.open('get',options.url+'?'+str,true);//2	
		oAjax.send();//3
	}else{//post
		oAjax.open('post',options.url,true);
			
		//设定ajax的头信息
		oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');		
		oAjax.send(str);		
	}
	
	oAjax.onreadystatechange=function(){//4
		if(oAjax.readyState==4){
			if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
				clearInterval(timer);
				options.success && options.success(oAjax.responseText)
			}else{
				options.error && options.error(oAjax.status);
			}
		}
	};
	if(options.timeout){
		var timer=setTimeout(function(){
			alert(&#39;超时了&#39;);	
			oAjax.abort();	//终止加载	
		},options.timeout);
	}	
}

1.Ajax-Funktion erstellen. Da die verschiedenen Parameter in Ajax unsicher und an unterschiedlichen Positionen angeordnet sind, wird JSON als Daten verwendet und die Parameteroptionen werden übergeben. Wenn nicht, werden die übergebenen Daten verwendet. Es werden die Standardparameter verwendet, einschließlich der Art der Sendemethode, der Timeout-Einstellung und der Daten.

2.Die URL muss am Ende einige Zufallsvariablen hinzufügen, damit Sie zuerst einen Schlüssel zu den Daten hinzufügen können: options.data.t=Math.random () ;Codieren Sie dann die URL und verarbeiten Sie die Daten.

3. Bestimmen Sie dann den Browser. Sowohl Chrome als auch ff unterstützen window.XMLHttpRequest, während der IE-Browser nur ActiveXObject('Microsoft.XMLHTTP') unterstützt Bestimmen Sie die Art des Sendens. Wenn es sich um die Get-Methode handelt, müssen Sie die gerade festgelegte Zufallszahl nach der URL hinzufügen. Anschließend können Sie die Daten mit oAjax.send() senden. Bei der Post-Methode müssen Sie dies jedoch auch tun Setzen Sie die Ajax-Header-Informationen oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); und senden Sie dann die Daten

4.对状态改变时进行判断oAjax.onreadystatechange当oAjax.readyState==4时表明接收完成此时再判断状态码oAjax.status>=200 && oAjax.status<300 || oAjax.status==304时表明成功了此时进行成功时的回调函数，否则就是失败了，此时返回状态码，告诉用户。

5.在这中间可以设置一个定时器，当在设定的时间内还没有获取成功则表明超时了，此时需要终止加载oAjax.abort()，并且告诉用户超时了，如果在设置的时间内加载成功了，则清除定时器。

此时ajax就封装完毕了，调用时就简单了

ajax({
		data:	{a:3,b:5},
		url:	'php/php_get.php',
		success:function(str){
			alert(str);	
		}
	});	

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

Das obige ist der detaillierte Inhalt vonWie erstelle ich Ajax selbst? Detaillierte Erläuterung der Schritte zum Erstellen von Ajax (mit Beispielanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!