이것은 무엇을, 본질에서, AJAX가 있다 위해 . 페이지가로드되고 요소에 이벤트를 추가합니다. 사용자가 무언가를 클릭하여 이벤트를 트리거하면 Javascript는 XMLHttpRequest 객체 를 사용하여 서버에 요청을 보냅니다.
서버가 (아마도 출력으로) 응답 한 후, 다른 자바 스크립트 함수 / 이벤트는 다른 HTML과 마찬가지로 페이지에 단순히 붙이는 것을 포함하여 해당 출력으로 작업 할 수있는 장소를 제공합니다.
일반 자바 스크립트를 사용하여 "수작업으로"수행하거나 jQuery를 사용할 수 있습니다. 프로젝트의 크기와 특정 상황에 따라 일반 자바 스크립트를 사용하는 것이 더 간단 할 수 있습니다.
일반 자바 스크립트
이 매우 기본적인 예에서는 myAjax.php
사용자가 링크를 클릭 할 때로 요청을 보냅니다 . 서버는 일부 콘텐츠,이 경우 "hello world!"를 생성합니다. 우리는 id로 HTML 요소에 넣을 것 output
입니다.
자바 스크립트
function getOutput() {
getRequest(
'myAjax.php',
drawOutput,
drawError
);
return false;
}
function drawError() {
var container = document.getElementById('output');
container.innerHTML = 'Bummer: there was an error!';
}
function drawOutput(responseText) {
var container = document.getElementById('output');
container.innerHTML = responseText;
}
function getRequest(url, success, error) {
var req = false;
try{
req = new XMLHttpRequest();
} catch (e){
try{
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return false;
}
}
}
if (!req) return false;
if (typeof success != 'function') success = function () {};
if (typeof error!= 'function') error = function () {};
req.onreadystatechange = function(){
if(req.readyState == 4) {
return req.status === 200 ?
success(req.responseText) : error(req.status);
}
}
req.open("GET", url, true);
req.send(null);
return req;
}
HTML
<a href="#" onclick="return getOutput();"> test </a>
<div id="output">waiting for action</div>
PHP
<?php
echo 'hello world!';
?>
시도해보세요 : http://jsfiddle.net/GRMule/m8CTk/
자바 스크립트 라이브러리 사용 (jQuery 외)
틀림없이 많은 자바 스크립트 코드입니다. 물론 블록을 조이거나 더 간결한 논리 연산자를 사용하여 단축 할 수 있지만 여전히 많은 일이 진행되고 있습니다. 프로젝트에서 이러한 유형의 작업을 많이 할 계획이라면 자바 스크립트 라이브러리를 사용하는 것이 더 나을 수 있습니다.
위와 동일한 HTML 및 PHP를 사용하여 전체 스크립트입니다 (페이지에 jQuery 포함). jQuery의 일반적인 스타일과 일관성을 유지하기 위해 코드를 약간 강화했지만 아이디어를 얻었습니다.
function getOutput() {
$.ajax({
url:'myAjax.php',
complete: function (response) {
$('#output').html(response.responseText);
},
error: function () {
$('#output').html('Bummer: there was an error!');
}
});
return false;
}
사용해보세요 : http://jsfiddle.net/GRMule/WQXXT/
아직 jQuery를 서두르지 마십시오. 라이브러리를 추가하는 것은 마치 작성한 것처럼 확실히 프로젝트에 수백 또는 수천 줄의 코드를 추가하는 것입니다. jQuery 라이브러리 파일 내에서 첫 번째 예제와 유사한 코드와 훨씬 더 많은 . 그것은 좋은 것일 수도 있고 아닐 수도 있습니다. 프로젝트의 현재 크기와 향후 확장 가능성 및 대상 환경 또는 플랫폼을 계획하고 고려합니다.
이것이 당신이해야 할 전부라면, 평범한 자바 스크립트를 한 번 작성하면 완료됩니다.
선적 서류 비치