Yêu cầu HTTP GET trong JavaScript?

Tôi cần thực hiện một yêu cầu HTTP GET trong JavaScript. Cách tốt nhất để làm điều đó là gì?

Tôi cần phải làm điều này trong một tiện ích dashcode Mac OS X.

Các trình duyệt (và Dashcode) cung cấp một đối tượng XMLHttpRequest có thể được sử dụng để thực hiện các yêu cầu HTTP từ JavaScript:

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

Tuy nhiên, các yêu cầu đồng bộ không được khuyến khích và sẽ tạo cảnh báo dọc theo dòng:

Lưu ý: Bắt đầu với Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), các yêu cầu đồng bộ trên luồng chính đã không được chấp nhận do ảnh hưởng tiêu cực đến trải nghiệm người dùng.

Bạn nên đưa ra yêu cầu không đồng bộ và xử lý phản hồi bên trong bộ xử lý sự kiện.

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);
}

Trong jQuery :

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

Rất nhiều lời khuyên tuyệt vời ở trên, nhưng không thể tái sử dụng nhiều và thường chứa đầy vô nghĩa DOM và các loại lông tơ khác ẩn mã dễ dàng.

Đây là một lớp Javascript mà chúng tôi đã tạo có thể tái sử dụng và dễ sử dụng. Hiện tại nó chỉ có một phương thức GET, nhưng nó hoạt động với chúng tôi. Thêm một POST không nên đánh thuế kỹ năng của bất cứ ai.

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 );
    }
}

Sử dụng nó dễ dàng như:

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

window.fetchAPI mới là sự thay thế sạch hơn cho XMLHttpRequestviệc sử dụng các lời hứa ES6. Có một lời giải thích hay ở đây , nhưng nó sôi nổi (từ bài báo):

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

Hỗ trợ trình duyệt hiện tốt trong các bản phát hành mới nhất (hoạt động trong Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), trình duyệt Android và Chrome cho Android), tuy nhiên IE sẽ có khả năng không nhận được hỗ trợ chính thức. GitHub có sẵn một polyfill được khuyến nghị để hỗ trợ các trình duyệt cũ vẫn chủ yếu được sử dụng (phiên bản đặc biệt của Safari trước tháng 3 năm 2017 và các trình duyệt di động cùng thời kỳ).

Tôi đoán liệu điều này có thuận tiện hơn jQuery hay XMLHttpRequest hay không phụ thuộc vào bản chất của dự án.

Đây là một liên kết đến thông số https://fetch.spec.whatwg.org/

Chỉnh sửa :

Sử dụng ES7 async / await, điều này trở nên đơn giản (dựa trên Gist này ):

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

Một phiên bản không có cuộc gọi lại

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

Đây là mã để làm điều đó trực tiếp với JavaScript. Nhưng, như đã đề cập trước đây, bạn sẽ tốt hơn nhiều với thư viện JavaScript. Yêu thích của tôi là jQuery.

Trong trường hợp bên dưới, một trang ASPX (phục vụ như một dịch vụ REST của một người nghèo) đang được gọi để trả về một đối tượng JSON của JavaScript.

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;
        }                    
    }
}

Phiên bản hiện đại sao chép-dán (sử dụng chức năng tìm nạp và mũi tên ) :

//Option with catch
fetch( textURL )
   .then(async r=> console.log(await r.text()))
   .catch(e=>console.error('Boo...' + e));

//No fear...
(async () =>
    console.log(
            (await (await fetch( jsonURL )).json())
            )
)();

Một phiên bản cổ điển sao chép-dán:

let request = new XMLHttpRequest();
request.onreadystatechange = function () {
    if (this.readyState === 4) {
        if (this.status === 200) {
            document.body.className = 'ok';
            console.log(this.responseText);
        } else if (this.response == null && 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);

Ngắn gọn và sạch sẽ:

const http = new XMLHttpRequest()

http.open("GET", "https://api.lyrics.ovh/v1/toto/africa")
http.send()

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

IE sẽ lưu URL để giúp tải nhanh hơn, nhưng nếu bạn nói, việc thăm dò máy chủ theo các khoảng thời gian cố gắng lấy thông tin mới, IE sẽ lưu URL đó và có thể sẽ trả về cùng một bộ dữ liệu bạn luôn có.

Bất kể bạn kết thúc việc thực hiện yêu cầu NHẬN của mình như thế nào - vanilla JavaScript, Prototype, jQuery, v.v. - hãy đảm bảo rằng bạn đặt một cơ chế tại chỗ để chống lại bộ đệm. Để chống lại điều đó, hãy thêm một mã thông báo duy nhất vào cuối URL mà bạn sẽ truy cập. Điều này có thể được thực hiện bởi:

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

Điều này sẽ nối dấu thời gian duy nhất vào cuối URL và sẽ ngăn mọi bộ nhớ đệm xảy ra.

Nguyên mẫu làm cho nó chết đơn giản

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

Một giải pháp hỗ trợ các trình duyệt cũ hơn:

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(error) {
                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);
            }
        }
    };
}

Có thể hơi quá mức nhưng bạn chắc chắn an toàn với mã này.

Sử dụng:

//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();

Tôi không quen thuộc với Tiện ích mã khóa Mac OS, nhưng nếu họ cho phép bạn sử dụng các thư viện JavaScript và hỗ trợ XMLHttpRequests , tôi sẽ sử dụng jQuery và làm một cái gì đó như thế này:

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

Trong tệp Info.plist của tiện ích của bạn, đừng quên đặt AllowNetworkAccesskhóa của bạn thành đúng.

Cách tốt nhất là sử dụng AJAX (bạn có thể tìm thấy một hướng dẫn đơn giản trên trang này Tizag ). Lý do là vì bất kỳ kỹ thuật nào khác bạn có thể sử dụng đều yêu cầu nhiều mã hơn, nó không được đảm bảo để hoạt động trên trình duyệt chéo mà không cần làm lại và yêu cầu bạn sử dụng nhiều bộ nhớ máy khách hơn bằng cách mở các trang ẩn bên trong các khung để phân tích cú pháp dữ liệu của chúng và đóng chúng. AJAX là cách để đi trong tình huống này. Đó là hai năm phát triển javascript nặng của tôi nói.

Đối với những người sử dụng AngularJs , đó là $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.
  });

Bạn có thể nhận được yêu cầu HTTP GET theo hai cách:

1. Cách tiếp cận này dựa trên định dạng xml. Bạn phải vượt qua URL cho yêu cầu.

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

2. Cái này dựa trên jQuery. Bạn phải chỉ định URL và function_name bạn muốn gọi.

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

Để thực hiện điều này, Fetch API là cách tiếp cận được đề xuất, sử dụng JavaScript Promise. XMLHttpRequest (XHR), đối tượng IFrame hoặc thẻ động là các cách tiếp cận cũ hơn (và clunkier).

<script type=“text/javascript”> 
    // Create request object 
    var request = new Request('https://example.com/api/...', 
         { method: 'POST', 
           body: {'name': 'Klaus'}, 
           headers: new Headers({ 'Content-Type': 'application/json' }) 
         });
    // Now use it! 

   fetch(request) 
   .then(resp => { 
         // handle response }) 
   .catch(err => { 
         // handle errors 
    }); </script>

Đây là một tài liệu demo và MDN tìm nạp tuyệt vời

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/')

Điều tương tự có thể được thực hiện cho yêu cầu bài là tốt.
Hãy xem liên kết này yêu cầu bài viết JavaScript giống như một mẫu gửi

Yêu cầu async đơn giản:

function get(url, callback) {
  var getRequest = new XMLHttpRequest();

  getRequest.open("get", url, true);

  getRequest.addEventListener("readystatechange", function() {
    if (getRequest.readyState === 4 && getRequest.status === 200) {
      callback(getRequest.responseText);
    }
  });

  getRequest.send();
}

Ajax

Bạn nên sử dụng một thư viện như Prototype hoặc jQuery .

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()

// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'restUrl', true)

request.onload = function () {
  // Begin accessing JSON data here
}

// Send request
request.send()

Nếu bạn muốn sử dụng mã cho tiện ích Bảng điều khiển và bạn không muốn bao gồm thư viện JavaScript trong mọi tiện ích bạn đã tạo, thì bạn có thể sử dụng đối tượng XMLHttpRequest mà Safari vốn hỗ trợ.

Theo báo cáo của Andrew Hedges, theo mặc định, một tiện ích không có quyền truy cập vào mạng; bạn cần thay đổi cài đặt đó trong info.plist được liên kết với widget.

Để làm mới câu trả lời tốt nhất từ ​​joann với lời hứa đây là mã của tôi:

let httpRequestAsync = (method, url) => {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function () {
            if (xhr.status == 200) {
                resolve(xhr.responseText);
            }
            else {
                reject(new Error(xhr.responseText));
            }
        };
        xhr.send();
    });
}

Hiện đại, sạch sẽ và ngắn nhất

fetch('https://www.randomtext.me/api/lorem')

let url = 'https://www.randomtext.me/api/lorem';

// to only send GET request without waiting for response just call 
fetch(url);

// to wait for results use 'then'
fetch(url).then(r=> r.json().then(j=> console.log('\nREQUEST 2',j)));

// or async/await
(async()=> console.log('\nREQUEST 3', await(await fetch(url)).json()) )();

Open Chrome console network tab to see request

Bạn cũng có thể làm điều đó với JS thuần túy:

// 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();
}

Xem: để biết thêm chi tiết: hướng dẫn html5rocks

<button type="button" onclick="loadXMLDoc()"> GET CONTENT</button>

 <script>
        function loadXMLDoc() {
            var xmlhttp = new XMLHttpRequest();
            var url = "<Enter URL>";``
            xmlhttp.onload = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == "200") {
                    document.getElementById("demo").innerHTML = this.responseText;
                }
            }
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
        }
    </script>

Dưới đây là một thay thế cho các tệp xml để tải các tệp của bạn dưới dạng đối tượng và truy cập các thuộc tính dưới dạng đối tượng một cách rất nhanh.

• Chú ý, để javascript có thể anh ta và diễn giải nội dung chính xác, cần phải lưu các tệp của bạn ở cùng định dạng với trang HTML của bạn. Nếu bạn sử dụng UTF 8, hãy lưu các tệp của bạn trong UTF8, v.v.

XML hoạt động như một cây ok? thay vì viết

     <property> value <property> 

viết một tập tin đơn giản như thế này:

      Property1: value
      Property2: value
      etc.

Lưu tập tin của bạn .. Bây giờ gọi chức năng ....

    var objectfile = {};

function getfilecontent(url){
    var cli = new XMLHttpRequest();

    cli.onload = function(){
         if((this.status == 200 || this.status == 0) && this.responseText != null) {
        var r = this.responseText;
        var b=(r.indexOf('\n')?'\n':r.indexOf('\r')?'\r':'');
        if(b.length){
        if(b=='\n'){var j=r.toString().replace(/\r/gi,'');}else{var j=r.toString().replace(/\n/gi,'');}
        r=j.split(b);
        r=r.filter(function(val){if( val == '' || val == NaN || val == undefined || val == null ){return false;}return true;});
        r = r.map(f => f.trim());
        }
        if(r.length > 0){
            for(var i=0; i<r.length; i++){
                var m = r[i].split(':');
                if(m.length>1){
                        var mname = m[0];
                        var n = m.shift();
                        var ivalue = m.join(':');
                        objectfile[mname]=ivalue;
                }
            }
        }
        }
    }
cli.open("GET", url);
cli.send();
}

bây giờ bạn có thể nhận được giá trị của bạn một cách hiệu quả.

getfilecontent('mesite.com/mefile.txt');

window.onload = function(){

if(objectfile !== null){
alert (objectfile.property1.value);
}
}

Đó chỉ là một món quà nhỏ để tham gia vào nhóm. Cảm ơn bạn đã thích :)

Nếu bạn muốn kiểm tra chức năng trên PC cục bộ, hãy khởi động lại trình duyệt của bạn bằng lệnh sau (được tất cả các trình duyệt hỗ trợ trừ safari):

yournavigator.exe '' --allow-file-access-from-files