HTML, JavaScript™ 기술, DHTML 및 DOM으로 구성된 Ajax는 번거로운 웹 인터페이스를 대화형 Ajax 애플리케이션으로 변환하는 훌륭한 방법입니다. Ajax의 경우 핵심 개체는 XMLHttpRequest이며 모든 Ajax 작업은 이 개체의 작업과 분리될 수 없습니다.
먼저 javascript에서 이 객체를 생성하는 방법을 이해해 보겠습니다.
varxmlHttp=newXMLHttpRequest();
이 간단한 코드 줄은 Mozilla, Firefox, Safari, Opera 및 기본적으로 모든 형식이나 방식으로 Ajax를 지원하는 Microsoft 이외의 브라우저에서 XMLHttpRequest 개체를 생성합니다. 하지만 시장 점유율이 70%에 달하는 IE의 경우 이 방법은 불가능하고, IE 버전마다 생성 방법이 다르기 때문에 IE에서 객체를 생성하려면 다음 두 가지 방법을 사용해야 합니다
.
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");//최신 브라우저의 경우
}잡음(오류){
노력하다{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//이전 브라우저의 경우
}잡기(err2){
xmlHttp=false;
}
}
그럼에도 불구하고 일부 브라우저에서는 이 객체를 생성하지 못할 수도 있다고 예측할 수 없으므로 생성에 실패할 경우 다음 문장을 추가해야 합니다:
if(!xmlHttp){
Alert("XMLHttpRequest 객체를 생성할 수 없습니다!");
}
조합은 다음과 같습니다:
varxmlHttp=false;
노력하다{
xmlHttp=newXMLHttpRequest();
}잡기(trymicrosoft){
노력하다{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}잡기(다른Microsoft){
노력하다{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}잡기(실패){
xmlHttp=false;
}
}
}
if(!xmlHttp){
Alert("XMLHttpRequest 객체를 생성할 수 없습니다!");
}
그런 다음 비동기 요청을 활성화하는 getInfo() 함수를 만들어 보겠습니다.
functiongetInfo(){
varnum=document.getElementById("num").value;//양식 데이터 가져오기
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//여기서 true는 비동기 요청을 나타냅니다.
}
open()으로 구성되면 요청을 보낼 수 있습니다. send()를 사용하여 데이터를 보낼 수 있지만 URL 자체를 통해 데이터를 보낼 수도 있습니다. 실제로 대부분의 GET 요청에서는 URL을 사용하여 데이터를 보내는 것이 훨씬 쉽기 때문에 여기서는 send()의 매개 변수로 null을 사용하면 됩니다. URL 주소에 있는 php 파일은 우리가 보통 PHP를 사용할 때와 마찬가지로 필요한 데이터를 처리하기 위해 요청하는 php 파일입니다. 여러 매개변수를 &로 구분하여 추가할 수 있습니다.
xmlHttp.send(null);
데이터를 보낸 후 콜백 메서드를 사용하여 서버 상태를 가져와야 하므로 onreadystatechange 속성이 사용됩니다.
xmlHttp.onreadystatechange=updatePage;
이 문이 유효하도록 send() 문 앞에 배치되어야 합니다. 후속 updatePage는 반환된 정보를 처리하는 함수입니다. 전체 getInfo()는 다음과 같습니다.
함수getInfo(){
varnum=document.getElementById("num").value;//양식 데이터 가져오기
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//여기서 true는 비동기 요청을 나타냅니다.
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
}
또한 HTML에서 이 함수를 트리거해야 합니다.
<inputname="num"id="num"onblur="getInfo()"type="text"/>
다음으로 updatePage() 함수를 작성해야 합니다.
functionupdatePage(){
if(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("city").value=response;
}
}
위 코드의 ReadyState는 서버에서 반환한 상태입니다. 이 상태 4는 요청이 전송되고 처리되었음을 나타냅니다. responseText는 서버에서 반환된 정보를 얻은 다음 이를 javascript를 통해 도시 ID가 있는 양식에 할당하는 것입니다.
이 시점에서 간단한 Ajax 프로그램은 다음과 같이 완성됩니다.
varxmlHttp=false;
노력하다{
xmlHttp=newXMLHttpRequest();
}잡기(trymicrosoft){
노력하다{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}잡기(다른Microsoft){
노력하다{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}잡기(실패){
xmlHttp=false;
}
}
}
if(!xmlHttp){
Alert("XMLHttpRequest 객체를 생성할 수 없습니다!");
}
함수getInfo(){
varnum=document.getElementById("num").value;//양식 데이터 가져오기
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//여기서 true는 비동기 요청을 나타냅니다.
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
}
함수업데이트페이지(){
if(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("city").value=response;
}
}
여기에는 아직 php 파일이 누락되어 있는데, 처리 방식과 작성 방식이 다르고 이는 Ajax의 주요 부분이 아니기 때문에 여기에는 코드를 포함시키지 않겠습니다. PHP는 필요한 데이터를 출력하고 반환한다는 점만 기억하세요.
이 튜토리얼은 오랫동안 업데이트되지 않았으며 초보자에게 매우 적합합니다.