jQuery없이 AJAX를 호출하는 방법은 무엇입니까? 사용하여 AJAX 호출을 수행하는 방법은

jQuery를 사용하지 않고 JavaScript를 사용하여 AJAX 호출을 수행하는 방법은 무엇입니까?

답변

“vanilla”JavaScript로 :

<script type="text/javascript">
function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}
</script>

jQuery로 :

$.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
      $(this).addClass("done");
    }
});

답변

다음 스 니펫을 사용하면 다음과 같이 비슷한 작업을 매우 쉽게 수행 할 수 있습니다.

ajax.get('/test.php', {foo: 'bar'}, function() {});

스 니펫은 다음과 같습니다.

var ajax = {};
ajax.x = function () {
    if (typeof XMLHttpRequest !== 'undefined') {
        return new XMLHttpRequest();
    }
    var versions = [
        "MSXML2.XmlHttp.6.0",
        "MSXML2.XmlHttp.5.0",
        "MSXML2.XmlHttp.4.0",
        "MSXML2.XmlHttp.3.0",
        "MSXML2.XmlHttp.2.0",
        "Microsoft.XmlHttp"
    ];

    var xhr;
    for (var i = 0; i < versions.length; i++) {
        try {
            xhr = new ActiveXObject(versions[i]);
            break;
        } catch (e) {
        }
    }
    return xhr;
};

ajax.send = function (url, callback, method, data, async) {
    if (async === undefined) {
        async = true;
    }
    var x = ajax.x();
    x.open(method, url, async);
    x.onreadystatechange = function () {
        if (x.readyState == 4) {
            callback(x.responseText)
        }
    };
    if (method == 'POST') {
        x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    x.send(data)
};

ajax.get = function (url, data, callback, async) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
};

ajax.post = function (url, data, callback, async) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url, callback, 'POST', query.join('&'), async)
};

답변

나는 이것이 꽤 오래된 질문이라는 것을 알고 있지만 이제는 새로운 브라우저 에서 기본적으로 더 좋은 API를 사용할 수 있습니다 . 이 fetch()방법을 사용하면 웹 요청을 할 수 있습니다. 예를 들어 다음에서 json을 요청하려면 /get-data다음 을 수행하십시오 .

var opts = {
  method: 'GET',
  headers: {}
};
fetch('/get-data', opts).then(function (response) {
  return response.json();
})
.then(function (body) {
  //doSomething with body;
});

자세한 내용은 여기 를 참조하십시오.

답변

다음 기능을 사용할 수 있습니다 :

function callAjax(url, callback){
    var xmlhttp;
    // compatible with IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

다음 링크에서 온라인으로 유사한 솔루션을 시도 할 수 있습니다.

답변

일반 ES6 / ES2015 의이 버전은 어떻 습니까?

function get(url) {
  return new Promise((resolve, reject) => {
    const req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
    req.onerror = (e) => reject(Error(`Network Error: ${e}`));
    req.send();
  });
}

이 함수는 promise를 반환합니다 . 다음은 함수를 사용하고 반환 되는 약속을 처리하는 방법에 대한 예입니다 .

get('foo.txt')
.then((data) => {
  // Do stuff with data, if foo.txt was successfully loaded.
})
.catch((err) => {
  // Do stuff on error...
});

json 파일을로드해야하는 경우 JSON.parse()로드 된 데이터를 JS 오브젝트로 변환하는 데 사용할 수 있습니다 .

req.responseType='json'함수에 통합 할 수도 있지만 불행히도이 기능은 IE를 지원하지 않기 때문에 이를 고수하겠습니다 JSON.parse().

답변

 var xhReq = new XMLHttpRequest();
 xhReq.open("GET", "sumGet.phtml?figure1=5&figure2=10", false);
 xhReq.send(null);
 var serverResponse = xhReq.responseText;
 alert(serverResponse); // Shows "15"

답변

XMLHttpRequest를 사용하십시오 .

간단한 GET 요청

httpRequest = new XMLHttpRequest()
httpRequest.open('GET', 'http://www.example.org/some.file')
httpRequest.send()

간단한 POST 요청

httpRequest = new XMLHttpRequest()
httpRequest.open('POST', 'http://www.example.org/some/endpoint')
httpRequest.send('some data')

요청이 선택적 세 번째 인수와 함께 비동기 (true), 기본값 또는 동기 (false) 여야 함을 지정할 수 있습니다. 

// Make a synchronous GET request
httpRequest.open('GET', 'http://www.example.org/some.file', false)

호출하기 전에 헤더를 설정할 수 있습니다 httpRequest.send()

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

httpRequest.onreadystatechange호출하기 전에 함수 로 설정하여 응답을 처리 할 수 ​​있습니다httpRequest.send()

httpRequest.onreadystatechange = function(){
  // Process the server response here.
  if (httpRequest.readyState === XMLHttpRequest.DONE) {
    if (httpRequest.status === 200) {
      alert(httpRequest.responseText);
    } else {
      alert('There was a problem with the request.');
    }
  }
}