ajaxアプリケーションの実践的な分析

今回は、ajax アプリケーションの実際的な分析について説明します。実際のケースを見てみましょう。 AJAX は「Asynchronous Javascript And XML」(Asynchronous JavaScript and 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 code:

$(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次元配列を渡し、バックグラウンドで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);

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

AjaxToolKit で評価コントロールを使用する方法

Ajax で readyState と status を使用する方法

以上がajaxアプリケーションの実践的な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。