JavaScript HTTP HTTP iste?

JavaScript'te HTTP GET isteği yapmam gerekiyor . Bunu yapmanın en iyi yolu nedir?

Bunu bir Mac OS X gösterge kodu widget'ında yapmam gerekiyor.

Tarayıcılar (ve Dashcode), JavaScript'ten HTTP istekleri yapmak için kullanılabilen bir XMLHttpRequest nesnesi sağlar:

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

Ancak, eşzamanlı istekler reddedilir ve aşağıdaki satırlarda bir uyarı oluşturur:

Not: Gecko 30.0'dan (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27) başlayarak , kullanıcı deneyiminin olumsuz etkileri nedeniyle ana iş parçacığında senkron istekleri kullanımdan kaldırılmıştır .

Zaman uyumsuz bir istekte bulunmanız ve yanıtı bir olay işleyicisinin içinde işlemeniz gerekir.

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

JQuery'de :

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

Çok büyük tavsiye yukarıda, ama çok yeniden kullanılabilir ve çok sık DOM saçmalık ve kolay kodu gizleyen diğer kabartmak ile dolu.

İşte yeniden kullanılabilir ve kullanımı kolay bir Javascript sınıfı oluşturduk. Şu anda sadece bir GET yöntemi var, ama bu bizim için çalışıyor. POST eklemek kimsenin becerilerini vergilendirmemelidir.

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

Kullanmak şu kadar kolaydır:

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

Yeni window.fetchAPI, XMLHttpRequestES6 vaatlerini kullanan daha temiz bir alternatiftir . Burada güzel bir açıklama var , ancak (makaleden) kaynar:

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

Tarayıcı desteği artık en son sürümlerde (Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), Android tarayıcı ve Android için Chrome'da çalışıyor) büyük olasılıkla resmi destek alamıyor. GitHub, hala büyük ölçüde kullanımda olan eski tarayıcıları desteklemek için önerilen bir çoklu dolguya sahiptir (Safari'nin Mart 2017 öncesi esp sürümleri ve aynı dönemdeki mobil tarayıcılar).

Bu jQuery veya XMLHttpRequest daha uygun olup olmadığını tahmin projenin doğasına bağlıdır.

İşte https://fetch.spec.whatwg.org/ spesifikasyonunun bir bağlantısı

Düzenle :

Kullanılması ES7 zaman uyumsuz / bekliyoruz, bu sadece (esas olur bu Gist'e ):

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

Geri arama yapılmayan bir sürüm

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

İşte doğrudan JavaScript ile yapmak için kod. Ancak, daha önce de belirtildiği gibi, bir JavaScript kitaplığıyla çok daha iyi olacaksınız. Benim favorim jQuery.

Aşağıdaki durumda, bir JavaScript JSON nesnesi döndürmek için bir ASPX sayfası (fakir bir adamın REST hizmeti olarak hizmet vermektedir) çağrılmaktadır.

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

Kopyala-yapıştır modern versiyonu ( getir ve ok işlevini kullanarak ) :

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

Kopyala-yapıştır klasik versiyonu:

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

Kısa ve temiz:

const http = new XMLHttpRequest()

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

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

IE, yüklemeyi daha hızlı hale getirmek için URL'leri önbelleğe alır, ancak diyelim ki bir sunucuyu yeni bilgiler almaya çalışırken ara sıra çağırırsanız IE bu URL'yi önbelleğe alır ve muhtemelen her zaman sahip olduğunuz veri kümesini döndürür.

GET isteğinizi - vanilya JavaScript, Prototip, jQuery, vb. - nasıl yaptığınıza bakılmaksızın, önbelleğe alma ile mücadele için bir mekanizma yerleştirdiğinizden emin olun. Bununla mücadele etmek için, vurmak istediğiniz URL'nin sonuna benzersiz bir jeton ekleyin. Bu şu şekilde yapılabilir:

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

Bu, URL'nin sonuna benzersiz bir zaman damgası ekler ve önbelleğe almanın gerçekleşmesini önler.

Prototip ölümü basitleştirir

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

Eski tarayıcıları destekleyen tek bir çözüm:

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

Belki biraz abartılı ama kesinlikle bu kod ile güvende.

Kullanımı:

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

Mac OS Dashcode Widget'lara aşina değilim, ancak JavaScript kitaplıklarını kullanmanıza ve XMLHttpRequest'leri desteklemelerine izin verirlerse , jQuery kullanır ve böyle bir şey yapardım:

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

Widget'ınızın Info.plist dosyasında, AllowNetworkAccessanahtarınızı true olarak ayarlamayı unutmayın .

En iyi yol AJAX kullanmaktır (bu sayfada Tizag basit bir öğretici bulabilirsiniz ). Bunun nedeni, kullanabileceğiniz diğer herhangi bir tekniğin daha fazla kod gerektirmesi, yeniden tarayıcı olmadan çapraz tarayıcı çalışması garanti edilmez ve verilerini ayrıştırıp URL'leri geçen çerçevelerin içindeki gizli sayfaları açarak daha fazla istemci belleği kullanmanızı gerektirir. AJAX bu duruma girmenin yoludur. Benim iki yıllık javascript ağır gelişme konuşma.

Kullananlar için angularjs , bu kadar $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.
  });

HTTP GET isteğini iki şekilde alabilirsiniz:

1. Bu yaklaşım xml formatına dayanmaktadır. İstek için URL'yi iletmeniz gerekir.

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

2. Bu jQuery dayanmaktadır. Aramak istediğiniz URL'yi ve işlev_adını belirtmelisiniz.

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

Bunu yapmak için JavaScript Promises kullanarak önerilen API getirme yaklaşımıdır. XMLHttpRequest (XHR), IFrame nesnesi veya dinamik etiketler daha eski (ve daha karmaşık) yaklaşımlardır.

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

İşte harika bir demo ve MDN dokümanları

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

Aynı şey yazı isteği için de yapılabilir.
Bu bağlantıya , form gönderme gibi JavaScript yayın isteğine göz atın

Basit zaman uyumsuz istek:

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

Prototip veya jQuery gibi bir kitaplığı kullanmak en iyisidir .

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

Gösterge Tablosu widget'ının kodunu kullanmak istiyorsanız ve oluşturduğunuz her widget'a bir JavaScript kitaplığı eklemek istemiyorsanız, Safari'nin yerel olarak desteklediği XMLHttpRequest nesnesini kullanabilirsiniz.

Andrew Hedges tarafından bildirildiği gibi, bir widget'ın varsayılan olarak bir ağa erişimi yoktur; widget ile ilişkili info.plist'deki ayarı değiştirmeniz gerekir.

Joann söz ile en iyi cevap yenilemek için bu benim kod:

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

Modern, temiz ve en kısa

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

Saf JS ile de yapabilirsiniz:

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

Daha fazla ayrıntı için bkz. Html5rocks öğreticisi

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

Burada dosyalarınızı bir nesne olarak yüklemek ve özelliklere bir nesne olarak çok hızlı bir şekilde erişmek için xml dosyalarına bir alternatif var.

• Dikkat, javascript onu yapabilir ve içeriği doğru yorumlamak için dosyalarınızı HTML sayfanızla aynı biçimde kaydetmek gerekir. UTF 8 kullanıyorsanız, dosyalarınızı UTF8 vb. İçine kaydedin.

XML bir ağaç gibi çalışır tamam mı? yazmak yerine

     <property> value <property> 

bunun gibi basit bir dosya yazın:

      Property1: value
      Property2: value
      etc.

Dosyanızı kaydedin .. Şimdi fonksiyonu çağırın ....

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

Artık değerlerinizi verimli bir şekilde elde edebilirsiniz.

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

window.onload = function(){

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

Gruba katılmak için sadece küçük bir hediye. Sevdiğiniz için teşekkürler :)

PC'nizdeki işlevi yerel olarak test etmek istiyorsanız, aşağıdaki komutla tarayıcınızı yeniden başlatın (safari hariç tüm tarayıcılar tarafından desteklenir):

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