ホームページ >ウェブフロントエンド >jsチュートリアル >Ajax 包括的アプリケーションの包括的な分析
AJAX = 非同期 JavaScript および XML、AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。この記事は、Ajax の包括的なアプリケーションについての包括的な分析を提供するもので、非常に優れており、参考になります。興味のある方はぜひ一緒にご覧ください。AJAX は「Asynchronous Javascript And XML」(非同期 JavaScript および XML) です。 、インタラクティブな Web アプリケーションのための一種の作成 Web 開発テクノロジを指します。
AJAX = 非同期 JavaScript および XML (標準ユニバーサル マークアップ言語のサブセット)。
AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。
AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。
従来の Web ページ (AJAX を使用しない) では、コンテンツを更新する必要がある場合、Web ページ全体をリロードする必要があります。
•「xml」: jQueryで処理できるXMLドキュメントを返します。
•"html": プレーンテキストの HTML 情報を返します。含まれている script タグは、DOM に挿入されると実行されます。
•「script」: プレーンテキストの JavaScript コードを返します。結果は自動的にキャッシュされません。 「キャッシュ」パラメータが設定されていない限り。注: リモート要求 (同じドメインの下ではない) を行う場合、すべての POST 要求は GET 要求に変換されます。 (読み込みにDOMスクリプトタグを使用するため)
•"json": JSONデータを返します。
•「jsonp」:JSONP形式。 「myurl?callback=?」などの JSONP 形式を使用して関数を呼び出すと、jQuery はコールバック関数を実行するために ? を自動的に正しい関数名に置き換えます。
•"text": プレーンテキスト文字列を返します
1. フロントエンドで文字列変数を渡し、バックグラウンドで文字列変数を返します (非 JSON 形式)
ここでは、 Ajax データ転送で出現する中国語の文字化け。文字列が渡される前に、JavaScript 関数のescape() を使用してエンコードされ、返された文字列を unescape() 関数を使用してデコードします。漢字は正常に表示できます。もちろん、バックグラウンドの PHP コードでは、中国語の文字列が文字化けしないようにヘッダー ファイルも追加されます。さまざまなバックエンド コードは、次のように中国語の文字化けの問題を解決します。
PHP:
header('Content-Type:text/html;charset=GB2312');
JavaScript コード:
$(function(){ var my_data="前台变量"; my_data=escape(my_data)+"";//编码,防止汉字乱码 $.ajax({ url: "ajax_php.php", type: "POST", data:{trans_data:my_data}, //dataType: "json", error: function(){ alert('Error loading XML document'); }, success: function(data,status){//如果调用php成功 alert(unescape(data));//解码,显示汉字 } }); });
PHP コード:
header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码 $backValue=$_POST['trans_data']; echo $backValue."+后台返回";
2. フロントデスク複数の一次元配列を渡し、バックグラウンドで文字列変数を返します (非 JSON 形式)
非 JSON 形式では、バックグラウンドで配列を返したい場合は、JSON を使用できます。形式については、この記事の後半で詳しく説明します。 JavaScript コード:
$(function(){ var my_data=new Array(); var my_data1=new Array(); my_data[0]=0; my_data[1]=1; my_data[2]=2; my_data1[0]=10; my_data1[1]=11; my_data1[2]=12; $.ajax({ url: "ajax_php.php", type: "POST", data:{trans_data:my_data,trans_data1:my_data1}, //dataType: "json", error: function(){ alert('Error loading XML document'); }, success: function(data,status){//如果调用php成功 alert(data); } }); });
PHP コード:
//读取第一个数组 $backValue="trans_data:"; $trans=$_POST['trans_data']; foreach($trans as $value) { $backValue=$backValue." ".$value; } //读取第二个数组 $backValue=$backValue." , trans_data1:"; $trans=$_POST['trans_data1']; foreach($trans as $value) { $backValue=$backValue." ".$value; } echo $backValue;
3. フロントエンドで複数の 1 次元配列を渡し、2 次元配列を返します (json 形式)で背景
JavaScript コード:
$(function(){ var my_data=new Array(); var my_data1=new Array(); my_data[0]=0; my_data[1]=1; my_data[2]=2; my_data1[0]=10; my_data1[1]=11; my_data1[2]=12; $.ajax({ url: "ajax_php.php", type: "POST", data:{trans_data:my_data,trans_data1:my_data1}, dataType: "json", error: function(){ alert('Error loading XML document'); }, success: function(data){//如果调用php成功 } alert(back); } }); });
PHP コード:
header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码 $backValue=array(); $backValue[0]=$_POST['trans_data']; $backValue[1]=$_POST['trans_data1']; echo json_encode($backValue);
4. 1 次元配列と 2 次元配列をフロントエンド、リターンバックグラウンドでの二次元配列(json形式)
JavaScriptコード:
$(function(){ var my_data=new Array(); var my_data1=new Array(); var my_data2=new Array(); my_data[0]=0; my_data[1]=1; my_data[2]=2; my_data1[0]=10; my_data1[1]=11; my_data1[2]=12; my_data2[0]=my_data; my_data2[1]=my_data1; $.ajax({ url: "ajax_php.php", type: "POST", data:{trans_data:my_data,trans_data1:my_data1,trans_data2:my_data2}, dataType: "json", error: function(){ alert('Error loading XML document'); }, success: function(data){//如果调用php成功 } alert(back); } }); });
PHPコード:
header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码 $backValue=array(); $backValue=$_POST['trans_data2']; $backValue[2]=$_POST['trans_data']; $backValue[3]=$_POST['trans_data1']; echo json_encode($backValue);
以上が皆さんのためにまとめたものです。将来的には誰にとっても役立つでしょう。
関連記事:
Ajaxクロスドメインリクエストを回避するためにNginxリバースプロキシを使用する方法AJAXクロスドメインリクエストの問題のNginx実装の詳細な分析
$の包括的な分析。 Ajax() メソッドのパラメーター (画像とテキストのチュートリアル)
以上がAjax 包括的アプリケーションの包括的な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。