Ajax を使用した HTTP のスクリプト作成
AJax の主な機能は、スクリプトを使用して、ページのリロードを発生させずに HTTP サーバーと Web サーバー間のデータ交換を操作することです。
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() メソッドを呼び出すことです。 3 つのパラメータを受け取ります:
- 送信するリクエストのタイプ (大文字と小文字は区別されません)
- リクエストの URL (ここではドキュメントに対する相対 URL (絶対 URL が指定されている場合)、プロトコル、ホスト、およびポートは、それが配置されているドキュメントと一致する必要があります。 対応するコンテンツ: クロスドメイン リクエストは、通常、エラーを報告します
- リクエストヘッダーが複数回呼び出された場合、上書きは発生しません
- リクエストにパスワードで保護されたURLが必要な場合は、open()の4番目と5番目のパラメータとしてユーザー名とパスワードを渡します
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);

名前 | |
---|---|
Accept | |
Accept-Encoding | |
Accept-Language | |
接続 | |
ホスト | |
Cookie | |
リファラー | |
-エージェント |
可以自定义请求头部
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 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









タイトル: jQuery AJAX リクエストの 403 エラーを解決する方法とコード例。403 エラーは、サーバーがリソースへのアクセスを禁止するリクエストを指します。このエラーは通常、リクエストにアクセス許可がないか、サーバーによって拒否されたために発生します。 jQueryAJAX リクエストを行うときにこのような状況に遭遇することがありますが、この記事ではこの問題の解決方法とコード例を紹介します。解決策: 権限を確認します。まず、要求された URL アドレスが正しいことを確認し、リソースにアクセスするための十分な権限があることを確認します。

jQuery は、クライアント側の開発を簡素化するために使用される人気のある JavaScript ライブラリです。 AJAX は、Web ページ全体をリロードせずに、非同期リクエストを送信し、サーバーと対話するテクノロジーです。ただし、jQuery を使用して AJAX リクエストを行うと、403 エラーが発生することがあります。 403 エラーは通常、セキュリティ ポリシーまたは権限の問題が原因で、サーバーによってアクセスが拒否されたエラーです。この記事では、jQueryAJAX リクエストで 403 エラーが発生した場合の解決方法について説明します。

HTTP 301 ステータス コードの意味を理解する: Web ページ リダイレクトの一般的なアプリケーション シナリオ インターネットの急速な発展に伴い、Web ページの操作に対する人々の要求はますます高くなっています。 Web デザインの分野では、Web ページのリダイレクトは一般的かつ重要なテクノロジであり、HTTP 301 ステータス コードによって実装されます。この記事では、HTTP 301 ステータス コードの意味と、Web ページ リダイレクトにおける一般的なアプリケーション シナリオについて説明します。 HTTP301 ステータス コードは、永続的なリダイレクト (PermanentRedirect) を指します。サーバーがクライアントのメッセージを受信すると、

jQueryAJAX エラー 403 の問題を解決するにはどうすればよいですか? Web アプリケーションを開発する場合、非同期リクエストを送信するために jQuery がよく使用されます。ただし、jQueryAJAX の使用時に、サーバーによってアクセスが禁止されていることを示すエラー コード 403 が発生する場合があります。これは通常、サーバー側のセキュリティ設定が原因ですが、回避する方法があります。この記事では、jQueryAJAX エラー 403 の問題を解決する方法と具体的なコード例を紹介します。 1.作る

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、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 プラットフォームは、ユーザーの視聴履歴、いいねやコメントの行動、共有記録、その他のデータを分析し、膨大な動画ライブラリからユーザーの好みに最適な動画を選択して推奨します。このパーソナライズされたレコメンデーション システムは、ユーザー エクスペリエンスを向上させるだけでなく、ユーザーが自分の好みに合ったビデオ コンテンツをより多く発見できるようにすることで、ユーザーの定着率と維持率を向上させます。この時点で
