Comprendre l'encapsulation Ajax

Recommandations d'apprentissage associées : ajax

Avant-propos

L'article précédent parlait du principe, de la fonction et de l'implémentation d'ajax. Mais ils implémentent uniquement une opération de requête et de réponse ajax. Il n'y aura pas qu'une seule requête et réponse entre le navigateur et le serveur. Si vous ajoutez 100 requêtes et réponses, devez-vous écrire un code similaire 100 fois ?

Cet article vise à résoudre le problème de l'envoi de plusieurs ajax. Si vous ne connaissez pas ajax, lisez attentivement mon dernier article "Comprendre ajax". Vous pouvez obtenir le contenu de cet article en 5 minutes environ.

Cet article parle en fait d'une fonction. Jetons un coup d'œil ensuite.

L'idée de l'encapsulation

Les opérations d'envoi de plusieurs requêtes sont les mêmes. Si vous écrivez plusieurs requêtes, il y aura du code en double. Pour éviter la redondance du code, vous pouvez utiliser l'idée d'une fonction pour encapsuler le code d'opération ajax dans une fonction. Les paramètres transmis par les différentes fonctions de requête sont tous différents. Si vous souhaitez envoyer des requêtes ajax plusieurs fois, appelez simplement notre fonction encapsulée.

Implémentation de base de l'encapsulation de la fonction ajax

Comme mentionné précédemment, utiliser des fonctions pour encapsuler ajax, puis mettre les quatre étapes de l'implémentation ajax dans la fonction, puis appeler cette fonction, car il y en a plus paramètres passés, donc les paramètres Représentés par un objet options. Cet objet inclut la méthode de demande, l'adresse de la demande et la fonction de traitement de la demande déclenchée une fois la demande envoyée avec succès.

Jetons un coup d'œil à l'exemple ci-dessous. Dans le code, l'opération ajax est encapsulée dans la fonction ajax, la fonction ajax est appelée et les paramètres sont transmis. Une fois l'événement onload sous xht déclenché, la fonction de réussite est appelée et le contenu correspondant xhr.responsetext est imprimé. à la console.

function ajax(options) {
    var xhr = new XMLHttpRequest();
    xhr.open(options.type, options.url);
    xhr.send();
    xhr.onload = function () {
        options.success(xhr.responsetext);
    }
}
ajax({ 
     type: 'get',
     url: 'http://www.example.com',
     success: function (data) { 
         console.log(data);
     }
 })复制代码

Encapsulation des paramètres de requête

Le code ci-dessus implémente l'encapsulation de base. Parlons ensuite de la façon d'encapsuler les paramètres de requête. La méthode post et la méthode get ont été présentées dans l'article précédent. sont utilisés pour envoyer des requêtes. Les paramètres de requête des différentes méthodes de requête sont également placés à différents endroits. Par exemple, la méthode get est ajoutée après l'URL et la méthode post est placée dans la méthode d'envoi. Nous ajoutons un attribut de données à l'objet paramètre réel de la méthode ajax, et la valeur de l'attribut de données est le paramètre de requête.

Utilisez la boucle for-in pour fusionner les paramètres de requête dans la fonction ajax et supprimez le & redondant dans les paramètres de requête. Ensuite, jugez le type de requête. S'il s'agit d'une requête get, collez simplement les paramètres qui viennent d'être épissés derrière l'URL ; s'il s'agit d'une requête de publication, placez les paramètres dans la méthode d'envoi et utilisez la méthode setRequestHeader sous la méthode d'envoi. Objet xhr pour définir le type de paramètre de requête.

Le code est le suivant :

	var xhr = new XMLHttpRequest();
	// 拼接请求参数的变量
	var params = '';
	// 循环用户传递进来的对象格式参数	for (var attr in options.data) {
		// 将参数转换为字符串格式
		params += attr + '=' + options.data[attr] + '&';
	}
	// 将参数最后面的&截取掉 
	// 将截取的结果重新赋值给params变量
	params = params.substr(0, params.length - 1);

	// 判断请求方式	if (options.type == 'get') {
		options.url = options.url + '?' + params;
	}


	// 配置ajax对象
	xhr.open(options.type,options.url);
	// 如果请求方式为post	if (options.type == 'post') {
		// 设置请求参数格式的类型
		xhr.setRequestHeader('Content-Type', contentType);
    	// 向服务器端传递请求参数
		xhr.send(params);
		
	}else {
		// 发送请求
		xhr.send();
	}
        xhr.onload = function () {
        options.success(xhr.responsetext);
        }
        
  ajax({ 
     type: 'get',
     url: 'http://www.example.com',
     data: {
         name:'linglong',
         age:20
     },
     success: function (data) { 
         console.log(data);
     }
 })复制代码

Emballage de la version finale

Après avoir entré les deux premiers échauffements, regardez directement la version finale de l'emballage ajax. Le package Ultimate Edition résout les problèmes suivants.

• Traitement du format des données de retour du serveur
• Traitement du format des paramètres de requête du navigateur
• Le code d'état n'est pas 200 échec de l'appel de fonction
• Définir les paramètres par défaut Réduire la redondance

Il s'agit de la version finale du code, et il y aura des explications ciblées derrière le code.

Analyse du code de la version ultime :

Définir les paramètres par défaut pour réduire la redondance

1. Définir l'objet paramètre par défaut dans la fonction ajax. Pourquoi devons-nous ajouter des paramètres par défaut à la fonction lorsque nous transmettons des paramètres lors de l'appel de la fonction ajax ? En dernière analyse, c'est pour éviter la redondance du code. Si plusieurs objets ajax sont créés, les mêmes paramètres peuvent être transmis. Transmettez uniquement des options de paramètres spécifiques lors de l'appel et laissez les options remplacer les paramètres par défaut. L'utilisation des valeurs par défaut dans la fonction peut parfaitement résoudre ce problème. Object.assign(defaults, options) consiste à laisser les valeurs par défaut remplacer les options.

	var defaults = {			type: 'get',
			url: '',
			data: {},
			header: {				'Content-Type': 'application/x-www-form-urlencoded'
				},
			success: function () {},
			error: function () {}
		};
		// 使用options对象中的属性覆盖defaults对象中的属性
		Object.assign(defaults, options);复制代码

Méthode Object.assign

Supplémentaire : Méthode Object.assign

Voici un code qui suffit pour cet article, spécifiquement Pour des informations plus détaillées, veuillez lire la documentation officielle

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }复制代码

创建ajax对象，拼接请求参数

		// 创建ajax对象
		var xhr = new XMLHttpRequest();
		// 拼接请求参数的变量
		var params = '';
		// 循环用户传递进来的对象格式参数		for (var attr in defaults.data) {
				// 将参数转换为字符串格式
				params += attr + '=' + defaults.data[attr] + '&';
			}
		// 将参数最后面的&截取掉 
		// 将截取的结果重新赋值给params变量
		params = params.substr(0, params.length - 1);复制代码

浏览器请求参数格式的处理

3. 判断请求方式是get合适post。如果是get就将请求参数拼接到请求地址后面，再配置ajax对象，用send方法发送请求；如果是post就先配置ajax对象，然后判断请求参数的数据类型，如果是json类型就把数据类型转换成字符串处理，如果是application/x-www-form-urlencoded就直用send方法向服务器传递普通请求参数发送请求。

		if (defaults.type == 'get') {
				defaults.url = defaults.url + '?' + params;
			}
		// 配置ajax对象
		xhr.open(defaults.type, defaults.url);
		// 如果请求方式为post		if (defaults.type == 'post') {
				// 用户希望的向服务器端传递的请求参数的类型
				var contentType = defaults.header['Content-Type']
				// 设置请求参数格式的类型
				xhr.setRequestHeader('Content-Type', contentType);
				// 判断用户希望的请求参数格式的类型
				// 如果类型为json				if (contentType == 'application/json') {
					// 向服务器端传递json数据格式的参数
					xhr.send(JSON.stringify(defaults.data))
				}else {
					// 向服务器端传递普通类型的请求参数
					xhr.send(params);
				}

			}else {
			// 发送请求
			xhr.send();
		}复制代码

服务器返回数据格式的处理

4.当请求发送成功，就会触发onload事件，执行函数。我们要对服务器响应的数据进行格式判断，用getResponseHeader方法获取响应头的数据，Content-Type是响应头的属性名称。如果响应头中包含application/json这个字符，就说明响应的是json对象，但是传输的时候是字符串形式传输，所以用json下的parse方法转字符串为对象。 如果http的状态码是200就说明客户端发来的请求在服务器端得到了正确的处理。调用success函数，否则调用错伏处理函数。

		xhr.onload = function () {
			// xhr.getResponseHeader()
			// 获取响应头中的数据
			var contentType = xhr.getResponseHeader('Content-Type');
			// 服务器端返回的数据
			var responseText = xhr.responseText;
			// 如果响应类型中包含applicaition/json			if (contentType.includes('application/json')) {
				// 将json字符串转换为json对象
				responseText = JSON.parse(responseText)
			}
			// 当http状态码等于200的时候			if (xhr.status == 200) {
				// 请求成功 调用处理成功情况的函数
				defaults.success(responseText, xhr);
			}else {
				// 请求失败 调用处理失败情况的函数
				defaults.error(responseText, xhr);
			}
		}
	}复制代码

完整的封装代码贴出来，如下所示：

<script type="text/javascript">	function ajax (options) {
		// 存储的是默认值
		var defaults = {			type: &#39;get&#39;,
			url: &#39;&#39;,
			data: {},
			header: {				&#39;Content-Type&#39;: &#39;application/x-www-form-urlencoded&#39;
				},
			success: function () {},
			error: function () {}
		};
		// 使用options对象中的属性覆盖defaults对象中的属性
		Object.assign(defaults, options);
		// 创建ajax对象
		var xhr = new XMLHttpRequest();
		// 拼接请求参数的变量
		var params = &#39;&#39;;
		// 循环用户传递进来的对象格式参数		for (var attr in defaults.data) {
				// 将参数转换为字符串格式
				params += attr + &#39;=&#39; + defaults.data[attr] + &#39;&&#39;;
			}
		// 将参数最后面的&截取掉 
		// 将截取的结果重新赋值给params变量
		params = params.substr(0, params.length - 1);
		// 判断请求方式		if (defaults.type == &#39;get&#39;) {
				defaults.url = defaults.url + &#39;?&#39; + params;
			}
		// 配置ajax对象
		xhr.open(defaults.type, defaults.url);
		// 如果请求方式为post		if (defaults.type == &#39;post&#39;) {
				// 用户希望的向服务器端传递的请求参数的类型
				var contentType = defaults.header[&#39;Content-Type&#39;]
				// 设置请求参数格式的类型
				xhr.setRequestHeader(&#39;Content-Type&#39;, contentType);
				// 判断用户希望的请求参数格式的类型
				// 如果类型为json				if (contentType == &#39;application/json&#39;) {
					// 向服务器端传递json数据格式的参数
					xhr.send(JSON.stringify(defaults.data))
				}else {
					// 向服务器端传递普通类型的请求参数
					xhr.send(params);
				}

			}else {
			// 发送请求
			xhr.send();
		}
		// 监听xhr对象下面的onload事件
		// 当xhr对象接收完响应数据后触发
		xhr.onload = function () {
			// xhr.getResponseHeader()
			// 获取响应头中的数据
			var contentType = xhr.getResponseHeader(&#39;Content-Type&#39;);
			// 服务器端返回的数据
			var responseText = xhr.responseText;
			// 如果响应类型中包含applicaition/json			if (contentType.includes(&#39;application/json&#39;)) {
				// 将json字符串转换为json对象
				responseText = JSON.parse(responseText)
			}
			// 当http状态码等于200的时候			if (xhr.status == 200) {
				// 请求成功 调用处理成功情况的函数
				defaults.success(responseText, xhr);
			}else {
				// 请求失败 调用处理失败情况的函数
				defaults.error(responseText, xhr);
			}
		}
	}
	ajax({		type: &#39;post&#39;,
		// 请求地址
		url: &#39;http://localhost:3000/responseData&#39;,
		success: function (data) {
			console.log(&#39;这里是success函数&#39;);
			console.log(data)
		}
	})
</script>复制代码

文章结束

ok，到此封装ajax函数完毕，为什么要封装，减少使用多个ajax请求的时候代码冗余。把代码用函数封装起来使用的时候调用函数就可。封装ajax函数要考虑到以下几点：

• 请求方式(get)，请求参数要与地址拼接后放到open方法中。
• 请求方式post，请求参数类型是json数据类型，要将json转字符串后放到send方法中。
• 对服务器响应处理时获取响应头中的响应数据格式。
• 响应的格式是json对象，处理响应结果要将字符串转json对象。
• 设置ajax函数的默认参数减少代码冗余。

其他相关学习推荐：javascript

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!