JavaScript로 HTTP GET 요청?

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

짧고 깨끗함 :

const http = new XMLHttpRequest()

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

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

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

GET 요청을 수행하는 방법 (바닐라 JavaScript, 프로토 타입, jQuery 등)에 관계없이 캐싱을 방지하기위한 메커니즘을 마련해야합니다. 이를 방지하기 위해 공격하려는 URL 끝에 고유 한 토큰을 추가하십시오. 이 작업은 다음과 같이 수행 할 수 있습니다.

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

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

프로토 타입 으로 간단하게 죽일 수 있습니다

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

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

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

Mac OS Dashcode 위젯에 익숙하지 않지만 JavaScript 라이브러리를 사용하고 XMLHttpRequests를 지원하도록 허용하면 jQuery를 사용 하고 다음과 같이하십시오.

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

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

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

사용하는 사람들을 위해 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.
  });

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

이렇게하려면 Fetch API가 JavaScript Promises를 사용하는 것이 좋습니다. XHR (XMLHttpRequest), IFrame 객체 또는 동적 태그는 더 오래된 (그리고 더 복잡한) 접근 방식입니다.

<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 문서 는 다음과 같습니다.

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

사후 요청에도 동일한 작업을 수행 할 수 있습니다. 양식 제출과 같은
이 링크 JavaScript 포스트 요청을 살펴보십시오.

간단한 비동기 요청 :

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

아약스

Prototype 또는 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()

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

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

약속과 함께 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();
    });
}

현대적이고 깨끗하며 최단

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

순수한 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 튜토리얼 을 참조하십시오.

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

xml 파일 대신 파일을 객체로로드하고 객체로 속성에 매우 빠르게 액세스 할 수있는 대안이 있습니다.

• 자바 스크립트가 컨텐츠를 올바르게 해석하려면 HTML 페이지와 동일한 형식으로 파일을 저장해야합니다. UTF 8을 사용하는 경우 파일을 UTF8 등으로 저장하십시오.

XML은 나무처럼 작동합니까? 글쓰기 대신

     <property> value <property> 

다음과 같은 간단한 파일을 작성하십시오.

      Property1: value
      Property2: value
      etc.

파일을 저장하십시오. 이제 함수를 호출하십시오.

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

이제 효율적으로 가치를 얻을 수 있습니다.

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

window.onload = function(){

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

그것은 그룹에 대한 작은 선물 일뿐입니다. 당신의 :) 감사합니다

PC에서 로컬로 기능을 테스트하려면 다음 명령을 사용하여 브라우저를 다시 시작하십시오 (safari를 제외한 모든 브라우저에서 지원됨).

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