[javascript] JavaScript로 HTTP GET 요청?

JAVASCRIPT / 글쓴이

JavaScript로 HTTP GET 요청 을해야합니다 . 가장 좋은 방법은 무엇입니까?

Mac OS X 대시 코드 위젯 에서이 작업을 수행해야합니다.

답변

브라우저 (및 Dashcode)는 JavaScript에서 HTTP 요청을 작성하는 데 사용할 수있는 XMLHttpRequest 객체를 제공합니다.

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

그러나 동기 요청은 권장되지 않으며 다음 행을 따라 경고를 생성합니다.

참고 : Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27) 부터 사용자 스레드 에 대한 부정적인 영향으로 인해 메인 스레드의 동기 요청이 더 이상 사용되지 않습니다 .

비동기 요청을하고 이벤트 핸들러 내에서 응답을 처리해야합니다.

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에서 :

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

답변

위의 많은 훌륭한 조언이 있지만 재사용 할 수는 없으며 쉬운 코드를 숨기는 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
});

답변

새로운 window.fetchAPI는 XMLHttpRequestES6 약속을 사용 하기위한 깔끔한 대체입니다 . 거기에 좋은 설명입니다 여기 지만 (기사에서)로 요약된다 :

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 브라우저 및 Android 용 Chrome)에서 잘 작동하지만 IE는 공식적인 지원을받지 못할 수도 있습니다. GitHub에는 여전히 사용중인 구형 브라우저 (2017 년 3 월 이전의 Safari 버전과 같은 기간의 모바일 브라우저)를 지원하기 위해 권장되는 폴리 필이 있습니다.

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

답변

콜백이없는 버전

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

답변

다음은 JavaScript로 직접 수행하는 코드입니다. 그러나 앞에서 언급했듯이 JavaScript 라이브러리를 사용하면 훨씬 나을 것입니다. 내가 가장 좋아하는 것은 jQuery입니다.

아래의 경우 JavaScript JSON 객체를 반환하기 위해 ASPX 페이지 (가난한 사람의 REST 서비스로 서비스되는)가 호출되고 있습니다.

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

답변

최신 버전의 복사-붙여 넣기 ( 페치 및 화살표 기능 사용 ) :

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

복사하여 붙여 넣기 클래식 버전 :

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