Stockage interactif de données Ajax et JSON

Cette fois, je vais vous présenter le stockage interactif des données Ajax et JSON. Quelles sont les précautions pour le stockage interactif des données Ajax et JSON. Ce qui suit est un cas pratique, jetons un coup d'œil.

Le stockage des données est la fonction principale de JavaScript C'est un problème qui prête facilement à confusion dans les premiers stades de l'apprentissage. Ce n'est pas le genre d'effets spéciaux accrocheurs tels que le glissement de page, le diaporama, les fondus entrants et sortants, etc. Stocker correctement les données nous aide à organiser la structure et permet aux applications d'accéder plus facilement au contenu ultérieurement. JavaScript fournit une variété de méthodes de stockage de données. Il s'agit d'un modèle évolutif allant des tendances de base aux tendances futures :

XML signifie langage de balisage extensible et est un format de données relativement flexible. De nombreuses applications aiment l'utiliser. . Sa structure est comme HTML, et il contient également des éléments, des balises et des attributs. L'un de ses principaux avantages est qu'il s'agit d'un format extensible, que vous n'êtes pas limité à une certaine structure de données prédéfinie et qu'il est également conforme à la norme DOM, et les données obtenues à l'aide des appels AJAX sont similaires à l'analyse HTML, via le correspondant. Les méthodes et attributs DOM l'analysent :

<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>

Mais un défaut sérieux de XML est qu'il ne peut pas être utilisé pour les appels Aiax inter-domaines, ce qui signifie que les données XML de chaque appel Ajax doivent être exécutées. Le script appartient au même nom de domaine, sinon la demande échouera.

Le stockage HTML est également similaire, c'est le plus simple à combiner avec Ajax. Le facteur important dans l'utilisation de cette méthode de formatage de données est la vitesse. L'extrait de code HTML peut être directement généré dans le DOM sans l'analyser sur le client, nous n'avons donc pas besoin d'écrire du code JavaScript supplémentaire pour analyser le HTML.

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

Parlons de ses défauts. Les données qu'il stocke peuvent être mélangées avec du code HTML, ce qui réduit la maintenabilité. De plus, lors de l'écriture du code de traitement, les développeurs peuvent avoir besoin de prendre des mesures de contrôle précises côté serveur.

Ce qui suit est la méthode d'utilisation de JavaScript pour le stockage de données, étape par étape...

Variables

JavaScript est la méthode de stockage de données la plus basique. Elle accepte les chaînes, les valeurs, les booléens, etc. Le contenu principal est la question de sa portée.

Problèmes de performances liés aux variables :

Une fois la variable déclarée, elle sera mise en cache dans le fichier JavaScript, elle se trouve donc dans le portée Elles peuvent être utilisées à plusieurs reprises. Le coût d'obtention des variables est minime. Tant que le nombre de fois que les données sont utilisées est supérieur à 1, elles doivent être stockées dans la variable.

Tableau

Tableau, comme le tableau ordinaire, le tableau associatif et le Tableau multidimensionnel, ce sont toutes des listes d'éléments, ce formulaire est une variété de données stockage Un très flexible. La maîtrise de la forme la plus élémentaire des tableaux sera également très utile à l'utilisation d'autres formes complexes. L’accès aux éléments du tableau est commun au code interactif de base. Compte tenu de l'importance des tableaux en tant que type de stockage de données, JavaScript fournit un grand nombre de méthodes exclusives pour les opérations d'interaction sur les tableaux : La méthode

.join() peut spécifier un certain caractère comme connecteur pour chaque élément de le tableau ; La méthode slice() peut afficher des éléments dans une certaine plage dans le tableau ; les méthodes shift() et unshift() sont utilisées respectivement pour supprimer ou ajouter des éléments en tête du tableau ; pour supprimer et renvoyer des éléments du tableau. Le dernier élément ; la méthode concat() est utilisée pour regrouper plusieurs tableaux en un seul tableau, en fonction de l'ordre des paramètres. La méthode sort() peut organiser les éléments du tableau par ordre alphabétique ; ou un ordre personnalisé, mais il ne sera basé que sur le premier caractère. Le tri est généralement erroné.

Objet

Lorsque les données deviennent plus complexes et difficiles à gérer, je choisirai de convertir le tableau en objet. Parce que la façon dont les objets sont stockés est plus lisible.

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

L'impact des objets sur l'efficacité

Le code ci-dessus n'a qu'une seule couche, mais elle peut être imbriquée à l'infini. Les objets peuvent mieux organiser le code et améliorer la modularité. Dans le même temps, cependant, il y a des compromis en termes de performances et de maintenabilité à prendre en compte, car cela nécessite de rechercher l'un de ces trois. Si une technologie de programmation orientée objet est utilisée et que l'imbrication atteint 3 niveaux ou plus, des problèmes de performances se produiront, mais ce n'est pas le cas lorsqu'elle est utilisée côté serveur, les développeurs front-end doivent donc décider quand ; utiliser la technologie de programmation orientée objet.

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实现无刷新的页面切换

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!