Ajax および JSON データの対話型ストレージ

今回は、Ajax と JSON データのインタラクティブ ストレージについて説明します。Ajax と JSON データのインタラクティブ ストレージの 注意事項 について、実際のケースを見てみましょう。

データ ストレージは JavaScript の中核機能であり、学習の初期段階では混乱しやすい問題です。ページスライド、スライドショー、フェードイン、フェードアウトなどの目を引くような特殊効果ではありません。データを適切に保存すると、構造が整理され、後でアプリケーションがコンテンツにアクセスしやすくなります。 JavaScript は、基本的なものから将来のトレンドに至るまでの進化モデルである、さまざまなデータ ストレージ メソッドを提供します。

XML は、多くのアプリケーションがデータを保存するために使用する比較的柔軟なデータ形式です。 HTML のような構造で、要素、タグ、属性が含まれており、モデルは同じです。その主な利点の 1 つは、拡張可能な形式であり、特定の事前設定されたデータ構造に制限されないことです。また、DOM 標準にも準拠しており、AJAX 呼び出しを使用して取得されるデータは、対応する HTML の解析と同様です。 DOM メソッドと属性はそれを解析します:

<ingredient>
<prison>
<name>apple</name>
<color>red</color>
</prison>
<prison>
<name>tomato</name>
<color>red</color>
</prison>
<prison>
<name>peach</name>
<color>pink</color>
</prison>
<prison>
<name>pitaya</name>
<color>green</color>
</prison>
</ingredient>

しかし、XML の重大な欠陥は、クロスドメイン Aiax 呼び出しには使用できないことです。つまり、各 Ajax 呼び出しの XML データは、スクリプトと同じドメイン名に存在する必要があります。以内に呼び出しを実行します。そうでない場合、リクエストは失敗します。

HTML ストレージも同様で、Ajax と組み合わせるのが最も簡単です。このデータ形式の方法を使用する際の重要な要素は速度です。HTML コード スニペットはクライアントで解析せずに DOM に直接出力できるため、HTML を解析するために追加の JavaScript コードを記述する必要はありません。

<ul>
<li><a href="boke.js">apple:red</a></li>
<li>tomato:red</li>
<li>peach:pink</li>
<li>piyata:green</li>
</ul>

保存されるデータが HTML コードと混在する可能性があるため、保守性が低下するという欠点について話しましょう。さらに、処理コードを記述するとき、開発者はサーバー側でいくつかの細かい制御措置を講じる必要がある場合があります。

以下はJavaScriptをデータストレージに使用する方法です

変数

JavaScriptは最も基本的なデータストレージメソッドであり、文字列、値、ブール値などを受け入れます。 。中心的な内容はその範囲の問題です。

変数に関連するパフォーマンスの問題:

変数は宣言された後、JavaScript ファイルにキャッシュされるため、スコープ内で繰り返し使用できます。変数を取得するオーバーヘッドは最小限です。使用回数が 1 より大きい場合は、データとして変数に格納する必要があります。

配列

配列は、通常の配列、連想配列、多次元配列と同様に、すべて要素のリストであり、さまざまなデータストレージの非常に柔軟な形式です。配列の最も基本的な形式をマスターすることは、他の複雑な形式を使用する場合にも非常に役立ちます。配列要素へのアクセスは、基本的な対話型コードに共通です。データストレージタイプとしての配列の重要性を考慮して、JavaScript は配列相互作用操作のための多数の専用メソッドを提供します。

.join() メソッドは、配列内の各要素のコネクタとして使用される文字を指定できます。 lice() メソッド 配列内の特定の範囲内の要素を出力できます。shift() メソッドと unshift() メソッドは、それぞれ配列の先頭の要素を削除または追加するために使用されます。配列の最後の要素を返します。 concat() メソッドは、パラメーターの順序に応じて、複数の配列を 1 つの配列に結合するために使用されます。sort() メソッドは、配列の要素をアルファベット順またはカスタムの順序に並べることができます。ただし、最初の文字に基づいてのみ並べ替えられます。一般的にはすべて間違っています。

オブジェクト

データがより複雑で管理が難しくなった場合は、配列をオブジェクトに変換することを選択します。オブジェクトの保存方法がより読みやすくなるからです。

//对象数据存储
var meatball = {
bread:"wang",
meat :"li",
cheese : "zhang"
};
//返回对象的bread 
alert(meatball.bread);

効率に対するオブジェクトの影響

上記のコードにはレイヤーが 1 つしかありませんが、無限にネストできます。オブジェクトはコードをより適切に編成し、モジュール性を向上させることができます。ただし同時に、これら 3 つのうちの 1 つを探す必要があるため、パフォーマンスと保守性のトレードオフを考慮する必要があります。オブジェクト指向プログラミング技術を使用する場合、ネストが 3 レベル以上になるとパフォーマンスの問題が発生しますが、サーバー側で使用する場合はこの限りではないため、フロントエンド開発者はオブジェクト指向プログラミングをいつ使用するかを決定する必要があります。テクノロジー。

JSON

JSON是一种易于同jacascript 集成的数据格式，它通常是在用JavaScript调用外部服务器时使用的。JSON数据存放于独立的文件中，而且通常位于另一台完全不同的服务器上。它现在是最常见的一种调用API服务时所使用的数据格式，人们之所以选中它，是因为此格式非常易于阅读。起初，JSON格式是作为一种XML格式的替代方案而出现的，但很快它就在数据交换领域占据了主流的地位。它是一种轻量级的数据格式，易于通过远程Ajax调用进行跨域名访问。尽管JavaScript对JSON格式的解析提供了原生的支持，但它还是一种独立于平台的格式，客户端与服务器端在数据交换时都可以使用。

由于JSON格式具备跨域名访问的能力，所以为了防止一切恶意行为，我们务必只使用从可信的数据源中获取JSON。

这是一个 Salad.json 数据文件：

//ajax JSON Salad
var ingredient = {
"fruit":[
{
"name" : "apple",
"color" : "green"
},
{
"name" : "tomato",
"color" : "red"
},
{
"name" : "peach",
"color" : "pink"
},
{
"name" : "pitaya",
"color" : "white"
},
{
"name" : "lettuce",
"color" : "green"
}
]
};

JSON最常见的用途就是配合API调用，在于API为基础的网络程序开发环境中，使用何种后端语言进行开发，数据格式都无需改变。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ajax如何读取txt并对其内容进行分页展示

pushState+Ajax实现无刷新的页面切换

以上がAjax および JSON データの対話型ストレージの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。