javascript - この JQuery Ajax 呼び出しを JavaScript の組み込み関数に置き換えるにはどうすればよいですか?

Question

重複の可能性:
フレームワークなしの javascript ajax リクエスト

JQueryやその他のライブラリを使用せずに、JavaScript組み込み関数のみを使用して、以下のJQuery Ajax呼び出しを行うにはどうすればよいですか?

var input = '{
    "age":100,
    "name":"foo",
    "messages":["msg 1","msg 2","msg 3"],
    "favoriteColor" : "blue",
    "petName" : "Godzilla",
    "IQ" : "QuiteLow"
}';
var endpointAddress = "http://your.server.com/app/service.svc";
var url = endpointAddress + "/FindPerson";
$.ajax({
    type: 'POST',
    url: url,
    contentType: 'application/json',
    data: input,
    success: function(result) {
        alert(JSON.stringify(result));
    }
});

Answer 1

jQuery は、ajax 呼び出しのブラウザー間の小さな癖やニュアンスをすべて標準化する優れた仕事をします。

同じことを実行できるスタンドアロンの ajax ライブラリを見つけることをお勧めしますが、jQuery がもたらす余分なオーバーヘッドは一切ありません。ここにいくつかあります：

• リクエストウェスト
• フェルマータ
• Ajax (jquery/zepto に触発)
• マイクロアヤックス

Answer 2

この例を試してください

window.XMLHttpRequest最初にまたはActiveXObjectのオブジェクトを作成する必要があります（IEの場合）

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

次に、リクエストを送信できます

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

ついにあなたは応答を得ることができます

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

Answer 3

以下のコードは、jQuery バージョンが行うすべてのことを行います。

• JSON を postdata とする POST リクエスト
• JSON Content-type ヘッダーを設定します
• 文字列化された応答を警告します

コード：

  var httpRequest;

  function makeRequest(url, input) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) {}
      }
    }

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = function(){
        if (httpRequest.readyState === 4) {
          if (httpRequest.status === 200) {
            alert(JSON.stringify(httpRequest.responseText));
          }
        }
    };

    httpRequest.open('POST', url);
    httpRequest.setRequestHeader('Content-Type', 'application/json');
    httpRequest.send(input);
  }

var input = '{
    "age":100,
    "name":"foo",
    "messages":["msg 1","msg 2","msg 3"],
    "favoriteColor" : "blue",
    "petName" : "Godzilla",
    "IQ" : "QuiteLow"
}';
var endpointAddress = "http://your.server.com/app/service.svc";
var url = endpointAddress + "/FindPerson";
makeRequest(url, input);

一部はMDNから取得。

Answer 4

ここでGoogleの最初の回答をご覧ください。