JS의 Ajax 활용 스킬 상세 분석

이번에는 JS에서 Ajax를 사용하는 기술에 대한 자세한 분석과 JS에서 Ajax를 사용할 때의 주의사항에 대한 자세한 분석을 가져오겠습니다.

Ajax는 새로운 프로그래밍 언어가 아니라 기존 표준을 사용하는 새로운 방식입니다. AJAX는 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환할 수 있습니다. 이 비동기식 상호 작용 방법을 사용하면 사용자가 클릭한 후 페이지를 새로 고치지 않고도 새 데이터를 얻을 수 있습니다.

XMLHttpRequest 객체

Ajax의 핵심은 XMLHttpRequest 객체(XHR)입니다. XHR은 서버에 요청을 보내고 서버 응답을 구문 분석하기 위한 인터페이스를 제공합니다. 서버에서 비동기적으로 새 데이터를 가져오는 기능.

브라우저에서 객체 생성(IE7 이상 버전만 지원):

var xhr = new XMLHttpRequest();

XHR 사용

가장 먼저 소개할 것은 open() 메소드입니다. 3가지 매개변수를 받습니다:

• 보낼 요청 유형(POST, GET 등)

• 요청의 URL

• 요청을 비동기적으로 보낼지 여부를 나타내는 부울 값

open 호출의 예 ():

xhr.open("get", "index.jsp", false)

index.jsp에 대한 요청을 받으세요. URL은 코드가 실행 중인 현재 페이지를 기준으로 합니다. open() 메서드를 호출하면 실제로 요청이 전송되지 않고 전송될 요청이 시작될 뿐입니다.

요청을 보내려면 send()를 호출하세요.

xhr.send(null);

send()는 요청 본문으로 보낼 데이터인 매개변수를 받습니다. 요청 본문을 통해 데이터를 보낼 필요가 없으면 null을 전달해야 합니다.

해당 데이터는 XHR 개체의 관련 속성에 채워집니다.

•responseText: 응답 본문으로 반환되는 텍스트

•responseXML: 응답의 콘텐츠 유형은 "text/xml" 또는 "application/ xml"

• status: 응답의 HTTP 상태

•statusText: HTTP 상태에 대한 설명

응답을 받은 후 먼저 status 속성을 확인하여 응답이 반환되었는지 확인합니다. 일반적으로 200을 사용합니다. 성공의 신호. 상태 코드 304는 리소스가 수정되지 않았으며 브라우저에 캐시된 버전을 직접 사용할 수 있음을 나타냅니다.

적절한 응답을 받으려면 두 가지 상태 코드가 다음과 같이 감지되어야 합니다.

xhr.open("get", "index.jsp", false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}

readyState 속성을 감지하면 요청/응답 프로세스의 현재 활성 단계를 확인할 수 있습니다.

•0: 초기화되지 않았습니다. open() 메소드가 호출되지 않았습니다

•1: 시작합니다. open() 메소드가 호출되었지만 send() 메소드가 호출되지 않았습니다

•2: Send. send() 메소드가 호출되었지만 응답이 수신되지 않았습니다

•3: 수신되었습니다. 일부 데이터가 수신되었습니다

•4: 완료되었습니다. 모든 데이터가 수신되었으며

클라이언트에서 사용할 수 있습니다. ReadyState 속성 값이 변경될 때마다 ReadyStatechange 이벤트가 트리거됩니다. open()을 호출하기 전에 onreadystatechange 이벤트 핸들러 프로그램을 지정하면 브라우저 호환성을 보장할 수 있습니다.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("请求成功：" + xhr.status);
}
}
};
xhr.open("get", "index.jsp", true);
xhr.send(null);

응답을 받기 전에 비동기 요청을 취소할 수 있습니다. xhr.abort();

HTTP 헤더 정보

XHR 개체는 요청 헤더 및 응답 헤더 정보를 조작하는 방법을 제공합니다.

기본적으로 XHR 요청을 보낼 때 다음 헤더 정보도 함께 전송됩니다.

•Accept: 브라우저가 처리할 수 있는 콘텐츠 유형

•Accept-Charset: 브라우저가 표시할 수 있는 문자 집합

•Accept-Encoding: 브라우저가 처리할 수 있는 압축 인코딩

•Accept-Language: 브라우저의 현재 설정된 언어

•연결: 브라우저와 서버 간의 연결 유형

•쿠키: 현재 페이지에 설정된 모든 쿠키

•호스트: 요청하는 페이지가 위치한 도메인

• Referer: 요청이 이루어진 페이지 URL

•User-Aent: 브라우저의 사용자 에이전트 문자열

使用setRequestHeader()可以设置自定义的请求头部信息。必须在调用open()方法之后，且在调用send()之前，调用

setRequestHeader()：

xhr.open("get", "index.jsp", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);

调用getResponseHeader()并传入字段名称，可以取得相应的响应头部信息。getAllResponseHeader()取得包含所有头部信息的长字符串。

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeader();

GET请求

GET用于向服务器查询某些信息。可以将查询字符串参数追加到URL的末尾，查询字符串中的每个参数的名称和值都必须使用encodeURIComponent()编码：

xhr.open("get", "login.jsp?name1=value1&name2=value2", false); 
addURLParam()接收三个参数：要添加参数的URL、参数的名称和参数的值。
var url = "login.jsp";
// 添加参数
url = addURLParam(url, "username", "xxyh");
url = addURLParam(url, "password", "xxyh123");
// 初始化请求
xhr.open("get", url, false);

POST请求

POST请求用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据，而且格式不限。

初始化请求：

xhr.open("post", "login.jsp", true); 
首先将Content-Type头部信息设置为application/x-www-form-urlencoded,然后建立一个字符串格式。如果需要将页面中的表单数据进行序列化，然后再通过XHR发送到服务器，可以使用serialize()函数来创建这个字符串：
xhr.open("get", "login.jsp", false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery+AJAX实现调用后台步骤详解

JQuery调用Ajax加载图片

위 내용은 JS의 Ajax 활용 스킬 상세 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!