Ajax 작동 방식에 대한 자세한 설명

이번에는 ajax의 작동 원리에 대해 자세히 설명하겠습니다. ajax 사용 시 주의 사항은 무엇인가요?

AJAX는 빠르고 동적인 웹 페이지를 만드는 기술입니다. AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹 페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

1. ajax에 포함된 기술

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

CSS 및 XHTML을 사용하여 표현됩니다.

상호작용과 동적 디스플레이를 위해 DOM 모델을 사용하세요.

XMLHttpRequest를 사용하여 서버와 비동기적으로 통신하세요.

javascript를 사용하여 바인딩하고 호출하세요.

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

2. ajax를 만드는 방법

Ajax의 원리는 간단하게 XmlHttpRequest 객체를 통해 서버에 비동기 요청을 보내고, 서버에서 데이터를 얻은 후, javascript를 사용하여 DOM을 작동하고 업데이트하는 것입니다. 페이지. 여기서 가장 중요한 단계는 서버에서 요청 데이터를 얻는 것입니다. 기본적으로 Ajax를 생성하는 작업은 다음 네 단계로 나눌 수 있습니다.

1. XMLHttpRequest 개체 만들기

모든 최신 브라우저(IE7+, Firefox, Chrome, Safari 및 Opera)에는 XMLHttpRequest 개체가 내장되어 있습니다.

XMLHttpRequest 개체 생성을 위한 구문:

var xhr = new XMLHttpRequest();

이전 버전의 Internet Explorer(IE5 및 IE6)는 ActiveX 개체를 사용합니다.

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

IE5 및 IE6을 포함한 모든 최신 브라우저에서 작동하려면 브라우저가 XMLHttpRequest 개체를 지원하는지 확인하세요. 지원되는 경우 XMLHttpRequest 객체를 만듭니다. 지원되지 않는 경우 ActiveXObject를 생성합니다:

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. 요청 준비

XMLHttpRequest 객체를 초기화하고 세 가지 매개변수를 허용합니다.

xhr.open(method,url,async);

첫 번째 매개변수는 요청 유형의 문자열을 나타내며 해당 값은 다음과 같습니다. GET 또는 POST가 될 수 있습니다.

GET 요청:

xhr.open("GET",demo.php?name=tsrot&age=24,true);

POST request:

xhr.open("POST",demo.php,true);

두 번째 매개변수는 요청이 전송될 URL입니다.

세 번째 매개변수는 true 또는 false이며 요청이 비동기 모드에서 실행되는지 아니면 동기 모드에서 실행되는지를 나타냅니다. (기본값은 true, false는 일반적으로 권장되지 않습니다.)

false: 동기 모드에서 실행된 요청은 서버가 응답을 받을 때까지 모든 자바스크립트 코드의 실행을 일시 중지합니다. 네트워크에 연결하거나 파일을 다운로드할 때 브라우저가 실패하면 페이지가 중단됩니다. 항상 멈출 것입니다.
true: 요청 개체가 데이터를 보내고 받는 동안 브라우저는 계속해서 페이지를 로드하고 다른 자바스크립트 코드를 실행할 수 있습니다

3. 요청 보내기

xhr.send();

일반적으로 Ajax에서 제출하는 대부분의 매개변수는 간단한 문자열이며, 제출할 매개변수를 open 메소드의 url 매개변수에 직접 작성하면 됩니다. 이때 send 메소드의 매개변수는 다음과 같습니다. null이거나 비어 있습니다.

GET 요청:

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

POST 요청:

HTML 형식과 같은 데이터를 POST해야 하는 경우 setRequestHeader()를 사용하여 HTTP 헤더를 추가하세요. 그런 다음 send() 메서드에 보내려는 데이터를 지정합니다:

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("name="+userName+"&age="+userAge);

4. 응답 처리

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}

onreadystatechange 이벤트:

요청이 서버로 전송되면 응답 기반 작업을 수행해야 합니다. 작업. ReadyState가 변경될 때마다 onreadystatechange 이벤트가 트리거됩니다.

readyState 속성:

0: 객체가 생성되었지만 open() 메서드가 아직 호출되지 않았습니다.

1: open() 메서드가 호출되었지만 아직 요청이 전송되지 않았습니다.

2：请求已经发送，标题和状态已经收到，并可用。

3：接收到来自服务器的响应。

4：接收完请求数据，表示已经完成请求。

status属性：

200:”OK”

404: 未找到页面

responseText：获得字符串形式的响应数据

responseXML：获得 XML 形式的响应数据

返回值一般为json字符串，可以用JSON.parse(xhr.responseText)转化为JSON对象。

5、完整例子

demo.html

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
};
xhr.open("GET","./data.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText).name);
}
}

data.json

{
"name":"tsrot",
"age":24
}

三、ajax应用场景

场景 1. 数据验证

场景 2. 按需取数据

场景 3. 自动更新页面

四、ajax优缺点

优点：

1、页面无刷新，用户体验好。

2、异步通信，更加快的响应能力。

3、减少冗余请求，减轻了服务器负担

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1、ajax干掉了back按钮，即对浏览器后退机制的破坏。

2、存在一定的安全问题。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、无法用URL直接访问。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

AJAX请求数组应该如何实现

在Ajax中怎样清除缓存

위 내용은 Ajax 작동 방식에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!