Maison >interface Web >js tutoriel >Comprendre l'encapsulation Ajax
Recommandations d'apprentissage associées : ajax
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.
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.
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);
}
})复制代码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);
}
})复制代码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.
Il s'agit de la version finale du code, et il y aura des explications ciblées derrière le code.
var defaults = { type: 'get',
url: '',
data: {},
header: { 'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
};
// 使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults, options);复制代码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对象
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);复制代码 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: 'get',
url: '',
data: {},
header: { 'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
};
// 使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults, options);
// 创建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);
// 判断请求方式 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();
}
// 监听xhr对象下面的onload事件
// 当xhr对象接收完响应数据后触发
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);
}
}
}
ajax({ type: 'post',
// 请求地址
url: 'http://localhost:3000/responseData',
success: function (data) {
console.log('这里是success函数');
console.log(data)
}
})
</script>复制代码ok，到此封装ajax函数完毕，为什么要封装，减少使用多个ajax请求的时候代码冗余。把代码用函数封装起来使用的时候调用函数就可。封装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!