찾다
  • 로그인
  • 가입
비밀번호 재설정 성공

당신이 관심을 갖고 있는 프로젝트를 팔로우하고 그들에 관한 최신 뉴스를 맛보세요

PHP 개발 기본 튜토리얼의 AJAX 내용 요약

AJAX의 작업 흐름은 다음과 같습니다.

68.png

1. 이벤트가 발생합니다. 일반적으로 oclick 이벤트, onchange 이벤트가 있습니다. , onkeyup 이벤트 등

참고:

oclick 이벤트: 개체를 클릭할 때 발생

onchange 이벤트: 필드의 내용이 변경될 때 발생

onkeyup 이벤트: 키보드 키를 놓았을 때 발생


2. XMLHttpRequest 객체 생성

브라우저 버전이 다르기 때문에 다음을 수행해야 합니다. Conventional 판단을 생성할 때 구체적인 코드는 다음과 같습니다

XMLHttpRequest 객체의 open() 및 send() 메소드를 사용하여 서버에 요청을 보냅니다

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
참고: 요청 형식에 주의하세요. 구체적인 형식은 다음과 같습니다.


4. , 응답을 생성하고 데이터를 브라우저에 반환합니다.

요청이 서버로 전송되면 몇 가지 응답 기반 작업을 수행해야 합니다.

69.png


readyState가 변경될 때마다 onreadystatechange 이벤트가 트리거됩니다.

readyState 속성은 XMLHttpRequest의 상태 정보를 저장합니다. XMLHttpRequest 객체의 세 가지 중요한 속성은 다음과 같습니다.

onreadystatechange 이벤트에서 언제 지정하는지 지정합니다. 서버가 응답합니다. 처리할 준비가 되었을 때 수행되는 작업입니다.

댕. ReadyState가 4이고 상태가 200이면 응답이 준비되었음을 의미합니다.

참고: onreadystatechange 이벤트는 각 ReadyState 변경에 따라 5회(0~4) 트리거됩니다


서버로부터 응답을 받으려면 XMLHttpRequest 객체의 responseText 또는 responseXML 속성을 사용할 수 있습니다.

67.png

예:

    xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();

66.png

5. js를 사용하여 반환된 데이터를 처리하고 페이지를 업데이트합니다.

js는 다음을 통해 양식 영역의 일부를 가져옵니다. id를 만들고 XMLHttpRequest 객체가 반환한 데이터로 채웁니다.

새로운 파일
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
시사 Clear
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~