Maison > interface Web > js tutoriel > le corps du texte

Format de stockage de données JSON pour l'interaction Ajax avec les utilisateurs

韦小宝
Libérer: 2017-12-30 20:05:35
original
1510 Les gens l'ont consulté

Le stockage des données est la fonction principale de JavaScript. Stocker correctement les données nous aidera à organiser la structure et permettra à l'application d'accéder plus facilement au contenu ultérieurement. Cet article vous présente le format de stockage de données JSON pour l'interaction Ajax avec les utilisateurs. Les amis intéressés par Ajax devraient jeter un œil au format de stockage de données JSON pour l'interaction Ajax avec les utilisateurs

Le stockage de données est la fonction principale. de JavaScript. C'est une question 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 avantages est qu'il s'agit d'un format extensible, et 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 comme l'analyse HTML, via le DOM correspondant. les méthodes et les propriétés 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>
Copier après la connexion


Mais un sérieux défaut de XML est qu'il ne peut pas être utilisé sur les noms de domaine appelés Aiax , c'est-à-dire que les données XML de chaque appel Ajax doivent être dans le même nom de domaine que le script exécutant l'appel, sinon la requête é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>
Copier après la connexion


Parlons de ses lacunes. 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.

Voici 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 caractère à utiliser comme connecteur pour chaque élément dans 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 ; est utilisé pour supprimer et renvoyer des éléments dans le 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 personnalisé, mais il sera uniquement basé 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 manière dont les objets sont stockés est plus lisible.


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


L'impact des objets sur l'efficacité

Le code ci-dessus n'a que un calque, mais il peut être imbriqué à 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"
}
]
};
Copier après la connexion


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

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

相关推荐:

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

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

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal