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 サイトの他の関連記事を参照してください。