javascript - language - wordpress get page title




HTTP GET запрос в JavaScript? (15)

Мне нужно выполнить HTTP-запрос GET в JavaScript. Каков наилучший способ сделать это?

Мне нужно сделать это в виджетах dashcode для Mac OS X.


IE будет кэшировать URL-адреса, чтобы ускорить загрузку, но если вы, скажем, опросили сервер с интервалами, пытаясь получить новую информацию, IE будет кэшировать этот URL-адрес и, скорее всего, вернет тот же набор данных, который у вас всегда был.

Независимо от того, как вы в конечном итоге выполняете свой запрос GET - ванильный JavaScript, прототип, jQuery и т. Д. - убедитесь, что вы создали механизм для борьбы с кешированием. Чтобы бороться с этим, добавьте уникальный токен в конец URL-адреса, который вы будете бить. Это можно сделать:

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

Это добавит уникальную временную метку в конец URL-адреса и предотвратит любое кэширование.


В файле Info.plist вашего виджета не забудьте установить для параметра AllowNetworkAccess значение true.


Вот код, который можно сделать непосредственно с 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;
        }                    
    }
}

Вы можете использовать функции, предоставляемые средой хостинга, через 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);
}

Примечание. Начиная с Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), синхронные запросы в основном потоке устарели из-за негативных последствий для пользователя.


Вы можете сделать это с помощью чистого JS:

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

Смотрите: для получения дополнительной информации: учебник html5rocks


Готовая версия для копирования-вставки

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

Для этого Fetch API - это рекомендуемый подход, используя JavaScript Promises. XMLHttpRequest (XHR), объекты IFrame или динамические теги являются более старыми (и 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>

Вот отличная демо-версия и MDN-документы


Если вы хотите использовать код для виджета Dashboard, и вы не хотите включать библиотеку JavaScript в каждый созданный вами виджет, вы можете использовать объект XMLHttpRequest, поддерживаемый Safari.

Как сообщил Эндрю Хеджес, виджет не имеет доступа к сети, по умолчанию; вам нужно изменить этот параметр в файле info.plist, связанном с виджетами.


Множество замечательных советов выше, но не очень многократно, и слишком часто заполнены глупостью 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
});

Новый API-интерфейс window.fetch является более чистой заменой для XMLHttpRequest который использует обещания ES6. Здесь есть хорошее объяснение, но это сводится к (из статьи):

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

Поддержка браузеров теперь хороша в последних версиях (работает в Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), Android-браузере и Chrome для Android), однако IE будет скорее всего, не получит официальной поддержки. GitHub имеет доступный полиполк, который рекомендуется для поддержки старых браузеров, которые в значительной степени используются (версии esp Safari до марта 2017 года и мобильные браузеры того же периода).

Я предполагаю, что это более удобно, чем jQuery или XMLHttpRequest или не зависит от характера проекта.

Вот ссылка на спецификацию https://fetch.spec.whatwg.org/

Изменить :

Используя ES7 async / await, это становится просто (на основе этого Gist ):

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

Чтобы обновить лучший ответ от joann с обещанием, это мой код:

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

Я не знаком с Mac OS Dashcode Widgets, но если они позволят вам использовать библиотеки JavaScript и поддерживать XMLHttpRequests , я бы использовал jQuery и сделал что-то вроде этого:

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

Ajax

Вам лучше использовать библиотеку, такую ​​как Prototype или jQuery .


Прототип делает его мертвым простым

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

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

То же самое можно сделать и для почтового запроса.
Взгляните на эту ссылку.





dashcode