JavaScript中的HTTP GET請求？

Question

我需要在JavaScript中執行HTTP GET請求。什麼是最好的方式來做到這一點？

我需要在Mac OS X dashcode小部件中執行此操作。

Answer 1

您可以通過JavaScript使用由主機環境提供的功能：

function httpGet(theUrl) 
{ 
    var xmlHttp = new XMLHttpRequest(); 
    xmlHttp.open("GET", theUrl, false); // false for synchronous request 
    xmlHttp.send(null); 
    return xmlHttp.responseText; 
} 

然而，同步請求都望而卻步，所以你可能要改爲使用：

function httpGetAsync(theUrl, callback) 
{ 
    var xmlHttp = new XMLHttpRequest(); 
    xmlHttp.onreadystatechange = function() { 
     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) 
      callback(xmlHttp.responseText); 
    } 
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null); 
} 

Note: Starting with Gecko 30.0 (Firefox 30.0/Thunderbird 30.0/SeaMonkey 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.

Answer 2

Ajax

你最好關閉使用如Prototype或jQuery庫。

Answer 3

這裏是直接使用JavaScript做到的代碼。但是，如前所述，使用JavaScript庫會更好。我最喜歡的是jQuery。

在下面的例子中，ASPX頁面（作爲窮人的REST服務提供服務）被調用以返回JavaScript JSON對象。

var xmlHttp = null; 

function GetCustomerInfo() 
{ 
    var CustomerNumber = document.getElementById("TextBoxCustomerNumber").value; 
    var Url = "GetCustomerInfoAsJson.aspx?number=" + CustomerNumber; 

    xmlHttp = new XMLHttpRequest(); 
    xmlHttp.onreadystatechange = ProcessRequest; 
    xmlHttp.open("GET", Url, true); 
    xmlHttp.send(null); 
} 

function ProcessRequest() 
{ 
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) 
    { 
     if (xmlHttp.responseText == "Not found") 
     { 
      document.getElementById("TextBoxCustomerName" ).value = "Not found"; 
      document.getElementById("TextBoxCustomerAddress").value = ""; 
     } 
     else 
     { 
      var info = eval ("(" + xmlHttp.responseText + ")"); 

      // No parsing necessary with JSON!   
      document.getElementById("TextBoxCustomerName" ).value = info.jsonData[ 0 ].cmname; 
      document.getElementById("TextBoxCustomerAddress").value = info.jsonData[ 0 ].cmaddr1; 
     }      
    } 
} 

Answer 4

Prototype使得它死了簡單

new Ajax.Request('/myurl', { 
    method: 'get', 
    parameters: { 'param1': 'value1'}, 
    onSuccess: function(response){ 
    alert(response.responseText); 
    }, 
    onFailure: function(){ 
    alert('ERROR'); 
    } 
}); 

Answer 5

In jQuery：

$.get(
    "somepage.php", 
    {paramOne : 1, paramX : 'abc'}, 
    function(data) { 
     alert('page content: ' + data); 
    } 
); 

Answer 6

IE將緩存的URL，以使裝載速度更快，但如果你是，比如說，輪詢服務器每隔一段時間試圖獲取新信息，IE都會緩存該URL，並且可能會返回您始終擁有的相同數據集。不管你如何最終做GET請求 - 香草JavaScript，Prototype，jQuery等 - 確保你提供了一種機制來對抗緩存。爲了解決這個問題，請在您將要訪問的網址的末尾追加一個唯一標記。這可以通過以下方式完成：

var sURL = '/your/url.html?' + (new Date()).getTime(); 

這會在URL的末尾附加一個唯一的時間戳，並防止發生任何緩存。

Answer 7

在您的小部件的Info.plist文件中，不要忘記將您的AllowNetworkAccess鍵設置爲true。

Answer 8

最好的方法是使用AJAX（你可以在這個頁面找到一個簡單的教程Tizag）。原因在於，您可能使用的任何其他技術需要更多代碼，因此無法保證無需返工即可跨瀏覽器工作，並且需要您通過在框架內打開隱藏頁面來傳遞更多客戶端內存，以便通過URL解析數據並關閉它們。 AJAX是在這種情況下走的路。那是我兩年的JavaScript重磅發展講話。

Answer 9

我不熟悉的Mac OS的Dashcode窗口小部件，但如果他們讓你使用JavaScript庫和支持XMLHttpRequests，我會用jQuery，做這樣的事情：如果你想使用

var page_content; 
$.get("somepage.php", function(data){ 
    page_content = data; 
}); 

Answer 10

Dashboard小部件的代碼，並且您不希望在創建的每個小部件中包含JavaScript庫，那麼您可以使用Safari本機支持的對象XMLHttpRequest。

正如Andrew Hedges所報道的，默認情況下，小部件無法訪問網絡;您需要更改與窗口小部件關聯的info.plist中的設置。

Answer 11

一版本無回調

var i = document.createElement("img"); 
i.src = "/your/GET/url?params=here"; 

Answer 12

上面提供了很多很好的建議，但不是很可重用，而且經常充滿了DOM廢話和其他可以隱藏簡單代碼的絨毛。

這是我們創建的Javascript類，它可以重複使用並且易於使用。目前它只有一個GET方法，但對我們很有用。添加一個POST不應該徵稅任何人的技能。

var HttpClient = function() { 
    this.get = function(aUrl, aCallback) { 
     var anHttpRequest = new XMLHttpRequest(); 
     anHttpRequest.onreadystatechange = function() { 
      if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200) 
       aCallback(anHttpRequest.responseText); 
     } 

     anHttpRequest.open("GET", aUrl, true);    
     anHttpRequest.send(null); 
    } 
} 

使用它一樣簡單：

var client = new HttpClient(); 
client.get('http://some/thing?with=arguments', function(response) { 
    // do something with response 
}); 

Answer 13

拷貝粘貼準備版本

var request = new XMLHttpRequest(); 
request.onreadystatechange = function() { 
    if (request.readyState === 4) { 
     if (request.status === 200) { 
      document.body.className = 'ok'; 
      console.log(request.responseText); 
     } else if (!isValid(this.response) && this.status == 0) { 
      document.body.className = 'error offline'; 
      console.log("The computer appears to be offline.");     
     } else { 
      document.body.className = 'error'; 
     } 
    } 
}; 
request.open("GET", url , true); 
request.send(null); 

Answer 14

您可以通過兩種方式得到一個HTTP GET請求：

1. 這種方法基於xml格式。您必須通過請求的URL。

   xmlhttp.open("GET","URL",true); 
   xmlhttp.send(); 
   

2. 這個是基於jQuery的。您必須指定要調用的URL和function_name。

   $("btn").click(function() { 
       $.ajax({url: "demo_test.txt", success: function_name(result) { 
       $("#innerdiv").html(result); 
       }}); 
   }); 
   

Answer 15

對於那些誰使用AngularJs，這是$http.get：

$http.get('/someUrl'). 
    success(function(data, status, headers, config) { 
    // this callback will be called asynchronously 
    // when the response is available 
    }). 
    error(function(data, status, headers, config) { 
    // called asynchronously if an error occurs 
    // or server returns response with an error status. 
    }); 

Answer 16

它也可能證明是非常有益的嘗試REQUESTIFY-，簡化了節點的HTTP請求製作一個圖書館。

https://github.com/ranm8/requestify

var requestify = require('requestify'); 

獲取的請求：

requestify.get('http://example.com').then(function(response) { 
    // Get the response body 
    response.getBody(); 
}); 

並以JSON：

requestify.post('http://example.com', { 
     hello: 'world' 
    }) 
    .then(function(response) { 
     // Get the response body (JSON parsed or jQuery object for XMLs) 
     response.getBody(); 

     // Get the raw response body 
     response.body; 
    }); 

Answer 17

function get(path) { 
    var form = document.createElement("form"); 
    form.setAttribute("method", "get"); 
    form.setAttribute("action", path); 
    document.body.appendChild(form); 
    form.submit(); 
} 


get('/my/url/') 

同樣的事情可以POST請求進行爲好。
看一看這個鏈接JavaScript post request like a form submit

Answer 18

新window.fetch API是XMLHttpRequest清潔更換，使得使用ES6的承諾。有一個很好的解釋here，但它歸結爲（文章）：

fetch(url).then(function(response) { 
    return response.json(); 
}).then(function(data) { 
    console.log(data); 
}).catch(function() { 
    console.log("Booo"); 
}); 

Browser support是現在最新版本好（在Chrome，火狐，邊緣（V14）的作品，Safari瀏覽器（10.1） ，Opera，Safari iOS（v10.3），Android瀏覽器和Android版Chrome），但IE可能無法獲得官方支持。 GitHub has a polyfill推薦用於支持仍在使用中的較舊瀏覽器（尤其是2017年3月前的Safari版本以及同期的移動瀏覽器）。

我猜這是否比jQuery或XMLHttpRequest更方便取決於項目的性質。

這裏有一個鏈接到規範https://fetch.spec.whatwg.org/

編輯：異步的await，這成爲簡單（基於this Gist）/

使用ES7：

async function fetchAsync (url) { 
    let response = await fetch(url); 
    let data = await response.json(); 
    return data; 
} 

Answer 19

一個解決方案，支持舊的瀏覽器：

function httpRequest() 
{ 
    var ajax = null, 
     response = null, 
     self = this; 

    this.method = null; 
    this.url = null; 
    this.async = true; 
    this.data = null; 

    this.send = function() 
    { 
     ajax.open(this.method, this.url, this.asnyc); 
     ajax.send(this.data); 
    }; 

    if(window.XMLHttpRequest) 
    { 
     ajax = new XMLHttpRequest(); 
    } 
    else if(window.ActiveXObject) 
    { 
     try 
     { 
      ajax = new ActiveXObject("Msxml2.XMLHTTP.6.0"); 
     } 
     catch(e) 
     { 
      try 
      { 
       ajax = new ActiveXObject("Msxml2.XMLHTTP.3.0"); 
      } 
      catch(ee) 
      { 
       self.fail("not supported"); 
      } 
     } 
    } 

    if(ajax == null) 
    { 
     return false; 
    } 

    ajax.onreadystatechange = function() 
    { 
     if(this.readyState == 4) 
     { 
      if(this.status == 200) 
      { 
       self.success(this.responseText); 
      } 
      else 
      { 
       self.fail(this.status + " - " + this.statusText); 
      } 
     } 
    }; 
} 

也許有點矯枉過正，但你肯定會用這段代碼去安全。

用法：

// Create the XHR object. 
function createCORSRequest(method, url) { 
    var xhr = new XMLHttpRequest(); 
if ("withCredentials" in xhr) { 
// XHR for Chrome/Firefox/Opera/Safari. 
xhr.open(method, url, true); 
} else if (typeof XDomainRequest != "undefined") { 
// XDomainRequest for IE. 
xhr = new XDomainRequest(); 
xhr.open(method, url); 
} else { 
// CORS not supported. 
xhr = null; 
} 
return xhr; 
} 

// Make the actual CORS request. 
function makeCorsRequest() { 
// This is a sample server that supports CORS. 
var url = 'http://html5rocks-cors.s3-website-us-east-1.amazonaws.com/index.html'; 

var xhr = createCORSRequest('GET', url); 
if (!xhr) { 
alert('CORS not supported'); 
return; 
} 

// Response handlers. 
xhr.onload = function() { 
var text = xhr.responseText; 
alert('Response from CORS request to ' + url + ': ' + text); 
}; 

xhr.onerror = function() { 
alert('Woops, there was an error making the request.'); 
}; 

xhr.send(); 
} 

參見：

//create request with its porperties 
var request = new httpRequest(); 
request.method = "GET"; 
request.url = "https://example.com/api?parameter=value"; 

//create callback for success containing the response 
request.success = function(response) 
{ 
    console.log(response); 
}; 

//and a fail callback containing the error 
request.fail = function(error) 
{ 
    console.log(error); 
}; 

//and finally send it away 
request.send(); 

Answer 20

您可以用純JS也做了更多的細節：html5rocks tutorial

Answer 21

短而純粹：

const http = new XMLHttpRequest() 
 

 
http.open("GET", "https://api.lyrics.ovh/v1/shakira/waka-waka") 
 
http.send() 
 

 
http.onload =() => console.log(http.responseText)