javascript_javascript 기술로 네이티브 Ajax를 구현하는 여러 방법 소개

JavaScript에는 jquery 등 다양한 프레임워크가 있으므로 ajax를 사용하는 것이 매우 간단해졌습니다. 그러나 때로는 단순성을 추구하기 위해 프로젝트에 jquery와 같은 거대한 js 플러그인을 로드할 필요가 없을 수도 있습니다. 그런데 Ajax 기능을 사용하고 싶다면 어떻게 해야 할까요? 자바스크립트를 사용하여 네이티브 Ajax를 구현하는 몇 가지 방법을 알려드리겠습니다.

Ajax를 구현하기 전에 XMLHttpRequest 객체를 생성해야 합니다. 객체를 생성한 브라우저가 이를 지원하지 않는 경우 ActiveXObject를 생성해야 합니다. 구체적인 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var xmlHttp;
function createxmlHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft. XMLHTTP");
} else if ( window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}

(1) 다음은 위에서 생성한 xmlHttp를 사용하여 가장 간단한 ajax get 요청 구현:

코드 복사 코드는 다음과 같습니다.

function doGet (url){
// 전달된 매개변수 값에 주의하세요. 문자 깨짐을 방지하려면 encodeURI를 사용하여 처리하는 것이 가장 좋습니다.
createxmlHttpRequest()
xmlHttp.open("GET",url) ;
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
alert ('성공');
} else {
alert(' 실패');
}
}
}

(2) 생성된 xmlHttp를 사용합니다. 위의 간단한 Ajax 포스트 요청을 구현하려면:

코드 복사 코드는 다음과 같습니다.

function doPost(url,data){
// 문자 왜곡을 방지하려면 encodeURI를 사용하는 것이 가장 좋습니다.
createxmlHttpRequest()
xmlHttp.open("POST" ,url)
xmlHttp.setRequestHeader("Content-Type","application/x-www -form-urlencoded")
xmlHttp.send(data)
xmlHttp.onreadystatechange = function() {
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200) ) {
alert('success')
} else {
alert('fail') ;
}
}
}