아약스 기술이란 무엇입니까?

ajax에는 다음 기술이 포함됩니다. 1. HTML 또는 비동기 통신 수행 5. JavaScript, 바인딩 및 호출 구현.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

Ajax는 HTML 또는 XHTML, CSS, JavaScript, DOM, XML, XSLT 및 가장 중요한 XMLHttpRequest를 포함한 기존 기술 모음을 사용하는 '새로운' 방법을 설명하기 위해 2005년 Jesse James Garrett이 제안한 새로운 용어입니다.

Ajax 기술을 사용하면 웹 애플리케이션은 전체 페이지를 다시 로드(새로 고침)할 필요 없이 사용자 인터페이스에 증분 업데이트를 빠르게 제공할 수 있으므로 프로그램이 사용자 작업에 더 빠르게 응답할 수 있습니다.

Ajax에 포함된 기술:

Ajax가 새로운 기술이 아니라 여러 가지 원천 기술의 조합이라는 것은 누구나 알고 있습니다. 이는 다음과 같은 기술로 구성됩니다.

1. 웹 콘텐츠를 만드는 데 사용되는 HTML 또는 XHTML

2. 웹 콘텐츠를 아름답게 만드는 데 사용되는 CSS

3. 상호 작용 및 동적 표시를 위해 DOM 모델을 사용합니다.

4. XMLHttpRequest를 사용하여 서버와 비동기적으로 통신합니다.

5. 자바스크립트를 사용하여 바인딩하고 호출하세요.

위 기술 중 XmlHttpRequest 객체를 제외한 다른 모든 기술은 웹 표준을 기반으로 하며 널리 사용됩니다. 비록 XMLHttpRequest는 아직 W3C에서 채택되지 않았지만 이미 거의 모든 주요 브라우저에서 표준이 되었기 때문입니다. 현재는 지원합니다.

ajax 원리와 XmlHttpRequest 객체

Ajax의 원리는 단순히 XmlHttpRequest 객체를 통해 서버에 비동기 요청을 보내고, 서버에서 데이터를 얻은 후, javascript를 사용하여 DOM을 작동하고 페이지를 업데이트하는 것입니다. 여기서 가장 중요한 단계는 서버에서 요청 데이터를 얻는 것입니다. 이 과정과 원리를 이해하려면 XMLHttpRequest에 대한 이해가 필요합니다.

XMLHttpRequest는 ajax의 핵심 메커니즘으로 IE5에서 처음 도입되었으며 비동기 요청을 지원하는 기술입니다. 간단히 말해서, JavaScript는 사용자를 차단하지 않고 적시에 서버에 요청하고 응답을 처리할 수 있습니다. 새로 고침 효과를 얻지 못합니다.

그럼 XMLHttpRequest부터 시작하여 어떻게 작동하는지 살펴보겠습니다.

먼저 XMLHttpRequest 객체의 속성을 살펴보겠습니다.

속성은 다음과 같습니다:

onreadystatechange 상태가 변경될 때마다 트리거되는 이벤트에 대한 이벤트 핸들러입니다.

responseText는 서버 프로세스에서 문자열 형식의 데이터를 반환합니다.

responseXML 서버 프로세스에서 반환된 DOM 호환 문서 데이터 개체입니다.

status 공통 404(찾을 수 없음) 및 200(준비) 등 서버에서 반환된 숫자 코드

status 상태 코드에 수반되는 텍스트 문자열 정보

readyState 개체 상태 값

0(초기화되지 않음) 개체 확립되었지만 아직 초기화되지 않았습니다 (open 메소드가 아직 호출되지 않았습니다)

1 (초기화) 객체가 생성되었지만 send 메소드가 호출되지 않았습니다

2 (데이터 전송 중) send 메소드가 호출되었습니다 호출했지만 현재 상태와 http 헤더를 알 수 없습니다.

3 (데이터 전송 중) 응답 및 http 헤더가 불완전하므로 responseBody 및 responseText를 통해 데이터의 일부를 가져올 때 오류가 발생합니다.

4 (Complete) 이때 responseXml과 responseText를 통해 완전한 응답을 얻을 수 있습니다. 그러나 브라우저 간의 차이로 인해 XMLHttpRequest 객체를 생성하는 방법이 다를 수 있습니다. 이러한 차이는 주로 IE와 다른 브라우저 사이에 반영됩니다. 다음은 XMLHttpRequest 객체를 생성하는 비교적 표준적인 방법입니다.

function CreateXmlHttp()
{
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest)
{
xmlhttp=new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try{
xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
}
catch(ex){}
}
}
}
function TestAjax()
{
var data=document.getElementByIdx("username").value;
CreateXmlHttp();
if(!xmlhttp)
{
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp.open("POST",url,false);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementByIdx("user1").innerHTML="数据正在加载...";
if(xmlhttp.status==200)
{
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}

위와 같이 함수는 먼저 XMLHttpRequest의 전체 상태를 확인하고 완료(readyStatus=4), 즉 데이터가 전송되었는지 확인합니다. 그런 다음 서버 설정에 따라 요청 상태를 쿼리합니다. 모든 것이 준비되면(상태=200) 다음 필수 작업을 수행합니다.

XmlHttpRequest의 두 가지 방법인 open과 send에 대해 open 방법은 다음을 지정합니다.

a. 서버에 제출된 데이터 유형, 즉 post 또는 get.

b, URL 주소를 요청하고 매개변수를 전달했습니다.

c. 전송 모드, false는 동기를 의미하고 true는 비동기를 의미합니다. 기본값은 true입니다. 비동기 통신 모드(true)인 경우 클라이언트는 서버의 응답을 기다리지 않고, 동기 모드(false)인 경우 클라이언트는 다른 작업을 수행하기 전에 서버가 메시지를 반환할 때까지 기다려야 합니다. 실제 필요에 따라 동기화 방법을 지정해야 합니다. 일부 페이지에서는 여러 요청이 발행되거나 심지어 구성, 계획 및 형성되는 대규모, 고강도 요청이 발생할 수 있으며 후자는 이전 요청을 덮어씁니다. . 물론 동기화 방법을 지정해야 합니다.

Send 메소드는 요청을 보내는 데 사용됩니다.

XMLHttpRequest의 작업 흐름을 알면 XMLHttpRequest가 서버에 요청을 보내는 데 완전히 사용되며 그 역할은 이것으로 제한되어 있지만 그 역할은 전체 Ajax 구현의 핵심입니다. 왜냐하면 ajax는 두 가지에 지나지 않기 때문입니다. 요청을 하고 이에 응답하는 프로세스입니다. 이는 전적으로 클라이언트측 기술입니다. XMLHttpRequest는 서버와 클라이언트 간의 통신 문제를 처리하므로 이것이 매우 중요합니다.

이제 우리는 Ajax의 원리를 어느 정도 이해할 수 있을 것 같습니다. 우리는 서버를 일반 텍스트 스트림을 반환하는 데이터 인터페이스로 생각할 수 있습니다. 물론 이 텍스트 스트림은 XML 형식, HTML, Javascript 코드 또는 단순한 문자열일 수 있습니다. 이때 XMLHttpRequest는 서버에서 이 페이지를 요청하고 서버는 텍스트 결과를 페이지에 기록합니다. 이는 클라이언트가 결과를 비동기적으로 얻은 후 직접 작성하지 않는다는 점입니다. 페이지에 표시되지만 먼저 자바스크립트로 처리된 다음 페이지에 표시됩니다. Magicajax 등과 같이 현재 널리 사용되는 많은 Ajax 컨트롤은 DataSet과 같은 다른 데이터 유형을 반환할 수 있으며 본질적으로 둘 사이에는 큰 차이가 없습니다.

【관련 튜토리얼 추천: AJAX 동영상 튜토리얼】

위 내용은 아약스 기술이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!