집 > 기사 > 웹 프론트엔드 > HTTP 메시지와 Ajax에 대한 기본 지식에 대한 자세한 설명

HTTP 메시지와 Ajax에 대한 기본 지식에 대한 자세한 설명

이번에는 HTTP 메시지와 Ajax에 대한 기본 지식에 대해 자세히 설명했습니다. HTTP 메시지 사용 시 주의사항은 무엇이며, Ajax에 대한 기본 지식은 무엇인지 살펴보겠습니다.

HTTP 메시지

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

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

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

　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)

[사용자 이름 ] 요청한 사용자 이름을 서버에 제공합니다

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

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

를 전달하고 onreadystatechange 이벤트에 메서드를 바인딩하여 상태 변경을 수신합니다(상태가 변경되는 한 메서드 실행이 트리거됨).

xhr.onreadystatechange = function(){

　xhr.readyState:AJAXstatus code 현재 처리 진행 중

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

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

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

3 loading 주요 반환 내용은 서버 측에서 준비 및 처리 중

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

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

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

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

　302 임시 리디렉션/임시 전송 서버 로드 Balancing

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

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

　401 접속 권한이 없습니다

　404 클라이언트가 접속한 주소가 없습니다 존재

　500 알 수 없는 서버 오류

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

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

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

xhr.send(null);

다음에 방법을 마스터하신 것 같습니다. 이 기사의 사례를 읽으십시오. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!