関連する学習に関する推奨事項: ajax
序文
前回の記事では、ajax の原理、機能、実装について説明しました。しかし、それらは ajax リクエストとレスポンス操作を実装しているだけです。ブラウザとサーバー間のリクエストとレスポンスは 1 つだけではありません。100 個のリクエストとレスポンスを追加すると、同様のコードを 100 回記述する必要がありますか?
この記事は、複数の ajax を送信する方法の問題を解決するものです。 ajax について詳しくない場合は、前回の記事「Understanding ajax」をよく読んでください。この記事の内容は約 5 分で理解できます。
この記事では実際に関数について説明します。次に見てみましょう。
カプセル化の考え方
複数のリクエストを送る動作は同じですが、複数のリクエストを書くとコードが重複してしまいます。コードの冗長性を避けるために、関数のアイデアを使用して、Ajax オペレーション コードを関数にカプセル化し、異なるリクエスト関数によって渡されるパラメーターはすべて異なります。 Ajax リクエストを複数回送信したい場合は、カプセル化された関数を呼び出すだけです。
ajax 関数のカプセル化の基本的な実装
前述したように、関数を使用して ajax をカプセル化すると、ajax 実装の 4 つのステップが関数に組み込まれ、関数が呼び出されます。より多くのパラメータが渡される場合、パラメータはオブジェクト オプションで表されます。このオブジェクトには、リクエスト メソッド、リクエスト アドレス、リクエストが正常に送信された後にトリガーされるリクエスト処理関数が含まれます。
以下の例を見てみましょう。コードでは、ajax 操作が ajax 関数にカプセル化され、ajax 関数が呼び出され、パラメーターが渡されます。 xht の onload イベントがトリガーされた後、success 関数が呼び出され、対応するコンテンツ xhr.responsetext が出力されます。コンソールに。
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);
}
})复制代码ログイン後にコピー
リクエスト パラメータのカプセル化
上記のコードは基本的なカプセル化を実装しています。次に、リクエスト パラメータをカプセル化する方法について説明します。post メソッドと get メソッドは前の記事で紹介しました。2 つのメソッドリクエストの送信に使用されます。リクエスト メソッドごとにリクエスト パラメータも異なる場所に配置されます。たとえば、get メソッドは URL の後に接続され、post メソッドは send メソッドの中に配置されます。 ajaxメソッドの実パラメータオブジェクトにdata属性を追加し、data属性の値がリクエストパラメータとなります。
for-in ループを使用して、ajax 関数内のリクエスト パラメーターを結合し、リクエスト パラメーター内の冗長な & を削除します。次にリクエストの種類を判断し、getリクエストの場合はURLの後ろに先ほど繋ぎ合わせたparamsを繋ぎ合わせるだけ、postリクエストの場合はsendメソッドにパラメータを入れて、その配下のsetRequestHeaderメソッドを使用します。 xhr オブジェクトを使用してリクエストパラメータの形式を設定します。
コードは次のとおりです:
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);
}
})复制代码ログイン後にコピー
カプセル化された最終バージョン
最初の 2 つのウォームアップを入力した後、ajax パッケージの最終バージョンを直接確認します。
Ultimate Edition パッケージは以下の問題を解決します。
- サーバーから返されるデータ形式の処理
- ブラウザリクエストパラメータ形式の処理
- ステータスコードが200ではなく呼び出し失敗関数
- デフォルトのパラメータを設定する 冗長性を削減する
#これはコードの最終バージョンであり、コードの背後に的を絞った説明が含まれます。
最終バージョン コードの分析:
冗長性を減らすためにデフォルト パラメーターを設定します
ajax 関数にデフォルト パラメーター オブジェクトを設定します。 ajax 関数を呼び出すときにパラメーターを渡すときに、関数にデフォルトのパラメーターを追加する必要があるのはなぜですか? 最終的には、コードの冗長性を避けるためです。複数の ajax オブジェクトが作成される場合、同じパラメーターが渡される可能性があります。呼び出し時に特定のパラメータ オプションのみを渡し、そのオプションでデフォルト パラメータのデフォルトをオーバーライドします。関数内でデフォルトを使用すると、この問題を完全に解決できます。 Object.assign(defaults, 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);复制代码ログイン後にコピー
Object.assign メソッド
補足 :Object.assign メソッド
具体的には、この記事に必要なコードを次に示します。さらに詳しい情報については、公式ドキュメントを参照してください
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);复制代码ログイン後にコピー
浏览器请求参数格式的处理
- 判断请求方式是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: '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函数要考虑到以下几点：
- 请求方式(get)，请求参数要与地址拼接后放到open方法中。
- 请求方式post，请求参数类型是json数据类型，要将json转字符串后放到send方法中。
- 对服务器响应处理时获取响应头中的响应数据格式。
- 响应的格式是json对象，处理响应结果要将字符串转json对象。
- 设置ajax函数的默认参数减少代码冗余。
其他相关学习推荐：javascript
以上がAjax カプセル化を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
