Ajax 시리즈의 XHR 객체 이해
이전 단어
1999년 Microsoft는 IE5를 출시했습니다. IE5에는 처음으로 자바스크립트 스크립트가 서버에 대한 HTTP 요청을 시작할 수 있도록 허용하는 새로운 기능이 도입되었습니다. 이 기능은 당시에는 주목을 받지 못했습니다. 2004년 Gmail과 2005년 Google 지도가 출시된 후에야 널리 주목을 받았습니다. 2005년 2월에 ajax라는 용어가 처음으로 공식적으로 제안되었으며, 이는 이 기능에 대한 일련의 개발 관행을 나타냅니다. 그 이후로 ajax는 스크립트 시작 HTTP 통신의 대명사가 되었으며 W3C도 2006년에 국제 표준을 발표했습니다. 이 기사는 ajax 시리즈의 첫 번째 기사입니다 - 개요는 더 나은 사용자 경험을 가져올 것입니다. 이름에는 XML이 포함되어 있지만 Ajax 통신은 데이터 형식과 관련이 없습니다.
Ajax에는 다음 단계가 포함됩니다. 1. AJAX 객체 생성 2. HTTP 요청 발행 3. 서버에서 반환된 데이터 수신; 페이지 데이터
요약 한 문장으로 말하면 ajax는 네이티브
객체를 통해 HTTP 요청을 보내고, 서버에서 반환된 데이터를 받은 후 이를 처리합니다.XMLHttpRequest
Creation
Ajax 기술의 핵심은 XMLHttpRequest 객체입니다( 줄여서 XHR), Microsoft에서 처음 개발한 기능으로 나중에 다른 브라우저 제공업체에서도 동일한 구현을 제공했다는 특징이 있습니다. XHR은 서버에 요청을 보내고 서버 응답을 구문 분석하기 위한 원활한 인터페이스를 제공합니다. 서버에서 비동기적으로 더 많은 정보를 얻을 수 있습니다. 즉, 사용자가 클릭한 후 페이지를 새로 고치지 않고도 새 데이터를 얻을 수 있습니다
IE5는 최초입니다. XHR 객체를 소개하는 브라우저. IE5에서 XHR 개체는 MSXML 라이브러리의 ActiveX 개체를 통해 구현되는 반면 IE7+ 및 기타 표준 브라우저는 기본 XHR 개체를 지원합니다
XHR 개체를 생성하는 것은 XMLHTTPRequest()가 생성자이기 때문에 XHR 개체 인스턴스화라고도 합니다. 다음은 XHR 객체를 작성하는 호환 가능한 방법입니다
요청 보내기
open()XHR 개체를 사용할 때 호출되는 첫 번째 메서드 아래와 같이 open()입니다. 이 메소드는 3개의 매개변수
xhr.open("get","example.php", false);
1을 허용합니다. open() 메소드의 첫 번째 매개변수는 요청을 보내는 방법을 지정하는 데 사용됩니다. 이 문자열은 대소문자를 구분하지 않습니다. 하지만 일반적으로 대문자를 사용합니다. "GET" 및 "POST"가 널리 지원됩니다.
"POST" 방법은 HTML 형식에서 일반적으로 사용됩니다. 요청 본문에 추가 데이터가 포함되며 이 데이터는 종종 서버의 데이터베이스에 저장됩니다. 동일한 URL에 대한 반복적인 POST 요청은 서버로부터 다른 응답을 받을 수 있으므로 이 방법을 사용하는 요청은 캐시되어서는 안 됩니다.
"GET" 및 "POST" 외에도 매개변수는 "HEAD", "OPTIONS", "놓다" ". 보안상의 위험으로 인해 "CONNECT", "TRACE", "TRACK"은 사용이 금지됩니다
[참고] HTTP 프로토콜에서 일반적으로 사용되는 8가지 방법에 대한 자세한 소개는 여기로 이동합니다
2. open() 메소드 첫 번째 매개변수는 코드가 실행되는 현재 페이지에 상대적인 URL이며, 동일한 포트 및 프로토콜을 사용하는 동일한 도메인의 URL로만 요청을 보낼 수 있습니다. URL과 요청을 시작한 페이지 간에 차이가 있으면 보안 오류가 발생합니다
3. open() 메서드의 세 번째 매개 변수는 채워지지 않은 경우 요청을 비동기적으로 보낼지 여부를 나타내는 Boolean 값입니다. , 기본값은 true이며 요청이 비동기식으로 전송됨을 나타냅니다
4. 비밀번호로 보호된 URL을 요청하는 경우 인증에 사용되는 사용자 이름과 비밀번호를 4번째 및 5번째 매개변수로 open() 메소드
send( )send() 메소드는 요청 본문으로 전송될 데이터인 하나의 매개변수를 받습니다. send() 메소드를 호출한 후 요청은 서버로 전달됩니다. GET 메소드인 경우 send() 메소드에는 매개변수가 없거나 POST 메소드인 경우 매개변수는 null입니다. send() 메소드는 전송될 데이터입니다
xhr.open("get", "example.txt", false); xhr.send(null);
완전한 HTTP 응답은 상태 코드, 응답 헤더 수집 및 응답 본문으로 구성됩니다. 응답을 받은 후 XHR 객체의 속성과 메서드를 통해 사용할 수 있습니다. 주로 다음과 같은 4가지 속성이 있습니다
responseText: 作为响应主体被返回的文本(文本形式)
responseXML: 如果响应的内容类型是'text/xml'或'application/xml',这个属性中将保存着响应数据的XML DOM文档(document形式)
status: HTTP状态码(数字形式)
statusText: HTTP状态说明(文本形式)
로그인 후 복사
responseText: 作为响应主体被返回的文本(文本形式) responseXML: 如果响应的内容类型是'text/xml'或'application/xml',这个属性中将保存着响应数据的XML DOM文档(document形式) status: HTTP状态码(数字形式) statusText: HTTP状态说明(文本形式)
在接收到响应后,第一步是检查status属性,以确定响应已经成功返回。一般来说,可以将HTTP状态码为200作为成功的标志。此时,responseText属性的内容已经就绪,而且在内容类型正确的情况下,responseXML也可以访问了。此外,状态码为304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本;当然,也意味着响应是有效的
无论内容类型是什么,响应主体的内容都会保存到responseText属性中,而对于非XML数据而言,responseXML属性的值将为null
if((xhr.status >=200 && xhr.status
同步
如果接受的是同步响应,则需要将open()方法的第三个参数设置为false,那么send()方法将阻塞直到请求完成。一旦send()返回,仅需要检查XHR对象的status和responseText属性即可
同步请求是吸引人的,但应该避免使用它们。客户端javascript是单线程的,当send()方法阻塞时,它通常会导致整个浏览器UI冻结。如果连接的服务器响应慢,那么用户的浏览器将冻结
<button>获取信息</button> <div></div> <script> btn.onclick = function(){ //创建xhr对象 var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //发送请求 xhr.open('get','/uploads/rs/26/ddzmgynp/message.xml',false); xhr.send(); //同步接受响应 if(xhr.readyState == 4){ if(xhr.status == 200){ //实际操作 result.innerHTML += xhr.responseText; } } } </script>
//message.xml <p>hello world</p>
异步
如果需要接收的是异步响应,这就需要检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下:
0(UNSENT):未初始化。尚未调用open()方法 1(OPENED):启动。已经调用open()方法,但尚未调用send()方法 2(HEADERS_RECEIVED):发送。己经调用send()方法,且接收到头信息 3(LOADING):接收。已经接收到部分响应主体信息 4(DONE):完成。已经接收到全部响应数据,而且已经可以在客户端使用了
理论上,只要readyState属性值由一个值变成另一个值,都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常,我们对readyState值为4的阶段感兴趣,因为这时所有数据都已就绪
[注意]必须在调用open()之前指定onreadystatechange 事件处理程序才能确保跨浏览器兼容性,否则将无法接收readyState属性为0和1的情况
xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status == 200){ alert(xhr.responseText); } } }
<button>获取信息</button> <div></div> <script> btn.onclick = function(){ //创建xhr对象 var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //异步接受响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //实际操作 result.innerHTML += xhr.responseText; } } } //发送请求 xhr.open('get','message.xml',true); xhr.send(); } </script>
//message.xml <p>hello world</p>
超时
XHR对象的timeout属性等于一个整数,表示多少毫秒后,如果请求仍然没有得到结果,就会自动终止。该属性默认等于0,表示没有时间限制
如果请求超时,将触发ontimeout事件
[注意]IE8-浏览器不支持该属性
xhr.open('post','test.php',true); xhr.ontimeout = function(){ console.log('The request timed out.'); } xhr.timeout = 1000; xhr.send();
优化
使用AJAX接收数据时,由于网络和数据大小的原因,并不是立刻就可以在页面中显示出来。所以,更好的做法是,在接受数据的过程中,显示一个类似loading的小图片,并且禁用按钮;当数据完全接收后,再隐藏该图片,并启用按钮
<button>获取信息</button> <img src="/static/imghw/default1.png" data-src="data:image/gif;base64,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" class="lazy" alt="Ajax 시리즈의 XHR 객체 이해" > <div></div> <script> var add = (function(){ var counter = 0; return function(){ return ++counter; } })(); btn.onclick = function(){ img.style.display = 'inline-block'; btn.setAttribute('disabled',''); //创建xhr对象 var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //异步接受响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ img.style.display = 'none'; btn.removeAttribute('disabled'); var data = JSON.parse(xhr.responseText); var sum = add() - 1; if(sum < data.length){ result.innerHTML += data[sum]; } } } } //发送请求 xhr.open('get','data.php',true); xhr.send(); } </script>
<?php echo json_encode([1,2,3,4,5]); ?>
드디어
예제 시연을 통해 Ajax 프론트엔드의 내용 자체는 어렵지 않다는 것을 알게 되었습니다. 그러나 Ajax에는 백엔드 및 네트워크 지식이 일부 포함되어 있기 때문에 배우기가 쉽지 않습니다. 앞으로의 블로그 포스팅에서는 ajax의 주요 내용을 차차 심도 있게 소개할 예정입니다
위 내용은 Ajax 시리즈의 XHR 객체 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











제목: jQuery AJAX 요청의 403 오류를 해결하는 방법 및 코드 예제 403 오류는 서버가 리소스에 대한 액세스를 금지하는 요청을 의미합니다. 이 오류는 일반적으로 요청에 권한이 없거나 서버에서 거부되기 때문에 발생합니다. jQueryAJAX 요청을 할 때 가끔 이런 상황이 발생합니다. 이 기사에서는 이 문제를 해결하는 방법을 소개하고 코드 예제를 제공합니다. 해결 방법: 권한 확인: 먼저 요청한 URL 주소가 올바른지 확인하고 리소스에 액세스할 수 있는 충분한 권한이 있는지 확인하십시오.

jQuery는 클라이언트 측 개발을 단순화하는 데 사용되는 인기 있는 JavaScript 라이브러리입니다. AJAX는 전체 웹 페이지를 다시 로드하지 않고 비동기 요청을 보내고 서버와 상호 작용하는 기술입니다. 그러나 jQuery를 사용하여 AJAX 요청을 할 때 가끔 403 오류가 발생합니다. 403 오류는 일반적으로 보안 정책이나 권한 문제로 인해 서버 거부 액세스 오류입니다. 이 기사에서는 403 오류가 발생한 jQueryAJAX 요청을 해결하는 방법에 대해 설명합니다.

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 것은 웹 개발의 일반적인 시나리오입니다. Ajax를 통해 데이터를 새로 고치지 않고도 페이지를 동적으로 얻을 수 있습니다. 이 기사에서는 Ajax를 사용하여 PHP 메소드에서 변수를 가져오는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Ajax 요청을 처리하고 필요한 변수를 반환하기 위해 PHP 파일을 작성해야 합니다. 다음은 간단한 PHP 파일 getData.php에 대한 샘플 코드입니다.

jQueryAJAX 오류 403 문제를 해결하는 방법은 무엇입니까? 웹 애플리케이션을 개발할 때 jQuery는 종종 비동기 요청을 보내는 데 사용됩니다. 그러나 때때로 jQueryAJAX를 사용할 때 서버에서 액세스가 금지되었음을 나타내는 오류 코드 403이 발생할 수 있습니다. 이는 일반적으로 서버 측 보안 설정으로 인해 발생하지만 문제를 해결하는 방법이 있습니다. 이 기사에서는 jQueryAJAX 오류 403 문제를 해결하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 만들다

PHP 및 Ajax를 사용하여 자동 완성 제안 엔진 구축: 서버측 스크립트: Ajax 요청을 처리하고 제안을 반환합니다(autocomplete.php). 클라이언트 스크립트: Ajax 요청을 보내고 제안을 표시합니다(autocomplete.js). 실제 사례: HTML 페이지에 스크립트를 포함하고 검색 입력 요소 식별자를 지정합니다.

Ajax(비동기 JavaScript 및 XML)를 사용하면 페이지를 다시 로드하지 않고도 동적 콘텐츠를 추가할 수 있습니다. PHP와 Ajax를 사용하면 제품 목록을 동적으로 로드할 수 있습니다. HTML은 컨테이너 요소가 있는 페이지를 생성하고 Ajax 요청은 로드한 후 요소에 데이터를 추가합니다. JavaScript는 Ajax를 사용하여 XMLHttpRequest를 통해 서버에 요청을 보내 서버에서 JSON 형식의 제품 데이터를 얻습니다. PHP는 MySQL을 사용하여 데이터베이스에서 제품 데이터를 쿼리하고 이를 JSON 형식으로 인코딩합니다. JavaScript는 JSON 데이터를 구문 분석하여 페이지 컨테이너에 표시합니다. 버튼을 클릭하면 제품 목록을 로드하라는 Ajax 요청이 트리거됩니다.

Ajax 보안을 향상시키기 위해 다음과 같은 여러 가지 방법이 있습니다. CSRF 보호: 토큰을 생성하여 클라이언트에 보내고, 확인 요청 시 서버 측에 추가합니다. XSS 보호: 악성 스크립트 삽입을 방지하려면 htmlspecialchars()를 사용하여 입력을 필터링하세요. Content-Security-Policy 헤더: 악성 리소스 로드를 제한하고 스크립트 및 스타일 시트를 로드할 수 있는 소스를 지정합니다. 서버측 입력 유효성 검사: 공격자가 입력 취약성을 악용하지 못하도록 Ajax 요청에서 수신된 입력의 유효성을 검사합니다. 보안 Ajax 라이브러리 사용: jQuery와 같은 라이브러리에서 제공하는 자동 CSRF 보호 모듈을 활용하세요.

Ajax 기능을 사용하여 비동기식 데이터 상호작용을 구현하는 방법 인터넷과 웹 기술의 발전으로 프런트엔드와 백엔드 간의 데이터 상호작용이 매우 중요해졌습니다. 페이지 새로 고침, 양식 제출 등 기존의 데이터 상호 작용 방법은 더 이상 사용자 요구 사항을 충족할 수 없습니다. Ajax(비동기 JavaScript 및 XML)는 비동기 데이터 상호 작용을 위한 중요한 도구가 되었습니다. Ajax를 사용하면 웹에서 JavaScript와 XMLHttpRequest 객체를 사용할 수 있습니다.
