Wie schreibe ich natives Ajax?

Die Methode zum Schreiben von nativem Ajax: Erstellen Sie zuerst ein XMLHttpRequest-Objekt. Schreiben Sie dann die Rückruffunktion onreadystatechange und senden Sie schließlich die Anforderung.

Ajax (Abkürzung für Asynchronous JavaScript and XML) ist eine Webentwicklungstechnologie, die Daten asynchron anfordert, was sehr hilfreich für die Verbesserung der Benutzererfahrung und der Seitenleistung ist.

Einfach ausgedrückt lädt Ajax Hintergrunddaten durch asynchrone Anfragen und rendert sie auf der Webseite, ohne die Seite neu zu laden. Zu den gängigen Anwendungsszenarien gehört die Formularüberprüfung, um sich anzumelden oder nicht. Erfolgreiche Eingabe, Eingabeaufforderungen im Dropdown-Feld für die Baidu-Suche, Abfrage der Express-Sendungsverfolgungsnummer usw.

Wenn Sie ein umfassendes Verständnis von Ajax erlangen möchten, können Sie zum Js-Tutorial gehen, um ein umfassendes Verständnis davon zu erlangen.

Jetzt ist Ajax nach verschiedenen Optimierungen sehr praktisch geworden. Für die Verwendung von Jquery ist beispielsweise nur eine Zeile erforderlich, um Ajax zu verwenden.

Wie sieht also natives Ajax aus?

Lassen Sie uns einen Blick darauf werfen.

 <script>
	function ajax(url){
		//创建XMLHttpRequest对象,新版本的浏览器可以直接创建XMLHttpRequest对象,IE5或IE6没有
		//XMLHttpRequest对象，而是用的ActiveXObject对象
	       var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
	       xhr.open("get",url,true);
	       xhr.send();//发送请求
	       xhr.onreadysattechange = () =>{
	           if(xhr.readystate == 4){//返回存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
	               if(xhr.status == 200){//返回状态码
	                   var data = xhr.responseTEXT;
	                   return data;
	               }
	           }
	       }    
	   }
</script>

readystate:

Speichern Sie den Status von XMLHttpRequest. Wechselt von 0 auf 4.

0: Die Anfrage ist nicht initialisiert

1: Die Serververbindung wurde hergestellt

2: Die Anfrage wurde empfangen

3: Die Anfrage wird verarbeitet

4: Die Anfrage wurde abgeschlossen und die Antwort ist bereit

Status:

200: „OK“

404: Seite nicht gefunden

405: Falsche Anfragemethode

500: Interner Serverfehler

403: Anfrage verboten

Ajax hat zwei Anfragemethoden:

Anfragemethode abrufen

<script>
	function ajax() {
		//创建核心对象
		xhr = null;
		if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象
			xhr = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//编写回调函数
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				alert(xhr.responseText)
			}
		}
		//open设置请求方式和请求路径
		xhr.open("get", "/Ajax/ajax?userId=10");//一个url还传递了数据，后面还可以写是否同步
		//send 发送
		xhr.send();
	}
</script>

Anfragemethode posten

<script>
	function ajax() {
		//创建核心对象
		xhr = null;
		if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象.
			xhr = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//编写回调函数
		xhr.onreadystatechange = function() {	
			if (xhr.readyState == 4 && xhr.status == 200) {
				alert(xhr.responseText)//警告框，显示返回的Text
			}
		}
		//open设置请求方式和请求路径
		xhr.open("post", "/Ajax/ajax2");//一个servlet，后面还可以写是否同步
		//设置请求头
		xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
		//send 发送
		xhr.send("userId=10");
	}
</script>

Das obige ist der detaillierte Inhalt vonWie schreibe ich natives Ajax?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!