집 >웹 프론트엔드 >JS 튜토리얼 >HTTP 메시지와 Ajax에 대한 기본 지식

HTTP 메시지와 Ajax에 대한 기본 지식

亚连원래의: 2018-05-22 10:28:481657검색

클라이언트가 서버에 전달한 콘텐츠와 서버가 클라이언트에 전달한 콘텐츠는 모두 HTTP 메시지입니다. Ajax는 서버에 요청을 보내는 데 사용되는 클라이언트 JS의 메소드입니다. 이 글을 통해 HTTP 메시지와 Ajax에 대한 기본 지식을 공유하겠습니다. 관심 있는 친구들은 함께 살펴보세요

HTTP 메시지

클라이언트가 서버에 전달한 내용과 서버가 클라이언트에 전달한 내용이 HTTP 메시지에 속합니다.

시작 라인: 요청 시작 라인 응답 시작 라인

헤더: 요청 헤더 응답 헤더 공통 헤더( 요청과 응답 모두) ) 커스텀 헤더

　Body: 요청 본문 응답 본문

클라이언트가 서버에 전달합니다. 데이터:

　요청 URL은 /getList? 매개변수 다음에 물음표 형식으로 서버에 전달됩니다. name=zhangsan&age=7

　 요청 헤더 설정(요청 헤더 정보 설정)

요청 본문을 설정하고 서버로 전달된 내용을 요청 본문에 넣어 서버로 전달

에서 전달된 데이터 서버에서 클라이언트로:

응답 헤더 정보 설정

응답 본문 내용 설정

Ajax : async javascript 및 xml 비동기 JS 및 XML(확장 가능 마크업 언어, XML 파일에 사용되는 태그는 모두 자체적으로 확장되며 관련 데이터를 저장하기 위한 확장된 일반 태그)

　Ajax는 클라이언트입니다. JS의 메소드는 서버에 요청을 보내고(서버에 데이터를 전달할 수도 있음) 서버에서 반환된 콘텐츠를 가져오는 데 사용됩니다( Ajax는 일반적으로 클라이언트의 브라우저에서 실행됩니다.

Ajax 4단계:

Ajax 객체 생성(다음 쓰기 방법은 IE6 이하 브라우저에서는 지원되지 않음)

var xhr = new XMLHttpRequest;

보내기 전 기본 정보 구성: 요청 방법 구성(GET , POST, PUT, DELETE, HEAD...)

URL 주소 열기(요청을 보낼 서버 주소 구성)

동기화 또는 비동기화(true는 비동기식, false는 동기식, 기본값은 true)

[username] to The 서버는 요청된 사용자 이름을 제공합니다.

[userpass]는 요청된 사용자 비밀번호를 서버에 제공합니다. 이 두 값은 일반적으로 서버가 보안 제한을 설정하고 특정 사용자에게만 액세스를 허용하는 경우에만 기록됩니다. 전달하세요

xhr.open(&#39;get&#39;,"/data.txt",false,[username],[userpass]);

상태 변경을 모니터링하기 위해 onreadystatechange 이벤트에 메서드를 바인딩합니다(상태가 변경되는 한 메서드 실행이 트리거됩니다)

xhr.onreadystatechange = function(){

　xhr.readyState: 현재 처리의 진행 상황을 나타낼 수 있는 AJAX 상태 코드

　0 unset 현재 요청이 아직 이루어지지 않았습니다. Send

　1개의 열린 URL 주소가 열렸습니다(보내기 전 매개변수 구성이 완료되었습니다)

　2 headers_received 응답 헤더 정보가 수락되었습니다

　3 loading 주요 반환 내용 은(는) 서버 측에서 처리를 준비 중입니다

　4 done 응답 본문의 내용이 성공적으로 클라이언트에 반환되었습니다

　xhr.status: 서버의 응답 내용 상태를 설명하는 HTTP 네트워크 상태 코드

　200 OR ^ 2d{2} (200 또는 2로 시작) -> 둘 다 응답 본문의 내용이 성공적임을 나타냅니다. Returned

　301 영구 리디렉션/영구 전송

　302 임시 리디렉션/임시 전송 서버 로드 밸런싱

　304 이번에 얻은 내용은 캐시에 있는 데이터를 읽는 것입니다

　400 클라이언트가 서버에 전달한 매개변수가 나타납니다. Error

　401 Unauthorized access

　404 클라이언트가 접근한 주소가 존재하지 않습니다

　500 알 수 없는 서버 오류

　503 서버가 오버로드되었습니다

　　if(xhr.readyState===4 && /^2\d{2}$/.test(xhr.status)){
　　　　var val = xhr.responseText;
　　}
}

요청 보내기: 매개변수는 요청 본문에서 서버에 전달되는 내용입니다.

xhr.send(null);

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

HTTP 메시지와 Ajax에 대한 기본 지식

관련 기사