ネイティブJS送信非同期データリクエスト例の詳細説明

この記事では、主に非同期データリクエストを送信するためのネイティブJSの関連情報を詳しく紹介します。興味のある方は参考にしてください。

プロジェクトを実行するときに、非同期データリクエストを使用する必要がある場合があります。現時点ではフレームワークへの依存関係がないため、非同期データリクエストを行うにはネイティブ JS を使用する必要があります。現時点では、リクエスト メソッドは 2 つだけです。1 つは AJAX で、もう 1 つは JSONP です。ネイティブ JS を介した非同期リクエストの単純なカプセル化。

AJAX

AJAXは、ページ全体を更新せずに、部分的なページのデータを更新できるデータリクエストメソッドです。 AJAX の技術的核心は XMLHttpRequest オブジェクトです。主なリクエスト プロセスは次のとおりです:

• XMLHttpRequest オブジェクトを作成する (新規)

• サーバーに接続する (オープン)

• リクエストを送信する (送信)

• 応答データを受信する(onreadystatechange)
  

何も言わずにコードを直接投稿する

/**
* 通过JSON的方式请求
* @param {[type]} params [description]
* @return {[type]}  [description]
*/
ajaxJSON(params) {
 params.type = (params.type || 'GET').toUpperCase();
 params.data = params.data || {};
 var formatedParams = this.formateParams(params.data, params.cache);
 var xhr;
 //创建XMLHttpRequest对象
 if (window.XMLHttpRequest) {
  //非IE6
  xhr = new XMLHttpRequest();
 } else {
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
 }
 //异步状态发生改变，接收响应数据
 xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
   if (!!params.success) {
    if (typeof xhr.responseText == 'string') {
     params.success(JSON.parse(xhr.responseText));
    } else {
     params.success(xhr.responseText);
    }
   }
  } else {
   params.error && params.error(status);
  }
 }
 if (params.type == 'GET') {
  //连接服务器
  xhr.open('GET', (!!formatedParams ? params.url + '?' + formatedParams : params.url), true);
  //发送请求
  xhr.send();
 } else {
  //连接服务器
  xhr.open('POST', params.url, true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  //发送请求
  xhr.send(formatedParams);
 }
},
/**
* 格式化数据
* @param {Obj}  data 需要格式化的数据
* @param {Boolean} isCache 是否加入随机参数
* @return {String}   返回的字符串
*/
formateParams: function(data, isCache) {
 var arr = [];
 for (var name in data) {
  arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
 }
 if (isCache) {
  arr.push('v=' + (new Date()).getTime());
 }
 return arr.join('&');
}

IE7以降はネイティブXHRオブジェクトをサポートしているため、直接使用できます: var oAjax = new XMLHttpRequest() ;。 IE6 以前のバージョンでは、XHR オブジェクトは MSXML ライブラリの ActiveXObject オブジェクトを通じて実装されています。

xhrのopen関数を通じてサーバーに接続し、主にリクエストメソッド、リクエストアドレス、非同期リクエスト（通常は非同期リクエスト）の有無の3つのパラメータを受け取ります。リクエスト メソッドには GET と POST の 2 つがあり、GET は URL 経由でデータをサーバーに送信し、POST は送信メソッドのパラメータとしてデータをサーバーに送信します。

ステータス変更関数onreadystatechangeをxhrにバインドします。これは主にxhrのreadyStateの変化を検出するために使用されます。非同期送信が成功すると、readyStateの値が0から4に変化し、onreadystatechangeイベントがトリガーされます。同じ時間です。 ReadyState のプロパティと対応する状態は次のとおりです。

0 (初期化されていない) オブジェクトは確立されていますが、初期化されていません (open メソッドがまだ呼び出されていません)
1 (初期化済み) オブジェクトは確立されています。
2 (データ送信) 送信メソッドは呼び出されていますが、現在のステータスと http ヘッダーは不明です
3 (データ送信中) 応答があったため、データの一部は受信されましたこのとき、responseBodyとresponseTextでデータの一部を取得する際にエラーが発生します。
4(完了) データの受信が完了しました。この時点で、responseBodyとresponseTextで完全なレスポンスデータを取得できます。 readystatechange イベントでは、まず応答が受信されたかどうかを判断し、次にサーバーがリクエストを正常に処理したかどうかを判断します。xhr.status は
ステータス コード

であり、ステータス コードは 2 で始まり、すべて成功したことを意味します。304 は、から取得されたことを意味します。上記のコードはリクエストごとに乱数を追加するため、キャッシュから値を取得することはなく、このステータスを判断する必要はありません。

JSONP

依然として上記の XMLHttpRequest オブジェクトを使用してクロスドメインリクエストを送信する場合、send 関数が呼び出されても、xhr のステータスは常に 0 になり、onreadystatechange イベントはトリガーされません。今回はJSONPリクエストメソッドです。

JSONP (JSON with Padding) はクロスドメインリクエストメソッドです。主な原理は、script タグのクロスドメイン リクエスト機能を利用し、その src 属性を通じてリクエストをサーバーに送信し、サーバーが JS コードを返し、Web ページがそのレスポンスを受け入れて、それを直接実行することです。これは、script タグを介して外部ファイルを参照する原理と同じです。

JSONPは
コールバック関数

とデータの2つの部分で構成されており、コールバック関数は通常Webページによって制御され、サーバーは関数とデータを組み合わせて文字列を返します。

たとえば、Web ページは script タグを作成し、その src 値を
http://www.test.com/json/?callback=process

に割り当てます。このとき、Web ページはリクエストを開始します。サーバーは、

関数のパラメーターとして返されるデータを組み合わせて渡します。サーバーから返されるデータの形式は、「process({'name:'xieyufei'})」に似ています。Web ページは、リクエスタがスクリプトであるため、これは process メソッドを直接呼び出してパラメータを渡すことと同じです。 何も言わずに直接コードを投稿してください。

/**
* 通过JSONP的方式请求
* @param {[type]} params [description]
* @return {[type]}  [description]
*/
ajaxJSONP(params) {
 params.data = params.data || {};
 params.jsonp = params.jsonp || 'callback';
 // 设置传递给后台的回调参数名和参数值
 var callbackName = 'jsonp_' + (new Date()).getTime();
 params.data[params.jsonp] = callbackName;
 var formatedParams = this.formateParams(params.data, params.cache);
 //创建script标签并插入到页面中
 var head = document.getElementsByTagName('head')[0];
 var script = document.createElement('script');
 head.appendChild(script);
 //创建jsonp回调函数 
 window[callbackName] = function(json) {
  head.removeChild(script);
  clearTimeout(script.timer);
  window[callbackName] = null;
  params.success && params.success(json);
 };
 //发送请求 
 script.src = (!!formatedParams ? params.url + '?' + formatedParams : params.url);
 //为了得知此次请求是否成功，设置超时处理
 if (params.time) {
  script.timer = setTimeout(function() {
   window[callbackName] = null;
   head.removeChild(script);
   params.error && params.error({
    message: '超时'
   });
  }, params.time);
 }
}

src 属性が script タグに設定されている場合、ブラウザはリクエストを送信しますが、リクエストを送信できるのは 1 回だけであり、その結果 script タグが再利用できなくなるため、script タグを削除する必要があります各操作の後。ブラウザがリクエストを送信する前に、コールバック関数をグローバルにバインドします。このコールバック関数は、データリクエストが成功したときに呼び出されます。

概要

非同期データを送信する 2 つの方法を統合し、dataType に基づいてどちらの方法を使用するかを決定します。完全なコードを投稿してください

var xyfAjax = {
 ajax: function(params) {
  params = params || {};
  params.cache = params.cache || false;
  if (!params.url) {
   throw new Error('参数不合法');
  }
  params.dataType = (params.dataType || 'json').toLowerCase();
  if (params.dataType == 'jsonp') {
   this.ajaxJSONP(params);
  } else if (params.dataType == 'json') {
   this.ajaxJSON(params);
  }
 },
 /**
 * 通过JSONP的方式请求
 * @param {[type]} params [description]
 * @return {[type]}  [description]
 */
 ajaxJSONP(params) {
  params.data = params.data || {};
  params.jsonp = params.jsonp || 'callback';
  // 设置传递给后台的回调参数名和参数值
  var callbackName = 'jsonp_' + (new Date()).getTime();
  params.data[params.jsonp] = callbackName;
  var formatedParams = this.formateParams(params.data, params.cache);
  //创建script标签并插入到页面中
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  head.appendChild(script);
  //创建jsonp回调函数 
  window[callbackName] = function(json) {
   head.removeChild(script);
   clearTimeout(script.timer);
   window[callbackName] = null;
   params.success && params.success(json);
  };
  //发送请求 
  script.src = (!!formatedParams ? params.url + '?' + formatedParams : params.url);
  //为了得知此次请求是否成功，设置超时处理
  if (params.time) {
   script.timer = setTimeout(function() {
    window[callbackName] = null;
    head.removeChild(script);
    params.error && params.error({
     message: '超时'
    });
   }, params.time);
  }
 },
 /**
 * 通过JSON的方式请求
 * @param {[type]} params [description]
 * @return {[type]}  [description]
 */
 ajaxJSON(params) {
  params.type = (params.type || 'GET').toUpperCase();
  params.data = params.data || {};
  var formatedParams = this.formateParams(params.data, params.cache);
  var xhr;
  //创建XMLHttpRequest对象
  if (window.XMLHttpRequest) {
   //非IE6
   xhr = new XMLHttpRequest();
  } else {
   xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
  //异步状态发生改变，接收响应数据
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4 && xhr.status == 200) {
    if (!!params.success) {
     if (typeof xhr.responseText == 'string') {
      params.success(JSON.parse(xhr.responseText));
     } else {
      params.success(xhr.responseText);
     }
    }
   } else {
    params.error && params.error(status);
   }
  }
  if (params.type == 'GET') {
   //连接服务器
   xhr.open('GET', (!!formatedParams ? params.url + '?' + formatedParams : params.url), true);
   //发送请求
   xhr.send(null);
  } else {
   //连接服务器
   xhr.open('POST', params.url, true);
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   //发送请求
   xhr.send(formatedParams);
  }
 },
 /**
 * 格式化数据
 * @param {Obj}  data 需要格式化的数据
 * @param {Boolean} isCache 是否加入随机参数
 * @return {String}   返回的字符串
 */
 formateParams: function(data, isCache) {
  var arr = [];
  for (var name in data) {
   arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
  }
  if (isCache) {
   arr.push('v=' + (new Date()).getTime());
  }
  return arr.join('&');
 }
}
xyfAjax.ajax({
 url:'http://www.xieyufei.com',
 type:'get', //or post
 dataType:'json', //or jsonp
 data:{
  name:'xyf'
 },
 success: function(data){
  console.log(data)
 }
})

以上がネイティブJS送信非同期データリクエスト例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。