Ajax로 HTTP 스크립팅
AJax의 주요 기능은 스크립트를 사용하여 페이지를 다시 로드하지 않고도 HTTP와 웹 서버 간의 데이터 교환을 조작하는 것입니다.
XMLHttpRequest 사용
모든 최신 브라우저는 XMLHttpRequest 개체를 지원합니다(IE5 및 IE6은 ActiveXObject를 사용합니다).
XMLHttpRequest 개체 만들기
var xmlhttp =new XMLHttpRequest()
var xmlhttp =new XMLHttpRequest()
var xmlhttp =new ActiveXObject("Microsoft.XMLHTTP");
var xmlhttp =new ActiveXObject("Microsoft.XMLHTTP");
예를 들어
function createXML(){ if(typeof XMLHttpRequest != "undefined"){//标准 return new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){//兼容IE5,IE6 if(typeof arguments.callee.activeXString != "string"){ var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len; for (i=0,len=versions.length; i < len; i++) { try{ new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; }catch(ex){ //跳过 } } } return new ActiveXObject(arguments.callee.activeXString); }else{ throw new Error("no XRL object available."); } }var xml = new createXML();
- 객체가 생성된 후 http 요청을 시작하는 다음 단계는 XMLHttpRequest 객체의 open() 메서드를 호출하는 것입니다. 세 가지 매개변수를 받습니다:
- 전송할 요청 유형, 대소문자 구분
- 요청의 URL은 문서와 관련된 URL입니다. 절대 URL이 지정된 경우 프로토콜, 호스트 및 포트가 위치한 문서와 일치해야 합니다. 해당 콘텐츠: 교차 도메인 요청은 일반적으로 오류를 보고합니다.
- 요청 헤더가 여러 번 호출되면 덮어쓰기가 발생하지 않습니다.
- 요청에 비밀번호로 보호된 URL이 필요한 경우 사용자 이름과 비밀번호를 open()의 네 번째 및 다섯 번째 매개변수로 전달합니다
xml.setRequestHeader("Content-Type","text/plain");
xml.send(null);
와 협력해야 합니다.
완전한 HTTP 응답은 상태 코드, 컬렉션으로 구성됩니다. 응답 헤더 및 응답 본문. 이는 XMLHttpRequest 개체의 속성과 메서드를 통해 사용할 수 있습니다.
- status 및 statusText 속성은 HTTP 상태 코드(예: 200 ok)를 숫자와 텍스트 형식으로 반환합니다.
- 응답 헤더를 쿼리하려면 getResponseHeader 및 getAllResponseHeaders()를 사용하세요 - 응답 본문은 responseText 속성에서 텍스트 형식으로, responseXML 속성에서 문서 형식으로 얻을 수 있습니다
- XMLHttpRequest 객체는 일반적으로 비동기식으로 사용됩니다. send 메서드는 요청을 보낸 후 즉시 반환되며 이전에 나열된 응답 메서드와 속성은 응답이 반환될 때까지 유효하지 않습니다. 응답이 준비되었을 때 알림을 받으려면 XMLHttp 객체의 Readystatechange 이벤트를 수신해야 합니다
ReadyState는 HTTP 요청의 상태를 지정하는 정수입니다
예를 들어
var xml = new createXML();xml.open("get","hello-world.html",false);xml.onreadystatechange = function(url,callback){ if(xml.readyState === 4){ if((xml.status >= 200 && xml.status < 300) || xml.status === 304){ console.log(xml.responseText); }else{ console.log("request is not ok" + xml.status); } } }xml.send(null);

Name | |
---|---|
Accept | |
Accept-Encoding | |
Accept-Language | |
Connection | |
Host | |
쿠키 | |
Referer | |
사용자- 에이전트 |
可以自定义请求头部
xml.setRequestHeader("MyHeader","MyValue");
控制台输出
相应,可以使用getAllResponseHeaders进行查询
GET请求
可以将查询字符串参数添加到URL末尾。
function addURLParam(url,name,value){ url += (url.indexOf(?) == -1 ? "?" : "&"); url += encodeURIComponent(name) + "=" +encodeURIComponent(value); return url; }
POST请求
用来向服务器发送应该被保存的数据,将数据作为请求的主体提交,主体可以包含非常多的数据,并且数据格式不限
function submitData(){ var xml = createXML(); xml.onreadystatechange = function(){ if(xml.readyState === 4){ if((xml.status >= 200 && xml.status < 300) || xml.status === 304){ console.log(xml.responseText); }else{ console.log("request is not ok" + xml.status); } } } xml.open("POST","postexample.php",true); xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//原因见表单编码的请求一节 var form = document.getElementById("user-info"); xml.send(serialize(form));//serialize函数用来将页面中的表单数据格式化}
编码请求主体
表单编码的请求
当用户提交表单时,表单中的数据编码到一个字符串中并随请求发送。默认情况下,HTML表单通过POST方法发送给服务器,编码后的表单数据则用作请求主体。对表单数据使用的编码方案:对每个单元素的键值对进行普通的URL编码,使用等号把编码后的名字和值连接起来,并使用&链接键值对,如:
name1=value1&name2=value2
;表单数据编码格式有一个正式的MIME类型:application/x-www-form-urlencoded,当使用POST方法提交表单数据时,必须设置Content-Type请求头为这个值。
举个栗子
function encodeFormData(data){ if(!data) return "";//无数据就返回空串 var pairs = [];//用来保存键值对 for(var name in data){ if(!data.hasOwnProperty(name)) continue;//跳过继承属性 if(typeof data[name] === "function") continue;//跳过方法 var value = data[name].toString(); name = encodeURIComponent(name.replace(/%20/g,"+"))//因为由于历史原因,表单提交的 x-www-form-urlencoded 格式要求空格编码为 + 。但 encodeURIComponent 是遵照后来的标准编码为 %20 的。 value = encodeURIComponent(value.replace(/%20/g,"+")) pairs.push(name + "=" + value); } return paris.join('&')//连接键值对}function getData(url,data,callback){ var request = new XMLHttpRequest() request.open("GET",url+"?"+encodeFormData(data)) request.onreadystatechange = function(){ if(request.readyState === 4 && callback) callback(request) } request.send(null); }function postData(url,data,callback){ var request = new XMLHttpRequest(); request.open("POST",url); request.onreadystatechange = function(){ if(request.readyState === 4 && callback){ callback(request); } } request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); request.send(encodeURIComponent(data)); }
JSON编码的请求
举个栗子
function postJson(url,data,callback){ var request = new XMLHttpRequest(); request.open("POST",url); request.onreadystatechange = function(){ if(request.readyState === 4 && callback){ callback(request); } } request.setRequestHeader("Content-Type","application/json"); request.send(JSON.stringify(data)); }
上传文件
举个栗子
input.addEventListener("change",function(){//添加事件监听 var file = this.file[0]; var xhr = new XMLHttpRequest(); xhr.open("POST",URL); xhr.send(file); },false)
multipart/form-data 请求
当表单同时包含上传文件和其他元素的时候,浏览器必须使用“multipart/form-data”的特殊Content-Type来用POST方法提交表单。XHR2定义了新的FormData API,。
举个栗子
function postData(url,data,callback){ var request = new XMLHttpRequest(); request.open("POST",url); request.onreadystatechange = function(){ if(request.readyState === 4 && callback){ callback(request); } } var form = document.getElementById("user-info"); request.send(new FormData(form)); }
HTTP进度事件
六个基本事件
loadstart:在接收到响应数据的第一个字节时触发
progress:在接收响应期间持续不断地触
error:在请求发生错误时触发
abort:在因为调用abort()方法而终止连接时触发load:在接收到完整的响应数据时触发
loadend:在通信完成或者触发error、abort或load事件后触发
load事件
使用load事件代替onreadystatechange事件,响应完毕后就触发load事件,没有必要再去检查readystate属性。
只要浏览器接收到服务器的响应,无论状态如何,都会触发load事件,所以需要确定status属性值从而确定数据是否可用。
举个栗子
var xml = new createXML();xml.onload = function(event){ if((xml.status >= 200 && xml.status < 300) || xml.status === 304){ var request = document.getElementById("request"); request.innerHTML = xml.responseText; }else{ console.log("request is not ok" + xml.status); } }xml.open("get","hello-world.html",false);xml.send(null);
progress事件
这个时间会在浏览器接受新数据期间周期性的触发。而progress事件处理程序会接收到一个event对象,其中target属性就是XHR对象,还有其他三种属性:lengthConputable表示进度信息是否可用的布尔值,loaded表示已经接收到的字节数,total表示根据Content-Length响应头部确定的预期字节数。
举个栗子
var xml = new createXML();xml.onload = function(event){ if((xml.status >= 200 && xml.status < 300) || xml.status === 304){ var request = document.getElementById("request"); request.innerHTML = xml.responseText; }else{ console.log("request is not ok" + xml.status); } }xml.onprogress = function(event){ var p = document.getElementById("data"); if(event.lengthComputable){ console.log(event.position); p.innerHTML = "Received " + event.loaded + " of " + event.total + " bytes"; } }/*需要注意的是,必须保证调用open之前定义onprogress事件处理程序*/xml.open("get","hello-world.html",true);xml.send(null);
终止请求和请求超时abort()
举个栗子
function timeGetText(url,timeout,callback){ var request = new XMLHttpRequest(); var timedout = false; //判断是否超时 var timer = setTimeout(function(){ timedout = true;//超时 request.abort();//触发终止事件 },timeout);//如果超时,触发一个启动器 request.open("GET",url);//发起请求 request.onreadystatechange = function(){ if(request.readyState !== 4) return;//忽略未完成程序 if(timedout) return;//忽略超时程序 clearTimeout(timer);//取消等待的超时 if(request.status === 200){ callback(request.responseText);//成功 } } request.send(null); }
图像ping
图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。图像Ping有两个主要的缺点,一是只能发送GET请求,二是无法访问服务器的响应文本。
var img = new Image(); img.onload = img.onerror = function(){ console.log("Done!"); }; img.src = "hello-world.html";
借助<script>
发送HTTP请求:JSONP
设置
script
元素也可以作为一种AJAX传输机制,只需要设置其src属性,浏览器就会发送一个HTTP请求以下载src属性指定的URL。使用这种方法进行传输的主要原因是它不受同源策略的影响,因此可以使用他们从其他服务器请求数据,还有一个原因是包含JSON数据的响应体会自动解码。
JSONP是JSON with padding的缩写。和JSON差不多,只不过是被包含在函数调用中的JSON。
JSONP由两部分组成,回调函数和数据。
举个栗子
var bd = document.body;function callbackFunction(result, methodName) { bd.innerText = result; } var script = document.createElement("script"); script.src = "***/jsonp.php?jsoncallback=callbackFunction"; bd.insertBefore(script,bd.firstChild);
但是,不会强制指定客户端必须实现的回调函数,它们使用查询参数的值,允许客户端指定一个函数名,然后使用函数名去响应
举个栗子
function getJSONP(url,callback){ var cbnum = "cb" + getJSONP.counter++; var cbname = "getJSONP." + cbnum; if(url.indexOf("?") === -1){ url += "?jsonp=" + cbname; }else{ url += "&jsonp=" + cbname; } var script = document.createElement("script"); getJSONP[cbname] = function(response){ try{ callback(response); } finally{ delete getJSONP[cbname]; script.parentNode.removeChild(script); } } script.src = url; document.body.appendChild(script); } getJSONP.counter = 0;
Conmet技术(服务器推送)
有两种实现Comet的方式:长轮询和流。
长轮询把传统轮询颠倒了一下,页面发送一个到服务器的请求,然后服务器一直保持连接打开,知道有数据可发送。发送完数据后,浏览器关闭连接,随即又发起一个到服务器的新请求。这个过程在页面打开期间一直不断持续。
第二种流行的Comet方式是HTTP流。流在页面的整个生命周期中只使用一个HTTP连接。具体来说就是浏览器向服务器发送一个请求,然后服务器保持连接打开,然后周期性的向浏览器发送数据。
举个栗子
function createStreamingClient(url, progress/*接收到数据时调用的函数*/, finished/*关闭连接时调用的函数*/) { var xhr = new XMLHttpRequest(), received = 0; xhr.open("get", url, true); xhr.onreadystatechange = function() { var result; if (xhr.readyState == 3) { result = xhr.responseText.substring(received); received += result.length; progress(result); } else if (xhr.readyState == 4) { finished(xhr.responseText); } }; xhr.send(null); return xhr; }var client = createStreamingCilent("streaming.php", function(data) { alert("Received:" + data); }, function(data) { alert("Done!"); });
服务器发送事件
SSE( Server - Sent Events, 服务器发送事件) 是围绕只读Comet交互推出的API或者模式。 SSE API用于创建到服务器的单向连接, 服务器通过这个连接可以发送任意数量的数据。 服务器响应的MIME类型必须是text / event - stream, 而且是浏览器中的Javascript API能解析的格式输出。 SSE支持短轮询, 长轮询和HTTP流, 而且能够在断开连接时自动确定何时重新连接。
SSE API
SSE是为javascript api与其他传递消息的javascript api很相似。 要预定新的事件流, 要创建新的EventSource对象, 并传入一个入口点:
var source = new EventSource("myevents.php");/*必须同源*/
EventSource的实例有一个readyState属性, 值为0表示正连接到服务器, 值为1表示打开了连接, 值为2表示关闭连接。还有三个事件:
open: 在建立连接时触发
message: 在从服务器接收到新事件时触发
error: 在无法建立连接时触发
- 服务器返回的数据以字符串的格式保存在event.data中。 如果想强制立即断开并且不再重新连接, 可以调用close() 方法。
事件流
响应格式为纯文本。
对于多个连续数据,需要使用换行符分割。
在设置了ID之后, EventSource对象会跟踪上一次触发的事件。 如果连接断开, 会向服务器发送一个包含名为Last - Event - ID的特殊HTTP头部请求, 以便服务器知道下次触发那个事件。 在多次连接的事件流中, 这种机制保证了浏览器能够以正确的顺序接收到连接的数据段。
Web Sockets
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
当创建web Sockets之后,会有一个http请求发送到浏览器以发起连接。在取得服务器响应后,建立的连接会从http协议交换为Web Socket协议
由于使用了自定义的协议,未加密的URL是ws://,加密后的URLwss://
好处是能够在客户端和服务器之间发送非常少的数据,而不必担心http那样字节级的开销。
var Socket = new WebSocket(url, [protocol]/*可接受的子协议*/ );//创建对象
事件 | 事件处理程序 | 描述 |
---|---|---|
open | Socket.onopen | 连接建立时触发 |
message | Socket.onmessage | 客户端接收服务端数据时触发 |
error | Socket.onerror | 通信发生错误时触发 |
close | Socket.onclose | 连接关闭时触发 |
参考文档——websocket
AJax的主要特点是使用脚本操纵HTTP和web服务器之间的数据交换,不会导致页面重载。
위 내용은 Ajax로 HTTP 스크립팅의 상세 내용입니다. 자세한 내용은 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 요청을 해결하는 방법에 대해 설명합니다.

HTTP 301 상태 코드의 의미 이해: 웹 페이지 리디렉션의 일반적인 응용 시나리오 인터넷의 급속한 발전으로 인해 사람들은 웹 페이지 상호 작용에 대한 요구 사항이 점점 더 높아지고 있습니다. 웹 디자인 분야에서 웹 페이지 리디렉션은 HTTP 301 상태 코드를 통해 구현되는 일반적이고 중요한 기술입니다. 이 기사에서는 HTTP 301 상태 코드의 의미와 웹 페이지 리디렉션의 일반적인 응용 프로그램 시나리오를 살펴봅니다. HTTP301 상태 코드는 영구 리디렉션(PermanentRedirect)을 나타냅니다. 서버가 클라이언트의 정보를 받을 때

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

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

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

HTTP 요청 시간이 초과되고 서버는 종종 504GatewayTimeout 상태 코드를 반환합니다. 이 상태 코드는 서버가 요청을 실행할 때 요청에 필요한 리소스를 얻지 못하거나 일정 시간이 지난 후에도 요청 처리를 완료하지 못함을 나타냅니다. 5xx 시리즈의 상태 코드로, 서버에 일시적인 문제나 과부하가 발생하여 클라이언트의 요청을 올바르게 처리할 수 없음을 나타냅니다. HTTP 프로토콜에서 다양한 상태 코드는 특정한 의미와 용도를 가지며, 504 상태 코드는 요청 시간 초과 문제를 나타내는 데 사용됩니다. 고객

세계적으로 유명한 단편 비디오 소셜 플랫폼인 Douyin은 고유한 개인화 추천 알고리즘으로 많은 사용자의 호감을 얻었습니다. 이 글에서는 독자들이 이 기능을 더 잘 이해하고 최대한 활용할 수 있도록 Douyin 비디오 추천의 가치와 원칙을 자세히 살펴보겠습니다. 1. Douyin 추천 비디오란 무엇입니까? Douyin 추천 비디오는 지능적인 추천 알고리즘을 사용하여 사용자의 관심사와 행동 습관을 기반으로 개인화된 비디오 콘텐츠를 필터링하고 푸시합니다. Douyin 플랫폼은 사용자의 시청 기록, 좋아요 및 댓글 동작, 공유 기록 및 기타 데이터를 분석하여 거대한 비디오 라이브러리에서 사용자의 취향에 가장 적합한 비디오를 선택하고 추천합니다. 이러한 개인화 추천 시스템은 사용자 경험을 향상시킬 뿐만 아니라, 사용자가 자신의 취향에 맞는 더 많은 영상 콘텐츠를 발견할 수 있도록 하여 사용자 충성도와 유지율을 향상시킵니다. 이것에
