Ajax関数をラップする方法
2022-01-15 03:19:49
Ajax関数のラップ方法
Ajaxの機能です。
// An Ajax function
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest;
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET","https://jsonplaceholder.typicode.com/users");
xhr.send(null);
xhr.onreadystatechange = function(){
if(this.readyState === 4){
console.log(xhr.responseText)
}
}
独自のAjax関数をラッピングする
パラメータ 1: {string} リクエストメソッド - メソッド
パラメータ2:{string} リクエストアドレス - url
パラメータ 3: {object} リクエストパラメータ - params
パラメータ 4: {function} リクエストが完了したときに実行されるコールバック関数 - done
function ajax(method,url,params,done){
// Uniformly convert the letters in the method to uppercase to make it easier to determine the GET method later
method = method.toUpperCase();
// IE6 compatibility
var xhr = window.XMLHttpRequest
xhr = window. new XMLHttpRequest()
: new ActiveXObject("Microsoft.XMLHTTP");
//create open a connection open
//transform the object format parameters to urlencoded mode
//create a new array, using a for loop, that will object format parameters that
// in the form of (id = 1), each key-value pair is connected with & symbols
var pairs = [];
for(var k in params){
pairs.push(k + "=" + params[k]);
}
var str = pairs.join("&");
// determine if it is a get method, if it is a get method, you need to change the value of the url
if(method == "GET"){
url += "? " + str;
}
// create open a connection
xhr.open(method,url);
var data = null;
if(method == "POST"){
//post method Also need to set request header, request body
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
data = str;
}
xhr.send(data);
//execute the callback function
xhr.onreadystatechange = function(){
if(this.readyState == 4) {
done(JSON.parse(this.responseText));
}return;
// Just execute the callback function passed in externally
// requires the response body
}
}
// call the function
// get method
// ajax("GET","http://localhost:3000/users",
// {"id":1},
// function(data){
// console.log(data);
// });
// post method
ajax("POST", "http://localhost:3000/users",
{ "name": "lucky","class":2,"age":20 },
function (data) {
console.log(data);
});
以上、Ajax関数をカプセル化する方法について詳しく説明しましたが、Ajax関数のカプセル化については、Script Houseの他の関連記事にも注目してください
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Ajaxの初期実装(vscode+node.js+expressフレームワークを使用)。
-
ajax+phpを使った商品価格計算
-
ajax post download flaskのファイルストリームと中国語のファイル名の問題
-
Ajaxファイルアップロード機能(Spring MVC)
-
バックエンドのAjaxから動的にデータを取得するbootstrap select2コード
-
AJAXによるページ更新効果の指定部分の実現
-
フォームデータを用いた AJAX アップロードファイルストリーム
-
Spring MVC + ajax によるメッセージの検証
-
XMLHttpRequestオブジェクトを使わずにAjaxの効果を実現する方法まとめ
-
Ajaxの動作原理と解析例のメリット・デメリット