Ajax およびクロスドメインの問題の詳細な分析_AJAX 関連
この記事では主に Ajax とクロスドメインの問題を詳しく紹介し、Ajax とは何か、クロスドメインとは何なのかを説明します。興味のある方は参考にしてください
ajaxとは
Ajax（非同期JavaScriptとXML）は、ページを更新せずにサーバーに追加のデータを要求できる技術、の登場です。 Ajax の核となるのは XMLHttpRequest (XHR) オブジェクトであり、XHR オブジェクトを使用して新しいデータを取得したり、新しいデータを挿入したりすることができます。名前には XML が含まれていますが、Ajax 通信はデータ形式とは関係ありません。このテクノロジは更新せずにサーバーからデータを取得できますが、XML データである必要はありません。 json.
XMLHttpRequestオブジェクト
POSTリクエストの使用法
リクエストヘッダーを設定する必要がありますxhr.setRequestHeader() POSTリクエストヘッダーContent-Type値: application/x-www-form-urlencoded3) . リクエストボディの xhr.send() get リクエストを null に渡すように設定し、状況に応じてポストします まず、レスポンスステータスコード
と非同期オブジェクトが解析されたかどうかを確認します
サーバーから返されたステータスコードステータス
1xx: メッセージ2xx: 成功3xx: リダイレクト
4xx: リクエストエラー
5xx: サーバーエラー
非同期オブジェクトのステータスコードreadystate0:非同期オブジェクトが作成されました
1: 非同期オブジェクトの初期化が完了し、リクエストを送信します
3: データが解析中です、解析には時間がかかります
4: データの解析が完了し、データを使用できます
XML
XMLの特徴 W3Cによって策定された名門のXMLは、MicrosoftとIBMによって強く推奨されているデータ形式です。はデータを送信および保存するように設計されており、HTML はページを表すように設計されています
特殊記号: <> ; など エンティティ転送文字を使用する
XML 解析にはフロントエンドとバックエンドの連携が必要です。
1. バックエンドが戻ったら、応答ヘッダーの Content-Type 値を application/xml に設定します。
2. フロントエンドの非同期オブジェクトがバックエンドを受け取ります。データを受信するときは、xml、xhr.responseXML の形式で受信することを忘れないでください。データは
を返します。その内容は #document
JSON
JSON (JavaScript Object Notation) であり、グラスルーツは、JSON のサブセットであり、特にデータ形式を記述する役割を果たします。JSON 自体は、js オブジェクトに変換できる特別な形式の文字列であり、インターネット上でデータを送信するために最も広く使用されているデータ形式です。
文法規則:
データはキーと値のペアで表されます。中括弧はオブジェクトを保存し、角括弧は配列を保存します。名前と値は両方とも二重引用符で囲む必要があります。 js とは少し異なります)。
js で JSON を解析/操作します:
2.JSON.stringify(js object) ; js オブジェクトを json 形式の String に変換します
自分で ajax をカプセル化しますjQuery での ajax の使用API jQuery ajax
jQuery は、より便利な ajax パッケージを提供します。 .$.ajax( {}) 設定可能な方法で Ajax リクエストを開始できます$.get() get 方法で Ajax リクエストを開始します$.post() Post 方法で Ajax リクエストを開始します
$ ('form').serialize() フォームをシリアル化します (形式 key=val$key=val)
パラメータの説明
url: インターフェースアドレス
timeout: 数値が必要です型パラメーター、リクエストのタイムアウト (ミリ秒) を設定します
dataType : サーバーに処理方法を指示するためにクライアントからサーバーに渡される値である必要があります:
beforeSend: パラメーターは関数である必要がありますカスタム HTTP ヘッダーの追加など、リクエストを送信する前に XMLHttpRequest オブジェクトの機能を変更できます。 beforeSend で false が返された場合、この ajax リクエストはキャンセルできます。 success: 成功した応答後に呼び出されます。 error: エラー応答時に呼び出されます。
complete: 応答が完了したときに呼び出されます (成功と失敗を含む)。function pinjieData(obj) {
//obj 就相当于 {key:value,key:value}
//最终拼接成键值对的字符串 "key:value,key:value"
var finalData = "";
for(key in obj){
finalData+=key+"="+obj[key]+"&"; //key:value,key:value&
}
return finalData.slice(0,-1);//key:value,key:value
}
function ajax(obj) {
var url = obj.url;
var method = obj.method.toLowerCase();
var success = obj.success;
var finalData = pinjieData(obj.data);
//finalData最终的效果key:value,key:value
//1.创建xhr对象
var xhr = new XMLHttpRequest();
//get方法拼接地址,xhr.send(null)
if (method=='get'){
url = url + "?"+finalData;
finalData = null;
}
//2.设置请求行
xhr.open(method,url);
// 如果是post请求,要设置请求头
if (method=='post'){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
}
//3.发送
xhr.send(finalData);
//4.监听服务器返回的数据
xhr.onreadystatechange = function () {
if (xhr.status==200 && xhr.readyState==4){
var result = null;
//获取返回的数据类型
var rType = xhr.getResponseHeader("Content-Type");
if (rType.indexOf('xml')!=-1){
result = xhr.responseXML;
}else if(rType.indexOf('json')!=-1){
// JSON.parse 的意思是 将 json格式的字符串
//比如 [{ "src":"./images/nav0.png","content":"商品分类1"}]
//转成js对象
result = JSON.parse(xhr.responseText);
}else{//当成普通的字符串去处理
result = xhr.responseText;
}
//将这里解析好的数据交给页面去渲染
success(result);
}
}
}
クロスドメイン
CORS クロスドメイン
CORS(cross-origin resource sharing,跨域源资源共享)定义了在跨域时,浏览器和服务器应该如何沟通.CORS允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
CORS支持所有类型的HTTP请求.
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。
JSONP
JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据.
JSONP通过动态
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7640
15
1391
52
90
11
32
150
Oracle エラー 3114 の詳細な説明: 迅速に解決する方法
Mar 08, 2024 pm 02:42 PM
Oracle エラー 3114 の詳細な説明: 迅速に解決する方法、具体的なコード例が必要です Oracle データベースの開発および管理中に、さまざまなエラーが頻繁に発生しますが、その中でもエラー 3114 は比較的一般的な問題です。エラー 3114 は通常、データベース接続に問題があることを示します。これは、ネットワーク障害、データベース サービスの停止、または不適切な接続文字列設定が原因である可能性があります。この記事では、エラー 3114 の原因とこの問題を迅速に解決する方法を詳しく説明し、特定のコードを添付します
解析ワームホール NTT: あらゆるトークンのオープン フレームワーク
Mar 05, 2024 pm 12:46 PM
Wormhole は、ブロックチェーンの相互運用性のリーダーであり、所有権、制御、許可のないイノベーションを優先する、回復力があり、将来性のある分散システムの作成に重点を置いています。このビジョンの基盤は、技術的専門知識、倫理原則、コミュニティの連携への取り組みであり、シンプルさ、明確さ、そして幅広いマルチチェーン ソリューションで相互運用性の状況を再定義します。ゼロ知識証明、スケーリング ソリューション、機能豊富なトークン標準の台頭により、ブロックチェーンはより強力になり、相互運用性の重要性がますます高まっています。この革新的なアプリケーション環境では、新しいガバナンス システムと実用的な機能が、ネットワーク全体の資産に前例のない機会をもたらします。プロトコル構築者は現在、この新たなマルチチェーンでどのように運用するかに取り組んでいます。
PHP と Ajax: オートコンプリート提案エンジンの構築
Jun 02, 2024 pm 08:39 PM
PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。 サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアント スクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。
PHPにおけるmidpointの意味と使い方の分析
Mar 27, 2024 pm 08:57 PM
【PHPにおけるミッドポイントの意味と使い方の分析】 PHPでは、ミッドポイント(.)は2つの文字列やオブジェクトのプロパティやメソッドを接続するためによく使われる演算子です。この記事では、PHP における中間点の意味と使用法を詳しく掘り下げ、具体的なコード例を示して説明します。 1. 文字列中間点演算子の接続 PHP での最も一般的な使用法は、2 つの文字列を接続することです。 2 つの文字列の間に . を置くと、それらをつなぎ合わせて新しい文字列を形成できます。 $string1=&qu
jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか?
Feb 23, 2024 pm 04:27 PM
jQueryAJAX エラー 403 の問題を解決するにはどうすればよいですか? Web アプリケーションを開発する場合、非同期リクエストを送信するために jQuery がよく使用されます。ただし、jQueryAJAX の使用時に、サーバーによってアクセスが禁止されていることを示すエラー コード 403 が発生する場合があります。これは通常、サーバー側のセキュリティ設定が原因ですが、回避する方法があります。この記事では、jQueryAJAX エラー 403 の問題を解決する方法と具体的なコード例を紹介します。 1.作る
Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか?
Mar 09, 2024 pm 05:36 PM
Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。
Win11の新機能分析：Microsoftアカウントへのログインをスキップする方法
Mar 27, 2024 pm 05:24 PM
Win11 の新機能の分析: Microsoft アカウントへのログインをスキップする方法 Windows 11 のリリースにより、多くのユーザーは、Windows 11 がより便利で新しい機能をもたらしたことに気づきました。ただし、ユーザーによっては、自分のシステムが Microsoft アカウントに関連付けられることを好まず、この手順をスキップしたい場合があります。この記事では、ユーザーが Windows 11 で Microsoft アカウントへのログインをスキップし、よりプライベートで自律的なエクスペリエンスを実現するのに役立ついくつかの方法を紹介します。まず、一部のユーザーが Microsoft アカウントにログインすることに抵抗がある理由を理解しましょう。一方で、一部のユーザーは次のことを心配しています。
Apache2 は PHP ファイルを正しく解析できません
Mar 08, 2024 am 11:09 AM
スペースの制限のため、以下は簡単な記事です。Apache2 は一般的に使用されている Web サーバー ソフトウェアであり、PHP は広く使用されているサーバー側スクリプト言語です。 Web サイトを構築する過程で、Apache2 が PHP ファイルを正しく解析できず、PHP コードの実行が失敗するという問題が発生することがあります。この問題は通常、Apache2 が PHP モジュールを正しく構成していないこと、または PHP モジュールが Apache2 のバージョンと互換性がないことが原因で発生します。この問題を解決するには通常 2 つの方法があります。1 つは次のとおりです。
