Comment écrire en Ajax natif

La méthode d'écriture en Ajax natif : créez d'abord un objet XMLHttpRequest ; puis écrivez la fonction de rappel onreadystatechange ; puis configurez les informations de la demande et enfin envoyez la demande.

Ajax (abréviation de Asynchronous JavaScript and XML) est une technologie de développement Web qui demande des données de manière asynchrone, ce qui est très utile pour améliorer l'expérience utilisateur et les performances des pages.

En termes simples, Ajax charge les données d'arrière-plan via des requêtes asynchrones et les restitue sur la page Web sans recharger la page. Les scénarios d'application courants incluent la vérification du formulaire pour se connecter ou non. Entrée réussie, invite de la liste déroulante de recherche Baidu et requête de numéro de suivi express, etc.

Si vous souhaitez avoir une compréhension complète d'Ajax, vous pouvez accéder au Tutoriel Js pour en avoir une compréhension complète.

Maintenant, Ajax est devenu très pratique après diverses optimisations. Par exemple, utiliser Jquery ne nécessite qu'une seule ligne pour utiliser Ajax.

Alors, à quoi ressemble l'Ajax natif ?

Jetons un coup d'oeil.

 <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 :

Stocke le statut de XMLHttpRequest. Passe de 0 à 4.

0 : La requête n'est pas initialisée

1 : La connexion au serveur a été établie

2 : La requête a été reçue

3 : La requête est en cours de traitement

4 : La demande est terminée et la réponse est prête

statut :

200 : "OK"

404 : Page non trouvé

405 : Requête incorrecte

500 : Erreur interne du serveur

403 : Requête interdite

Ajax a deux méthodes de requête :

obtenir la méthode de demande

<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>

méthode de demande de publication

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!