Ajax のネイティブ実装で MIME タイプを使用する方法

不言
リリース: 2018-07-02 17:02:22
オリジナル
1636 人が閲覧しました

以下は、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));
}
ログイン後にコピー

修正されたコード

これら 2 つのコードの違いは、変更されたコードは data 変数の処理を削除し、send で渡されるパラメーターを 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。前回見たのは、フロントエンドがリクエストを送信したときで、今回遭遇したときは、渡されたパラメータが間違っていました。背景にこのリクエストの処理がまだ追加されていないためです上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。 ! 関連する推奨事項:

ネイティブ JS で Ajax リクエスト関数を記述する

ファイルを非同期にアップロードするための ajaxFileUpload の使用について

Ajax の get リクエストと post リクエストの概要


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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート