집 > 기사 > 백엔드 개발 > HTTP 메시지와 Ajax에 대한 기본 지식을 설명하는 예제

HTTP 메시지와 Ajax에 대한 기본 지식을 설명하는 예제

小云云원래의: 2017-12-26 10:04:091411검색

이 글에서는 HTTP 메시지와 Ajax에 대한 기본 지식을 예시로 설명하겠습니다. 클라이언트가 서버에 전달하는 내용과 서버에서 클라이언트에 전달하는 내용은 모두 HTTP 메시지입니다. Ajax는 서버에 요청을 보내는 데 사용되는 클라이언트 JS의 메소드입니다. 이 기사에서는 HTTP 메시지에 대한 기본 지식을 공유하고 관심 있는 친구는 한 번 살펴보시기 바랍니다.

HTTP 메시지

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

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

헤더: 요청 헤더 응답 헤더 공통 헤더(요청 및 응답 모두) 사용자 정의 헤더

본문: 요청 본문 응답 본문

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

요청 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]은 서버 사용자 이름

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

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

to onreadystatechange 이벤트는 메소드에 바인딩되어 상태 변경을 수신합니다(상태가 변경되는 한 메소드 실행이 트리거됨)

xhr.onreadystatechange = function(){

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

　0 unset 현재 요청이 아직 전송되지 않았습니다

　1 open URL 주소가 공개되었습니다(전송 전 매개변수 구성이 완료되었습니다)

　2 headers_received 응답 헤더 정보가 승인되었습니다

　3 loading The 주요 반환 콘텐츠는 서버 측에서 준비 중입니다

　4 done 응답 본문의 콘텐츠가 클라이언트 터미널에 성공적으로 반환되었습니다

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

　200 또는 ^2d{2} (200 또는 2로 시작) -> 둘 다 응답 본문의 내용이 성공적으로 반환되었음을 나타냅니다.

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

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

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

　400 클라이언트가 서버에 전달한 매개변수에 오류가 있습니다

　401 접근 권한이 없습니다

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

　500 알 수 없는 서버 오류

　503 서버가 과부하되었습니다

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

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

xhr.send(null);

HTTP 메시지와 Ajax에 대한 기본 지식을 설명하는 예제

관련 기사