it-swarm-ko.tech

자바 스크립트에서 HTTP GET 요청?

JavaScript에서 HTTP GET request를 할 필요가 있습니다. 그렇게하는 가장 좋은 방법은 무엇입니까?

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

696
mclaughlinj

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)부터 사용자 경험에 부정적인 영향을주기 때문에 주 스레드의 동기 요청이 사용되지 않습니다.

1059
Joan

jQuery에서 :

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

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

새로운 window.fetch API는 ES6 약속을 사용하는 XMLHttpRequest을 대체합니다. 좋은 설명이 있습니다 here ,하지만 기사에서 아래로 정리됩니다.

_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 for Android)를 사용하지만 IE은 (는) 공식 지원을받지 못할 수 있습니다. GitHub에는 polyfill이 있습니다 사용 가능하지만 여전히 오래 사용중인 브라우저를 지원하는 것이 좋습니다 (2017 년 3 월 이전의 Safari 버전과 같은 기간의 모바일 브라우저).

이것이 jQuery 또는 XMLHttpRequest보다 편리한 지 여부는 프로젝트의 특성에 달려 있습니다.

다음은 사양에 대한 링크입니다 https://fetch.spec.whatwg.org/

편집 :

ES7 async/await를 사용하면 간단하게됩니다 ( this Gist 기반).

_async function fetchAsync (url) {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}
_
91
Peter Gibson

콜백이없는 버전

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

여기 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;
        }                    
    }
}
71
rp.

복사 붙여 넣기 준비 버전

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);
31
Daniel De León

IE는 로딩 속도를 높이기 위해 URL을 캐시하지만 새로운 정보를 얻으려고 간격을두고 서버를 폴링하는 경우 IE는 해당 URL을 캐시하여 동일한 데이터 세트를 반환합니다 항상 있었어.

당신이 GET 요청을하는 방법에 관계없이 - 바닐라 자바 ​​스크립트, 프로토 타입, jQuery 등 - 캐싱에 대처할 수있는 메커니즘을 배치해야합니다. 이를 방지하려면 URL 끝 부분에 고유 한 토큰을 추가하십시오. 이것은 다음과 같이 수행 할 수 있습니다.

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

이렇게하면 URL 끝 부분에 고유 한 타임 스탬프가 추가되고 캐싱이 발생하지 않습니다.

18
Tom

짧고 순수한 :

const http = new XMLHttpRequest()

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

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

15
Damjan Pavlica

프로토 타입 간단하게 죽게 만든다.

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

Mac OS Dashcode Widgets에 익숙하지 않지만 JavaScript 라이브러리와 지원을 사용하면 XMLHttpRequests , jQuery 를 사용하면 다음과 같이 할 수 있습니다.

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

구형 브라우저를 지원하는 하나의 솔루션 :

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

어쩌면 다소 과잉이라고 할지도 모르지만이 코드를 사용하면 확실히 안전합니다.

사용법 :

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

위젯의 Info.plist 파일에서 AllowNetworkAccess 키를 true로 설정하는 것을 잊지 마십시오.

5
Andrew Hedges
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/')

게시물 요청에 대해서도 동일한 작업을 수행 할 수 있습니다.
이 링크를보세요 양식 제출과 같은 자바 스크립트 게시물 요청

4
Gaurav Gupta

다음 두 가지 방법으로 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);
      }});
    }); 
    
4
parag.rane

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

가장 좋은 방법은 AJAX (이 페이지 Tizag 에서 간단한 자습서를 찾을 수 있습니다)를 사용하는 것입니다. 다른 기술을 사용하려면 더 많은 코드가 필요하며 재 작업없이 크로스 브라우저를 사용하는 것이 보장되지 않으며 데이터를 구문 분석하고 닫는 URL을 전달하는 프레임 내부의 숨겨진 페이지를 열어 더 많은 클라이언트 메모리를 사용해야합니다. AJAX는 이런 상황에 처할 수있는 길입니다. 내 2 년 동안 자바 스크립트 무거운 개발 말하기. 

4
Nikola Stjelja

간단한 비동기 요청 :

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

Ajax

당신은 Prototype 또는 jQuery 와 같은 라이브러리를 사용하는 것이 가장 좋을 것입니다.

1
Greg

이렇게하려면 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 워드 프로세서 입니다.

1
aabiro

대시 보드 위젯에 대한 코드를 사용하고 작성한 모든 위젯에 JavaScript 라이브러리를 포함하지 않으려면 사파리가 기본적으로 지원하는 XMLHttpRequest 객체를 사용할 수 있습니다.

앤드류 헤지스 (Andrew Hedges)가보고 한 것처럼 위젯은 기본적으로 네트워크에 액세스 할 수 없습니다. 위젯과 연관된 info.plist에서 해당 설정을 변경해야합니다.

0
kiamlaluno

순수한 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 tutorial

0
jpereira

조안과 최선의 답변을 새로 고치려면이 코드를 사용하십시오.

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