Comment créer soi-même du ajax ? Explication détaillée des étapes pour créer ajax (avec exemple d'analyse)

Cet article parle principalement de la façon de créer un cas de ajax Jetons maintenant un coup d'œil à cet article ensemble

J'apprends l'ajax depuis un moment, venez maintenant. Résumez la construction et les fonctions d’ajax.

ajax est utilisé pour demander des données en arrière-plan. Sa caractéristique est de demander des données de manière asynchrone (lire les données sans actualiser) avant que l'ajax n'apparaisse. Un formulaire contenant de nombreux éléments est tout simplement un cauchemar pour les utilisateurs. Si une partie du formulaire est mal remplie, une erreur apparaîtra lors de la soumission finale, puis le formulaire devra être rempli à nouveau après l'avoir rempli plusieurs fois. l'utilisateur perdra la possibilité de remplir le formulaire Désir. Puis, après l'émergence d'ajax, ce problème a été bien résolu. Chaque fois qu'un élément est rempli, le résultat sera vérifié via le serveur et renvoyé, ce qui améliore dans une certaine mesure l'efficacité et apporte une meilleure expérience aux utilisateurs. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois Colonne Manuel de développement AJAX pour apprendre)

Expliquons maintenant quelques problèmes liés à l'utilisation d'ajax : Tout d'abord, Sous IE, les données ne sont pas mises à jour à temps (à cause du cache). Une URL n'est lue qu'une seule fois, donc l'URL doit être modifiée à chaque fois qu'elle est actualisée. Cependant, dans le nom de domaine ? Les paramètres suivants n'affectent pas la récupération de la page, mais les navigateurs avec des URL différentes rechargeront la page, résolvant ainsi le problème de mise en cache des pages. Vous pouvez passer url+'?t='+new Date().getTime(); ou vous pouvez utiliser Math.random(); deuxièmement, il y a un problème avec le format de données reçu, qui nécessite un codage unifié, troisièmement, les lectures ajax ; toutes les choses, toutes renvoyées sont des caractères, nous devons alors analyser les données nous-mêmes. Ensuite, écrivez vous-même un ajax :

1. Créez un objet ajax var oAjax=new XMLHttpRequest() ~Version supérieure du navigateur ou new ActiveXObject('Microsoft. XMLHTTP ')~IE

2. Établir une connexion oAjax.open(mode, adresse, asynchrone)

3. Envoyer la demande oAjax.send();

4. Accepter onreadystatechange lit lorsque le statut change

oCode d'état Ajax.readyState

0 L'objet ajax vient d'être créé (nouvel objet ajax)

1. Connecté au serveur (méthode ouverte vient d'être exécutée)

2. Envoi terminé

3. Réception terminée (en-tête du fichier) <.>

4. Une fois la réception terminée (corps), si la demande de contenu échoue, il y aura 4

Le code d'état http :

oAjax.status 200<=n<300 ou n==304 signifie l'envoi réussi

oAjax.responseText renvoie les données

encodeURIComponent(str)                           La chaîne est codée en tant que composant URI

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 .Créez une fonction ajax, car les paramètres dans ajax sont variables et disposés dans des positions différentes, json est utilisé comme données et les options des paramètres sont transmises. Si elles sont transmises, les données transmises seront utilisées si. Non, les données transmises seront utilisées. Les paramètres par défaut incluent le type de méthode d'envoi, le paramètre de délai d'attente et les données.

2.L'URL doit ajouter des variables aléatoires à la fin, afin que vous puissiez d'abord ajouter une clé aux données options.data.t=Math.random () ;Encodez ensuite l’URL et traitez les données.

3. Déterminez ensuite le navigateur. Chrome et ff prennent en charge window.XMLHttpRequest, tandis que le navigateur IE ne prend en charge qu'ActiveXObject('Microsoft.XMLHTTP' ), puis déterminer le type d'envoi. S'il s'agit de la méthode get, vous devez ajouter le nombre aléatoire juste défini après l'URL, puis vous pouvez envoyer les données oAjax.send(); cependant, pour la méthode post, vous devez également le faire. définir les informations d'en-tête ajax oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); puis envoyer les données

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使用手册栏目中学习），有问题的可以在下方留言提问。

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!