1. ホーム
  2. Web プログラミング
  3. AJAX関連

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の他の関連記事にも注目してください