JQuery-Ajax

a, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}

showCustomer() 함수는 다음 작업을 수행합니다.
클라이언트가 XMLHttpRequest 객체를 만들도록 선택했는지 확인하십시오. 서버 응답이 완료될 때 생성된 함수를 실행하여 서버에 요청을 보내는 파일입니다. URL에 인자 q를 추가했습니다. (입력 영역의 내용이 있음)
AJAX 서버 페이지
위의 JavaScript에서 호출된 서버 페이지는 ASP 파일입니다. 이름은 "getcustomer.asp"입니다.
PHP로 서버 파일을 작성하는 것도 쉽거나 다른 서버 언어로 작성할 수 있습니다.
"getcustomer.asp"의 원본 코드는 데이터베이스에 대한 조회를 책임지고 HTML 테이블로 결과를 되돌려줍니다.

<% response.expires=-1 sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID=" sql=sql & "'" & request.querystring("q") & "'" set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open(Server.Mappath("/db/northwind.mdb")) set rs=Server.CreateObject("ADODB.recordset") rs.Open sql,conn response.write("<table>") do until rs.EOF for each x in rs.Fields response.write("<tr><td><b>" & x.name & "</b></td>") response.write("<td>" & x.value & "</td></tr>") next rs.MoveNext loop response.write("</table>") %>

AJAX는 XML 파일과 대화식으로 통신할 수 있습니다.
실례 설명 - loadXMLDoc() 함수 사용자가 위의 "CD 정보 얻기"단추를 누르면 loadXMLDoc() 함수를 실행합니다.
loadXMLDoc() 함수는 XMLHttpRequest 대상을 만들고 서버 응답이 준비되었을 때 실행되는 함수를 추가하여 요청을 서버에 보냅니다.
서버 응답이 완료되면 XML 파일에서 노드(요소)를 추출하고 XML 데이터가 채워진 HTML 테이블을 사용하여 txtCDInfo 자리 표시자를 업데이트하는 HTML 테이블이 만들어집니다.

function loadXMLDoc(url) {
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
    xx=x[i].getElementsByTagName("ARTIST");
      {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

try...catch의 역할은 테스트 코드의 오류입니다.오류가 발생하면 오류 정보를 알려주고 계속과 복귀 단추가 있습니다. 계속하면 코드는 아무런 반응도 하지 않습니다.