ajax のシンプルなパッケージ化の詳細な紹介

この記事では主に、ajax の単純なカプセル化の詳細な紹介を共有します。皆さんのお役に立てれば幸いです。

ajax は一般に 4 つの単純な部分に分かれています:

1. ajax オブジェクトを作成します (IE と互換性がある場合は、いくつかの処理を行う必要があります)

2. Connection、つまりリクエスト オブジェクトの open メソッド(get と post は少し異なります。get パラメーターは URL の後に置く必要があり、post はリクエスト ヘッダーを設定する必要があります)

3. Send、つまりリクエスト オブジェクトの送信関数 (post パラメーターはsend)

4. Receive、in onreadystatechange (ストレージ関数または関数名、readyState 属性が変更されるたびに、この関数が呼び出されます。) 関数。

タイムアウトとこれらを追加することもできます

onreadystatechange分析

1. 最初にreadyStateのステータスを決定する必要があります(4つの状態があります)

   ①: 0、リクエストは初期化されていません

   ②: 1 、サーバー接続が確立されました ;

   ③: 2. リクエストが受信されました;

   ④: 3. リクエストが処理されています;

   ⑤: 4. リクエストが完了し、応答の準備が整いました

2. readyStateが4に等しい場合、ステータスを再度判断する必要があります

3. リクエストが成功した場合、ステータスステータスは200〜302で、304があります(キャッシュです)

'use strict';

var $ = {};
$.ajax = ajax;

function ajax(options) {

  // 解析参数
  options = options || {};
  if (!options.url) return;
  options.type = options.type || 'get';
  options.timeout = options.timeout || 0;

  // 1 创建ajax
  if (window.XMLHttpRequest) {

    // 高级浏览器和ie7以上
    var xhr = new XMLHttpRequest();
  } else {

    //ie6,7,8
    var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
  }

  // 2 连接
  var str = jsonToUrl(options.data);
  if (options.type === 'get') {
    xhr.open('get', `${options.url}?${str}`, true);

    // 3 发送
    xhr.send();
  } else {
    xhr.open('post', options.url, true);

    // 请求头
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    // 3 发送
    xhr.send();
  }

  // 接收
  xhr.onreadystatechange = function() {

    // 完成
    if (xhr.readyState === 4) {

      // 清除定时器
      clearTimeout(timer);

      if (xhr.status >= 200 && xhr.status <p>関連する推奨事項: <br></p><p><a href="http://www.php.cn/xiaochengxu-378600.html" target="_self">WeChat アプレットは、ネットワーク リクエストの単純なカプセル化のためのコード ケースを実装します</a></p><p><a href="http://www.php.cn/php-weizijiaocheng-311360.html" target="_self">php いくつかの一般的な JS 操作の単純なカプセル化_PHP チュートリアル</a></p><p><a href="http://www.php.cn/php-notebook-114658.html" target="_self">単純な Ajax カプセル化</a></p><p class="comments-box-content"><br></p>

以上がajax のシンプルなパッケージ化の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。