이번에는 Ajax 사용 원칙에 대한 분석을 가져오겠습니다. Ajax 사용 시 주의 사항은 무엇인가요?
사실 AJAX의 내부 구현은 번거롭지 않습니다. 주로 XMLHttpRequest라는 개체를 사용하며 이 개체는 기존의 모든 브라우저에서 지원됩니다.
전체 AJAX 구현의 기초이며 브라우저가 백그라운드에서 서버와 데이터를 교환하는 데 사용하는 개체라고 할 수 있습니다. 여기에는 AJAX와 부분 페이지 새로 고침 기술이 있습니다!
이 글에서는 주로 Ajax 원리와 코드 캡슐화에 대한 관련 내용을 소개하고 참고 및 학습을 위해 공유합니다. 아래에서는 자세한 소개를 살펴보겠습니다.
샘플 코드
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
// to do...
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();단계:
1. 생성합니다.
XMLHttpRequest 객체 생성을 위한 구문:
var = new XMLHttpRequest();
이전 버전의 Internet Explorer(IE5 및 IE6)는 ActiveX 개체를 사용합니다.
var = new ActiveXObject("Microsoft.XMLHTTP");2. 연결하고 전송하세요.
2.1. open() 함수의 세 가지 매개변수: 요청 방법, 요청 주소, 비동기 요청 여부
2.2. GET 요청 방식은 URL 매개변수를 통해 서버에 데이터를 제출하는 반면, POST는 전송 매개변수로 서버에 데이터를 제출합니다
2.3. POST 요청에서 데이터를 보내기 전에 양식 제출의 콘텐츠 유형을 설정해야 합니다
2.3. 서버에 제출된 매개변수는 encodeURIComponent() 메소드를 통해 인코딩되어야 합니다. 실제로 매개변수 목록 key=value 형식에서는 특수문자 encodeURIComponent() 方法进行编码，实际上在参数列表key=value的形式中，key 和 value 都需要进行编码，因为会包含特殊字符。每次请求的时候都会在参数列表中拼入一个 v=xx 的字符串，这样是为了拒绝缓存，每次都直接请求到服务器上。
3、接收。
3.1、接收到响应后，响应的数据会自动填充XHR对象，相关属性如下
responseText：响应返回的主体内容，为字符串类型；
responseXML：如果响应的内容类型是 "text/xml" 或 "application/xml"，这个属性中将保存着相应的xml 数据，是 XML 对应的 document 类型；
status：响应的HTTP状态码；
statusText：HTTP状态的说明
3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段，这个属性的值如下
0 --> 未初始化，尚未调用open()方法；
1 --> 启动，调用了open()方法，未调用send()方法；
2 --> 发送，已经调用了send()方法，未接收到响应；
3 --> 接收，已经接收到部分响应数据；
4 --> 完成，已经接收到全部响应数据；
只要 readyState 的值变化，就会调用 readystatechange 事件，(其实为了逻辑上通顺，可以把readystatechange放到send之后，因为send时请求服务器，会进行网络通信，需要时间，在send之后指定readystatechange事件处理程序也是可以的，我一般都是这样用，但为了规范和跨浏览器兼容性，还是在open之前进行指定吧)。
3.3、在readystatechange事件中，先判断响应是否接收完成，然后判断服务器是否成功处理请求，xhr.status가 포함됩니다. 요청이 이루어질 때마다 v=xx인 문자열
;
statusText: HTTP 상태 설명
3.2. XHR 객체의 ReadyState 속성은 요청/응답 프로세스의 현재 활성 단계를 나타냅니다. 이 속성의 값은 다음과 같습니다
open() 메서드가 호출되지 않았습니다.
1 --> 시작되었으며 open() 메서드가 호출되었지만 send() 메서드가 호출되지 않았습니다.
2 --> 보내기, send() 메서드가 호출되었지만 응답이 수신되지 않았습니다. 🎜
3 --> 수신, 응답 데이터의 일부가 수신되었습니다.
4 --> 모든 응답 데이터가 수신되었습니다.
ReadyState의 값이 변경되는 한 ReadyStateChange 이벤트가 호출됩니다. (실제로 논리적인 원활함을 위해 ReadyStateChange를 전송 후에 배치할 수 있습니다. 전송 시 서버에 요청하면 네트워크 통신이 발생하여 시간이 걸리기 때문입니다. Readystatechange를 지정하세요. a href= 전송 후 "http://www.php.cn/code/5690.html" target="_blank">이벤트 처리 🎜 프로그램도 가능합니다. 보통 이런 식으로 사용하지만 표준화를 위해. 브라우저 간 호환성은 여전히 열기 전에 지정하세요). 🎜🎜
3.3.readystatechange 이벤트에서는 먼저 응답이 수신되었는지 확인한 다음, 서버가 요청을 성공적으로 처리했는지 확인합니다. 상태 코드는 304입니다. 는 요청이 캐시에서 수신되었음을 나타냅니다. 위의 코드는 각 요청에 임의의 숫자를 추가하므로 캐시에서 값을 가져오지 않으므로 이 상태를 판단할 필요가 없습니다. 🎜🎜
Ajax 캡슐화 방법: 🎜 ajax({
url: "./test.php",
type: "POST",
data: { name: "abc", age: 18 },
dataType: "json",
success: function (response, xml) {
// 执行成功回调
},
fail: function (status) {
// 执行失败回调
}
});
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
// 创建对象
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else {
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText,xhr.responseXML);
} else {
options.fail && options.fail(status);
}
}
}
//连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".",""));
return arr.join("&");
}위 내용은 Ajax 사용 원리 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
