Ajax는 어떻게 작동합니까(다이어그램 포함)

이 기사는 주로 ajax의 작동 원리에 대해 설명합니다. 관심 있는 친구들이 이에 대해 배울 수 있기를 바랍니다.

Ajax는 비동기 JavaScript 및 XML(asynchronous JavaScript and XML)을 의미하며, 가장 큰 장점은 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환하고 웹 페이지 콘텐츠의 일부를 업데이트할 수 있다는 것입니다. 구현의 기본 원칙은 웹 페이지 DOM 개체가 웹 페이지 콘텐츠의 일부를 정확하게 작동할 수 있다는 것입니다. XML은 순수한 데이터 저장 매체로서 클라이언트와 서버가 웹 페이지 콘텐츠의 데이터만 교환할 수 있도록 해줍니다. 웹 페이지 스타일과 같은 추가 정보, XMLHttpRequest는 브라우저 자체의 내장 요청과 독립적으로 서버와 상호 작용하는 요청 개체입니다.

서버와 상호 작용하는 웹 애플리케이션 Ajax의 추상 프로세스는 다음과 같습니다.

자세한 프로세스 설명:

1: Ajax 기술을 사용하려면 기본은 XMLHttpRequest 객체를 생성하는 것입니다. 가능성:

var xmlhttp;
if (window.XMLHttpRequest) { //检查浏览器的XMLHttpRequest属性，如果为真则支持XMLHttpRequest
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest(); 
} else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}

2: 웹 페이지의 특정 이벤트에 대한 응답을 위한 비동기 작업 바인딩: 위에서 만든 xmlhttp 개체를 통해 요청을 전송하고 데이터를 전달합니다. 요청을 하기 전에 먼저 요청 개체의 메서드, 요청 처리를 위해 서버에 제출할 파일, 전달할 데이터 및 비동기 여부를 정의해야 합니다.

그중 일반 요청 제출 데이터와 마찬가지로 여기에는 두 가지 방법이 있습니다: GET/POST

 xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",);
 xmlhttp.send();

xmlhttp.open("POST","/try/ajax/demo_post2.php","Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

3: 서버가 요청을 받은 후 첨부된 데이터를 요청을 처리하는 파일에 대한 입력으로 전달합니다. 예를 들어 여기에 있습니다. : fname=Henry&lname=Ford는 /try/ajax/demo_get2.php 파일에 입력으로 전달됩니다. 그런 다음 파일은 들어오는 데이터에 따라 처리되고 결과는 최종적으로 반환되어 응답 개체를 통해 다시 전송됩니다. 클라이언트는 xmlhttp 객체를 기반으로 응답 콘텐츠를 얻은 다음 DOM 객체를 호출하여 응답 콘텐츠를 기반으로 웹 페이지 콘텐츠를 부분적으로 수정합니다.

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)//请求处理完毕且状态为成功
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//用response内容来修改DOM中的元素的内容
    }

그 중에는 문자열 유형과 XML 텍스트라는 두 가지 유형의 응답이 있습니다. 두 응답의 다른 추출은 다음과 같습니다.

responseText 속성은 문자열 형식으로 응답을 반환합니다.

document.getElementById("myp").innerHTML=xmlhttp.responseText;

서버의 응답이 XML인 경우 를 XML 개체로 구문 분석해야 하며 responseXML을 사용합니다. :

xmlDoc=xmlhttp.responseXML; //获取服务器响应的XML文本并转换得到XMLDOM对象
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");//通过XMLDOM对象调用方法来获取XML对象中的内容
for (i=0;i<x.length;i++) {
txt=txt + x[i].childNodes[0].nodeValue + "<br>"; }
 
document.getElementById("myDiv").innerHTML=txt;//把获取到的内容通过document对象更新到网页内容去容去

관련 튜토리얼: ajax 비디오 튜토리얼　

위 내용은 Ajax는 어떻게 작동합니까(다이어그램 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!