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에는 여전히 많이 사용되는 이전 브라우저를 지원하는 데 권장되는 polyfill이 있습니다 (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입니다.
아래의 경우, 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;
}
}
}
복사-붙여 넣기 지원 버전
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을 캐시하고 항상 사용했던 것과 동일한 데이터 세트를 반환 할 것입니다.
바닐라 JavaScript, Prototype, jQuery 등과 같은 GET 요청을 수행하는 방법에 관계없이 캐싱과 싸우기위한 메커니즘을 배치해야합니다. 이를 방지하기 위해 공격 할 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');
}
});
Mac OS Dashcode 위젯에 익숙하지 않지만 JavaScript 라이브러리를 사용하고 XMLHttpRequests를 지원 하는 경우 jQuery를 사용 하고 다음과 같은 작업을 수행합니다.
var page_content;
$.get( "somepage.php", function(data){
page_content = data;
});
이전 브라우저를 지원하는 하나의 솔루션 :
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();
위젯의 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 요청을받을 수 있습니다.
이 접근 방식은 xml 형식을 기반으로합니다. 요청에 대한 URL을 전달해야합니다.
xmlhttp.open("GET","URL",true); xmlhttp.send();이것은 jQuery를 기반으로합니다. 호출 할 URL과 function_name을 지정해야합니다.
$("btn").click(function() { $.ajax({url: "demo_test.txt", success: function_name(result) { $("#innerdiv").html(result); }}); });
이를 위해 JavaScript Promise를 사용하는 Fetch API가 권장되는 접근 방식입니다. XMLHttpRequest (XHR), 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 와 같은 라이브러리를 사용하는 것이 가장 좋습니다 .
Dashboard 위젯에 대한 코드를 사용하고 생성 한 모든 위젯에 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();
});
}
순수한 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 튜토리얼
// 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()
<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);
}
}
It's just a small gift to contibute to the group. Thanks of your like :)
If you want to test the function on your PC locally, restart your browser with the following command (supported by all browsers except safari):
yournavigator.exe '' --allow-file-access-from-files
참고URL : https://stackoverflow.com/questions/247483/http-get-request-in-javascript
'Program Tip' 카테고리의 다른 글
| JavaScript에서 여러 값을 반환 하시겠습니까? (0) | 2020.09.29 |
|---|---|
| Eclipse에서 줄 번호를 어떻게 표시 할 수 있습니까? (0) | 2020.09.29 |
| 과 (0) | 2020.09.29 |
| Python에서 증가 및 감소 연산자의 동작 (0) | 2020.09.29 |
| CodeMash 2012의 'Wat'강연에서 언급 된 이러한 기괴한 JavaScript 동작에 대한 설명은 무엇입니까? (0) | 2020.09.29 |