javascript - 서버 - 자바스크립트 get 요청




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

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

GET 요청을 처리하는 방법에 관계없이 - 바닐라 자바 ​​스크립트, 프로토 타입, jQuery 등 - 캐싱에 대처할 수있는 메커니즘을 마련해야합니다. 이를 극복하기 위해 URL의 끝 부분에 고유 한 토큰을 추가하십시오. 이 작업은 다음과 같이 수행 할 수 있습니다.

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

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

자바 스크립트에서 HTTP GET 요청을해야합니다. 그렇게하는 가장 좋은 방법은 무엇입니까?

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


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

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

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


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

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

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

복사 붙여 넣기 준비 버전

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

순수한 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 자습서


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

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


이렇게하려면 Fetch API가 JavaScript Promise를 사용하는 것이 좋습니다. 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 문서입니다.


콜백이없는 버전

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

jQuery에서 :

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

프로토 타입 으로 간단해진다.

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

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

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 게시물 요청을보십시오.





dashcode