Verstehen Sie die Ajax-Kapselung

Verwandte Lernempfehlungen: ajax

Vorwort

Der vorherige Artikel befasste sich mit dem Prinzip, der Funktion und der Implementierung von Ajax. Sie implementieren jedoch nur eine Ajax-Anfrage- und Antwortoperation. Es gibt nicht nur eine Anfrage und eine Antwort zwischen dem Browser und dem Server. Wenn Sie 100 Anfragen und Antworten hinzufügen, müssen Sie dann 100 Mal ähnlichen Code schreiben?

Dieser Artikel soll das Problem lösen, wie mehrere Ajax-Dateien gesendet werden. Wenn Sie Ajax nicht kennen, lesen Sie meinen letzten Artikel „Ajax verstehen“ sorgfältig durch. Sie können den Inhalt dieses Artikels in etwa 5 Minuten erhalten.

In diesem Artikel geht es tatsächlich um eine Funktion. Werfen wir als nächstes einen Blick darauf.

Die Idee der Kapselung

Die Vorgänge beim Senden mehrerer Anfragen sind die gleichen. Wenn Sie mehrere Anfragen schreiben, gibt es doppelten Code. Um Coderedundanz zu vermeiden, können Sie die Idee einer Funktion verwenden, um den Ajax-Operationscode in eine Funktion zu kapseln. Die von verschiedenen Anforderungsfunktionen übergebenen Parameter sind alle unterschiedlich. Wenn Sie Ajax-Anfragen mehrmals senden möchten, rufen Sie einfach unsere gekapselte Funktion auf.

Grundlegende Implementierung der Ajax-Funktionskapselung

Wie bereits erwähnt, werden bei der Verwendung von Funktionen zur Kapselung von Ajax die vier Schritte der Ajax-Implementierung in die Funktion eingefügt und dann die Funktion aufgerufen. Da viele Parameter übergeben werden, sind die Parameter vorhanden dargestellt durch ein Objektoptionen. Dieses Objekt enthält die Anforderungsmethode, die Anforderungsadresse und die Anforderungsverarbeitungsfunktion, die nach erfolgreichem Senden der Anforderung ausgelöst wird.

Schauen wir uns das Beispiel unten an. Im Code wird die Ajax-Operation in die Ajax-Funktion gekapselt, die Ajax-Funktion aufgerufen und die Parameter übergeben. Nachdem das Onload-Ereignis unter xht ausgelöst wurde, wird die Erfolgsfunktion aufgerufen und der entsprechende Inhalt xhr.responsetext gedruckt zur Konsole.

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);
     }
 })复制代码

Kapselung von Anforderungsparametern

Als nächstes sprechen wir über die Kapselung von Anforderungsparametern. Im vorherigen Artikel haben wir die Post-Methode und die Get-Methode zum Senden verschiedener Anforderungsparameter vorgestellt Die Anforderungsmethode wird ebenfalls an verschiedenen Orten platziert. Beispielsweise wird die Get-Methode nach der URL gespleißt und die Post-Methode wird innerhalb der Sendemethode platziert. Wir fügen dem tatsächlichen Parameterobjekt der Ajax-Methode ein Datenattribut hinzu, und der Datenattributwert ist der Anforderungsparameter.

Verwenden Sie die For-In-Schleife, um die Anforderungsparameter in der Ajax-Funktion zu verbinden und das redundante & in den Anforderungsparametern zu entfernen. Wenn es sich um eine Get-Anfrage handelt, fügen Sie einfach die Parameter ein, die gerade hinter der URL gespleißt wurden. Wenn es sich um eine Post-Anfrage handelt, fügen Sie die Parameter in die Send-Methode ein und verwenden Sie die setRequestHeader-Methode unter xhr-Objekt zum Festlegen des Anforderungsparametertyps.

Der Code lautet wie folgt:

	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);
     }
 })复制代码

Verpacken der ultimativen Version

Schauen Sie sich nach Eingabe der ersten beiden Aufwärmphasen direkt die endgültige Version des Ajax-Pakets an. Das Ultimate Edition-Paket löst die folgenden Probleme.

Verarbeitung des Server-Rückgabedatenformats
Verarbeitung des Browser-Anforderungsparameterformats
Rufen Sie die Fehlerfunktion auf, wenn der Statuscode nicht 200 ist.
Standardparameter festlegen, um Redundanz zu reduzieren. Dies ist die ultimative Version des Codes Seien Sie spezifische Anweisungen hinter der sexuellen Erklärung des Codes.
Analysieren Sie den ultimativen Versionscode:

Legen Sie Standardparameter fest, um Redundanz zu reduzieren.

Legen Sie das Standardparameterobjekt in der Ajax-Funktion fest. Warum müssen wir der Funktion Standardparameter hinzufügen, wenn wir beim Aufruf der Ajax-Funktion Parameter übergeben? Letztendlich geht es darum, Coderedundanz zu vermeiden. Wenn mehrere Ajax-Objekte erstellt werden, können wir dieselben Parameter übergeben Übergeben Sie beim Aufruf nur bestimmte Parameteroptionen und lassen Sie die Optionen die Standardparameter überschreiben. Die Verwendung von Standardwerten innerhalb der Funktion kann dieses Problem perfekt lösen. Object.assign(defaults, options) dient dazu, dass Standardeinstellungen Optionen überschreiben.

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

Object.assign-Methode

Ergänzung

: Object.assign-Methode

Hier ist ein Code, der für diesen Artikel ausreicht. Weitere Informationen finden Sie in der offiziellen Dokumentation

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

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Ajax-Kapselung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!