Ajax のネイティブ実装で MIME タイプを使用する方法 (グラフィック チュートリアル)

ここで、Ajax のネイティブ実装における MIME タイプの使用に関する記事を共有します。これは非常に参考になるものであり、皆さんのお役に立てれば幸いです。

問題の説明

次の例は、Ajax 投稿リクエストのコードです。このコードをテストして実行すると、返されたステータス コードは 400 であり、サーバーが実行できないリクエストであることがわかりました。後で確認して修正したところ、以下のコードを少し修正するだけで済むことがわかりました

元のコード

var send = function (url, params, fn) {
  var me = this;
  var xhr = null;
  var data = '';
  fn = fn || function() {};
  params = params || {};
  for(var item in params) {
   data += item + '=' + params[item] + '&';
  }
  if(data[data.length - 1] == '&') {
   data = data.slice(0, data.length - 1);
  }
  if(window.XMLHttpRequest) {
   xhr = new XMLHttpRequest();
  }else if(window.ActiveXObject) {
   xhr= new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.open("post", url, true);
  xhr.setRequestHeader("Content-type", "application/json");
  xhr.onreadystatechange = function () {
   if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
    fn(JSON.parse(xhr.responseText));
   }
  };
  xhr.send(JSON.stringify(params));
}

修正されたコード

var send = function (url, params, fn) {
    var me = this;
    var xhr = null;
    fn = fn || function() {};
    params = params || {};
    if(window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    }else if(window.ActiveXObject) {
      xhr= new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open("post", url, true);
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.onreadystatechange = function () {
      if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn(JSON.parse(xhr.responseText));
      }
    };
    xhr.send(JSON.stringify(params));
}

これらの2つのコードの違いは次のとおりです。変更されたコードはデータを削除します この変数の処理と送信で渡されるパラメーターは params 変数になりました

問題は解決されました

問題は解決されましたが、ネイティブ Ajax を使用するときに私の心に疑問が生じました。以前は、メソッドが post の場合、渡されるパラメータは「name=123&age=32」の形式でしたが、なぜ今はシリアル化された JSON オブジェクトを渡しても問題ないのでしょうか?

このとき、追加した MIME タイプに気づきました。Content-type を「application/json」に設定しました。このとき、一般的に使用されているものを思い出しました。 MIME タイプは "application/x-www-form-urlencoded" です。この場合、send メソッドで渡されるパラメーターは "name=123&age=32" でなければなりません。これで混乱は終わりました (~￣▽￣)。 ~

補足

ちなみに、ステータスコード405。前回見たのは、フロントエンドがリクエストを送信したときで、今回遭遇したときは、渡されたパラメータが間違っていました。 、それは、バックエンドがこのリクエストの処理をまだ追加していないためです

上記は、皆さんのためにまとめたものです。将来的に皆さんに役立つことを願っています。

関連記事:

Jqueryのget、post、ajax、getJSON関数の使い方を詳しく解説

ajaxリクエスト操作の返却データ順序

の操作情報の利用

以上がAjax のネイティブ実装で MIME タイプを使用する方法 (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。