ユーザーとの Ajax インタラクション用の JSON データストレージ形式-jsチュートリアル-php.cn

ユーザーとの Ajax インタラクション用の JSON データストレージ形式

韦小宝

リリース： 2017-12-30 20:05:35

オリジナル

1510 人が閲覧しました

データストレージは JavaScript の中心機能です。データを適切に保存すると、構造が整理され、後でアプリケーションがコンテンツにアクセスしやすくなります。この記事では、Ajax とユーザーの対話のための JSON データストレージ形式を紹介します。Ajax に興味がある人は、Ajax とユーザーの対話のための JSON データストレージ形式を参照してください。これは JavaScript の中心的な機能です。学習の初期段階での紛らわしい質問。ページスライド、スライドショー、フェードイン、フェードアウトなどの目を引くような特殊効果ではありません。データを適切に保存すると、構造が整理され、後でアプリケーションがコンテンツにアクセスしやすくなります。 JavaScript は、基本的なものから将来のトレンドに至るまでの進化モデルである、さまざまなデータ保存方法を提供します。

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

<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为基础的网络程序开发环境中，使用何种后端语言进行开发，数据格式都无需改变。

以上所述是小编给大家介绍的Ajax与用户交互的JSON数据存储格式，希望对大家有所帮助！！

相关推荐：

原生JS写Ajax的请求函数功能的实例分享

全面总结基于jQuery中ajax的相关方法

Ajax应该如何使用

以上がユーザーとの Ajax インタラクション用の JSON データストレージ形式の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。