Original Ajax and Ajax in jQuery
먼저 예제를 통해 jQuery로 Ajax를 구현하는 것이 얼마나 간단한지 살펴보겠습니다. 다음은 원시 Ajax를 사용하는 예입니다.
<!doctype html><html><head>
<meta charset="utf-8"/>
<title>jQuery Ajax</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() { var xhr = new AjaxXmlHttpRequest();
$("#btnAjaxOld").click(function(event) { var xhr = new AjaxXmlHttpRequest();
xhr.onreadystatechange = function() { if (xhr.readyState == 4) { document.getElementById("divResult").innerHTML = xhr.responseText;
}
} //由于涉及到同源策略，需要服务器端的支持
xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=html", true);
xhr.send(null);
});
}); //跨浏览器获取 XmlHttpRequest 对象
function AjaxXmlHttpRequest() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) { // Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) { try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser nonsupport AJAX！"); return false;
}
}
} return xmlHttp;
} </script></head><body>
<button id="btnAjaxOld">original ajax call</button>
<div id="divResult"></div>
</body>
</html>위 예에서 data/AjaxGetCityInfo.aspx?resultType=html 주소는 HTML 코드 조각을 반환합니다.
원래 Ajax를 사용하면 XmlHttpRequest 객체 생성, 요청 상태 확인, 콜백 함수 작성 등과 같은 더 많은 작업을 수행해야 합니다.
jQuery의 Load 메소드를 사용하면 한 문장만 있으면 됩니다.
$("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "html" });이제 jQuery의 Ajax 기능만 사용하면 페이지가 더 단순해집니다.
<!doctype html><html lang="zh"><head>
<meta charset="utf-8"/>
<title>jQuery Ajax</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() {
$("#btnAjaxJquery").click(function(event) {
$("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "html" });
});
})
</script></head><body>
<button id="btnAjaxJquery">use jQuery load method</button>
<div id="divResult"></div>
</body>
</html>
다음 섹션