Ajax의 기본 개발을 아시나요? Ajax의 기본 개발 단계에 대한 자세한 설명(예제 포함)
- 寻∝梦원래의
- 2018-09-10 16:01:521181검색
이 글에서는 주로 ajax의 기본 개발 단계에 대해 설명합니다. Ajax 개발에 대해 더 깊이 이해하려면 개발 단계를 알아야 합니다. 가장 기본적이지만 개발 방법도 알려줄 수 있습니다. 아약스. 지금 이 글을 읽어보세요
Ajax란 무엇인가요? 무슨 소용이 있나요?
Ajax의 전체 이름은 "Asynchrous Javascript And XML"이며 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 의미합니다. 브라우저와 서버 간 상호작용의 효율성을 높이기 위해 동적 웹페이지를 빠르게 생성하는 기술입니다. 기존의 웹 상호작용 모드를 대체할 수 있습니다.-
이 동기화와 비동기성을 어떻게 이해하나요?
기존 동기식 상호작용 모델은 무엇인가요?
기존 모델에서는 클라이언트 브라우저가 서버에 요청한 후 서버가 요청에 응답할 때까지 기다리며 다른 작업을 수행할 수 없습니다.
주류 기술의 비동기 상호작용 모델은 무엇인가요?
Ajax 비동기 상호 작용 모드에서는 클라이언트 브라우저와 서버 사이에 추가 전송 개체 Ajax 엔진이 있습니다. 클라이언트 브라우저가 Ajax 엔진에 요청을 제출하면 Ajax 엔진이 요청 정보를 서버로 전송하는 역할을 합니다. 이렇게 하면 클라이언트 브라우저가 대기 상태가 아닌 요청을 보낸 후 작업을 계속할 수 있습니다. 서버는 Ajax 엔진 요청을 처리한 후 Ajax 엔진에 응답을 전달하고 Ajax 엔진은 클라이언트 브라우저 페이지를 업데이트합니다. Ajax 개발 단계
1단계: XMLHttpRequest 객체를 가져옵니다.
샘플 코드는 w3school의 xml 문서에서 찾을 수 있습니다.
var xmlhttp = null;if(window.XMLHttpRequest){ //这个是针对浏览器IE7及其7以上的版。
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){ //这个是针对浏览器5到7的版本。
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}2단계: 콜백 함수를 등록합니다.
xmlhttp.onreadystatechange = function(){
};onreadystatechange는 각 상태 변경에 의해 트리거되는 이벤트에 대한 이벤트 핸들러입니다.
3단계: open("method","URL",async,"uname","pswd")
요청 방법, URL 경로, 동기화 여부를 설정하는 데에만 사용되며 요청을 보내지 않습니다.
| Parameters | Function |
|---|---|
| method | 요청을 보내는 방법, 선택적 매개변수는 GET, POST 및 PUT입니다. |
| URL | 전송할 URL 경로는 절대 경로와 상대 경로를 사용할 수 있습니다. |
| async | 요청을 비동기적으로 처리해야 하는지 여부입니다. 공백으로 둘 수도 있습니다. 기본값은 true입니다. |
| true, send()가 전송된 후에도 스크립트 처리, 즉 비동기 처리가 계속됩니다. | |
| false인 경우 스크립트는 스크립트 처리, 즉 동기 처리를 계속하기 전에 특정 응답을 기다립니다. | |
| uname | 아직 사용해본 적이 없고 설명서에도 설명이 없습니다. 그냥 쓰지 마세요. |
| pswd | 아직 사용해본 적이 없고 문서에도 설명이 없습니다. 그냥 쓰지 마세요. |
URL에 매개변수가 필요한 경우 어떻게 되나요?
get 요청인 경우 URL 바로 뒤에 매개변수를 연결하세요.
예: xmlhttp.open("get","http://www.baidu.com?name=xiaosan");
게시물 요청인 경우 여러 설정 작업이 필요합니다.
예: xmlhttp. open ("게시물","http://www.baidu.com");
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded")
xmlhttp.send("이름 = xiaosan");
그 중 setRequestHeader("label","value") 함수는 전송되는 http 헤더에 레이블/값 쌍을 추가하는 것입니다.
4단계: 보내기(콘텐츠)
요청을 보냅니다. 매개변수가 없으면 send(null)로 기록됩니다.
5단계: 콜백 함수에서 특정 데이터 작업을 수행합니다.
이전에 XMLHttpRequest의 일부 속성을 이해해야 합니다.
| Property | Description |
|---|---|
| onreadystatechange | 상태가 변경되면 일부 작업이 트리거될 수 있습니다. |
| readyState | 자세한 내용은 아래 표를 참조하세요 |
| status | 숫자는 "OK"가 200, "Not Found"가 404 등 상태를 반환합니다. |
| statusText | String이 반환됩니다. "확인", "찾을 수 없음" 등과 같은 상태입니다. |
| responseText | 응답을 문자열로 반환합니다. |
| responseXML | 응답을 XML로 반환합니다. 반환되는 것은 DOM을 사용하여 구문 분석할 수 있는 XML 객체입니다. |
다음 표는 ReadyState의 상태 값과 상태 값의 의미를 보여줍니다.
| 상태 값 | 상태 해석 |
|---|---|
| 0 | 초기화되지 않은 상태는 XMLHttpRequest 개체가 생성되기 전의 로드 상태를 나타냅니다. |
| 1 | open 작업입니다. |
| 2 | 로드 상태, 전송 작업입니다. |
| 3 | Interactive 상태에서는 응답 데이터는 수신되나, 응답 헤더와 본문만 수신되지 않습니다. |
| 4 | Complete 상태, 모든 http 응답 수신이 완료되었습니다. |
아약스란 무엇인가요? 무슨 소용이 있나요?
Ajax의 전체 이름은 "Asynchrous Javascript And XML"이며 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 의미합니다. 브라우저와 서버 간 상호작용의 효율성을 높이기 위해 동적 웹페이지를 빠르게 생성하는 기술입니다. 기존의 웹 상호작용 모드를 대체할 수 있습니다.-
이 동기화와 비동기성을 어떻게 이해하나요?
기존 동기식 상호작용 모델은 무엇인가요?
기존 모델에서는 클라이언트 브라우저가 서버에 요청한 후 서버가 요청에 응답할 때까지 기다리며 다른 작업을 수행할 수 없습니다. (자세한 내용을 보려면 PHP 중국어 웹사이트AJAX 개발 매뉴얼 칼럼을 참조하세요.)
주류 기술의 비동기 상호 작용 모델은 무엇인가요?
Ajax 비동기 상호 작용 모드에서는 클라이언트 브라우저와 서버 사이에 추가 전송 개체 Ajax 엔진이 있습니다. 클라이언트 브라우저가 Ajax 엔진에 요청을 제출하면 Ajax 엔진이 요청 정보를 서버로 전송하는 역할을 합니다. 이렇게 하면 클라이언트 브라우저가 대기 상태가 아닌 요청을 보낸 후 작업을 계속할 수 있습니다. 서버는 Ajax 엔진 요청을 처리한 후 Ajax 엔진에 응답을 전달하고 Ajax 엔진은 클라이언트 브라우저 페이지를 업데이트합니다. Ajax 개발 단계
1단계: XMLHttpRequest 객체를 가져옵니다.
샘플 코드는 w3school의 xml 문서에서 찾을 수 있습니다.
var xmlhttp = null;if(window.XMLHttpRequest){ //这个是针对浏览器IE7及其7以上的版。
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){ //这个是针对浏览器5到7的版本。
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}2단계: 콜백 함수를 등록합니다.
xmlhttp.onreadystatechange = function(){
};
onreadystatechange는 각 상태 변경에 의해 트리거되는 이벤트에 대한 이벤트 핸들러입니다.
3단계: open("method","URL",async,"uname","pswd")
요청 방법, URL 경로, 동기화 여부를 설정하는 데에만 사용되며 요청을 보내지 않습니다.
| Parameters | Function |
|---|---|
| method | 요청을 보내는 방법, 선택적 매개변수는 GET, POST 및 PUT입니다. |
| URL | 전송할 URL 경로는 절대 경로와 상대 경로를 사용할 수 있습니다. |
| async | 요청을 비동기적으로 처리해야 하는지 여부입니다. 공백으로 둘 수도 있습니다. 기본값은 true입니다. |
| true, send()가 전송된 후에도 스크립트 처리, 즉 비동기 처리가 계속됩니다. | |
| false인 경우 스크립트는 스크립트 처리, 즉 동기 처리를 계속하기 전에 특정 응답을 기다립니다. | |
| uname | 아직 사용해본 적이 없고 설명서에도 설명이 없습니다. 그냥 쓰지 마세요. |
| pswd | 아직 사용해본 적이 없고 문서에도 설명이 없습니다. 그냥 쓰지 마세요. |
URL에 매개변수가 필요한 경우 어떻게 되나요?
get 요청인 경우 URL 바로 뒤에 매개변수를 연결하세요.
예: xmlhttp.open("get","http://www.baidu.com?name=xiaosan");
게시물 요청인 경우 여러 설정 작업이 필요합니다.
예: xmlhttp. open ("게시물","http://www.baidu.com");
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded")
xmlhttp.send("이름 = xiaosan");
그 중 setRequestHeader("label","value") 함수는 전송되는 http 헤더에 레이블/값 쌍을 추가하는 것입니다.
4단계: 보내기(콘텐츠)
요청을 보냅니다. 매개변수가 없으면 send(null)로 기록됩니다.
5단계: 콜백 함수에서 특정 데이터 작업을 수행합니다.
이전에 XMLHttpRequest의 일부 속성을 이해해야 합니다.
| Property | Description |
|---|---|
| onreadystatechange | 상태가 변경되면 일부 작업이 트리거될 수 있습니다. |
| readyState | 자세한 내용은 아래 표를 참조하세요 |
| status | 숫자는 "OK"가 200, "Not Found"가 404 등 상태를 반환합니다. |
| statusText | String이 반환됩니다. "확인", "찾을 수 없음" 등과 같은 상태입니다. |
| responseText | 응답을 문자열로 반환합니다. |
| responseXML | 응답을 XML로 반환합니다. 반환되는 것은 DOM을 사용하여 구문 분석할 수 있는 XML 객체입니다. |
다음 표는 ReadyState의 상태 값과 상태 값의 의미를 보여줍니다.
| 상태 값 | 상태 해석 |
|---|---|
| 0 | 초기화되지 않은 상태는 XMLHttpRequest 개체가 생성되기 전의 로드 상태를 나타냅니다. |
| 1 | open 작업입니다. |
| 2 | 로드 상태, 전송 작업입니다. |
| 3 | Interactive 상태에서는 응답 데이터는 수신되나, 응답 헤더와 본문만 수신되지 않습니다. |
| 4 | Complete 상태, 모든 http 응답 수신이 완료되었습니다. |
이 글은 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트AJAX 사용자 매뉴얼 컬럼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.
위 내용은 Ajax의 기본 개발을 아시나요? Ajax의 기본 개발 단계에 대한 자세한 설명(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!