XMLHttpRequest 객체의 Ajax 비동기 요청 관련 문제-JS 튜토리얼-php.cn

XMLHttpRequ est 객체

1. XMLHttpRequest 객체

1 Ajax는 JavaScript의 XMLHttpRequest를 사용하여 비동기 전송을 구현할 수 있습니다.

2 XMLHttpRequest 객체는 XMLHttp 구성 요소 객체입니다. 스크립트가 서버에서 반환된 eXML 데이터를 얻거나 서버로 데이터를 보낼 수 있도록 합니다.

3.XMLHttpRequest는 매번 페이지를 새로 고칠 필요 없이 클라이언트와 서버 간의 데이터 수준 상호 작용만 실현할 수 있습니다

4.XMLHttpRequest가 먼저였습니다. Microsoft Internet Explorer 5.0에서 개발한 ActiveX 컨트롤로 제공되며 이후 널리 사용되었습니다

5. XMLHttpRequest를 사용하여 요청을 보내고 응답을 처리하기 전에 XMLHttpRequest 개체를 만들어야 합니다.

6.XMLHttpRequest는 W3C가 아닙니다. 표준이며 다양한 방법으로 사용할 수 있습니다. JavaScript를 사용하여 XMLHttpRequest 인스턴스를 만듭니다

7. XMLHttpRequest는 IE에서 ActiveX 컨트롤로 구현되는 반면, 다른 브라우저에서는 이를 JavaScript 내장 객체

2로 구현합니다. 객체 생성

"text /javascript" >

3. XMLHttpRequest 객체 속성(현재 상태 수신 및 표시)

1. ReadySate - 반환된 요청의 상태를 기록합니다

. 0-초기화: 객체가 생성되었고, 유닛이 초기화되었으며, open 메소드가 호출되지 않았습니다.

. 1-초기화: 개체가 생성되었지만 요청을 보내기 위해 보내기 메서드가 호출되지 않았습니다.

2-데이터 보내기: 보내기 메서드가 호출되었지만 HTTP 헤더를 알 수 없습니다. .

3-데이터 전송: 부분적인 데이터가 승인되었지만 응답이 불완전합니다. .

4-완료: 데이터 승인이 완료되어야 완전한 반환 데이터를 얻을 수 있습니다 2.responseText-클라이언트 HTTP 응답

의 텍스트 콘텐츠를 받습니다. 읽기 전용

.

readySate가 1/2이면 responseText 값은 빈 문자열 입니다.

readyState가 3이면 응답 정보가 수신 중이고 완료되지 않은 것입니다 .

readyState가 4이면 응답 정보를 받았다 는 의미입니다.

xmlHttp 기본 응답 데이터 인코딩은 UTF-8 3입니다. responseXML - send()가 실행된 후 반환된 정보는 XML 문서 개체

로 형식화됩니다.

Content-Type에 지정된 MIME 유형은 text/HTML 이어야 합니다.

Content-Type에 이 유형이 포함되어 있지 않으면 responseXML은 수신 시 null 값을 얻습니다. 4. status - send()가 실행된 후 status를 사용하여 사물의 상태를 읽을 수 있습니다

. 긴 정수 데이터

. 현재 요청의

HTTP 상태 코드 를 반환합니다. 이 속성은

readyState가 3 또는 4인 경우에만 사용됩니다. 그렇지 않으면 상태 를 읽을 때 오류가 발생합니다.

100 - 클라이언트는 요청 을 계속 보내야 합니다.

200-거래 성공 .

400-잘못된 요청 .

403 - 요청이 허용되지 않습니다 .

404-파일, 쿼리, URL을 찾을 수 없습니다 .

500-서버 내부 오류

. 502 서버를 일시적으로 사용할 수 없습니다

. 505 - 서버가 요청 헤더의 HTTP 버전을 지원하지 않거나 거부합니다.

5. statusText-send()가 실행된 후 statusText

를 통해 사물의 상태를 읽을 수 있습니다. 현재 HTTP 요청의 상태 줄

을 반환합니다. 이 속성은 readyState가 3 또는 4일 때만 사용할 수 있습니다. 그렇지 않으면 상태를 읽을 때 오류가 발생합니다.

6.Onreadystatechange-readyState가 변경될 때 수행되는 작업

. 일반적으로 핸들러 함수 이름은 XMLHttpRequest 객체에 대한 이벤트 처리

를 지정하기 위해 onreadystatechange에 지정됩니다. 이벤트 처리 기능에서는 readyState의 상태 값을 기준으로 해당 처리

를 수행합니다. 예:

1.abort()-현재 작업을 종료

. XMLHttpRequest 객체에 의한 HTTP 요청을 중지하고 객체를 초기 상태

2.open()-xmlHttp.open(method,url,mode,user,pwd)

으로 복원합니다. 새로운 HTTP 요청을 생성하고 요청 방법, URL, 확인 정보 등을 지정합니다.

. 방법: POST, GET, PUT(대소문자는 무시 가능)

. url: 요청한 대상 주소

. mode: 요청이 비동기인지 여부를 지정하며, 기본값은 true입니다. true인 경우 상태가 변경되면 onreadystatechange 속성으로 지정된 처리 함수가 호출됩니다.

. open()을 호출한 후 XMLHttpRequest 객체는 ReadyState 속성을 1로 설정하고 responseText, responseXML, status, statusText 및 기타 속성의 초기 값을 복원하고

open(을 호출할 때 요청 헤더 정보를 재설정합니다. ), ReadyState는 4입니다. 그러면 XMLHttpRequest 객체는 위의 값

3.send()-xmlHttp.send(content)

를 재설정합니다. 서버에 요청을 보내고 응답을 받습니다

4.setRequestHeader()-setRequestHeader(header, value)

. 특정 요청에 대해 HTTP 헤더 정보

를 개별적으로 설정합니다. readyState가 1이면 이 메소드는 send() 후에 호출될 수 있으며, 그렇지 않으면 예외

가 반환됩니다. 이 이름을 가진 HTTP 헤더가 이미 존재하는 경우 원래 정보를 덮어쓰게 됩니다

. 헤더-헤더 이름: 문자열 유형

. value - 헤더 이름의 값: 문자열 유형

5.getResponseHeader() - 서버

에서 보낸 메시지의 헤더를 읽습니다. HEAD 요청은 콘텐츠를 무시하므로 응답이 GET 또는 POST에 대한 응답보다 작습니다.

콘텐츠 가져오기:

. 콘텐츠 유형: 콘텐츠 유형

. 콘텐츠 길이: 콘텐츠 길이

. Last-Modify: 마지막 수정 날짜

. 예: function getHeadInfo() { if(xmlHttp.readyState==4){ if(headeyType==”Content-Type”){ window.alert(“Content-Type:”+xmlHttp.getResponseHeader(“Content-Type”); } else if(headType==”Content-Length”){ window.alert(“Content-Length:”+xmlHttp,getResponseHeader(“Content-Length”); } else if(headType==”Last-Modify”){ window.alert(“Last-Modify:”+xmlHttp.getResponseHeader); } } } 로그인 후 복사

. 헤더 정보를 얻을 때 모든 정보를 얻을 수는 없습니다

6.getAllResponseHeaders()-모든 헤더 정보를 가져옵니다 。在获取时只用 HEAD即可获取

。例 :fuction headRequest(){

creatXMLHttpRequest(); xmlHttp.onreadystatechange=getHeadInfo; xmlHttp.open(“HEAD”,”url”,false); xmlHttp.send(null); } function getHeadInfo(){ if(readyState==4){ Alter(xmlHttp.getAllResponseHeaders()); } 로그인 후 복사

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

XMLHttpRequest 객체의 Ajax 비동기 요청 관련 문제