ajax et jsonp peuvent communiquer avec l'arrière-plan pour obtenir des données et des informations, mais n'ont pas besoin d'actualiser la page entière pour obtenir une actualisation partielle de la page. Cet article vous amènera à apprendre à utiliser Ajax et jsonp, nous avons donc fait un résumé de la façon d'utiliser Ajax et jsonp pour partager avec vous. Les amis qui en ont besoin peuvent s'y référer. Nous espérons que cela pourra aider tout le monde.
1. ajax
•Définition : Une technologie qui envoie des requêtes http pour une communication asynchrone avec l'arrière-plan.
•Principe : Instanciez l'objet xmlhttp et utilisez cet objet pour communiquer avec l'arrière-plan.
Politique de même origine d'Ajax :
•Les pages ou ressources demandées par Ajax ne peuvent être que des ressources du même domaine, et non des ressources d'autres domaines. Ceci est basé sur la sécurité lors de la conception d'Ajax. .
------------------------------------------------------ ------ ------------------------------------
méthode ajax :
1. $.ajax({}):
•Paramètres communs : •url : demande d'adresse réseau
•type : méthode de demande, la valeur par défaut est 'GET', généralement utilisé 'POST'
•dataType : définir le format des données renvoyées, utilisez généralement json, ou html et jsonp ;
•data : définir les données envoyées au serveur
•.done() : définir le rappel fonction une fois la demande réussie
•.fail() : définit la fonction de rappel après l'échec de la demande
•async : définit si elle est asynchrone, la valeur par défaut est "true", ce qui signifie asynchrone
•Utilisation du code :
$(function () {
$("input").click(function () {
$.ajax({
url: "./data.json",
type: "get",
dataType: "json",
});
.done(function(data) {//请求成功的回调函数
$("input").val(dat.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});
});
})
......
<body>
<p>
<input type="button" value="xinzhi">
</p>
</body>Copier après la connexion
Remarque : les données représentent les données renvoyées par l'arrière-plan ; l'utilisation d'ajax doit dépendre de l'environnement du serveur.
2. $.get() :
•La méthode $.get() utilise la requête GET pour charger des données depuis le serveur ; c'est également une méthode ajax pour demander des données sans rafraîchissant.
•Paramètres :
•url : L'URL visitée, qui doit suivre la politique de même origine
•data : Les données envoyées au serveur ;
•function(data,status){} : demander à la fonction de s'exécuter avec succès
•dataType : le type de données de la réponse à la demande.
//参考代码：
$(function () {
$("input").click(function () {
$.get(
"./data.json",
function (data,status) {
console.log(data.name);
},
"json"
);
});
})
......
<body>
<p>
<input type="button" value="xinzhi">
</p>
</body>Copier après la connexion
•Les paramètres de la méthode $.get() sont différents de $.ajax(). L'URL est un paramètre obligatoire et les trois autres sont facultatifs.
•Les données sont les données renvoyées, le statut indique l'état de la demande, incluant généralement ""succès", "erreur", "délai d'attente", etc.
•Si le type de données est jsonp, vous pouvez également demander des données dans tous les domaines .
•Aucune fonction de rappel en cas d'échec de la demande
3. $.post()
•La méthode $.get() utilise la requête POST pour charger les données du serveur ;
• La méthode utilisée est exactement la même que la méthode $.get()
4 $.load() :
•Charger les données depuis le serveur, aucun type de données n'est nécessaire. être spécifié, les données renvoyées seront automatiquement renvoyées.
•Paramètres :
•URL :
•données : paramètres de requête,
•fonction( réponse, statut, xhr) : demande réussie La fonction de rappel
$(function () {
$("input").click(function () {
$(".box").load(
"./data.json",
function (response,status) {
console.log(data.name);
}
);
});
})
......
<body>
<p>
<input type="button" value="xinzhi">
<p class="box"></p>
</p>
</body>Copier après la connexion
•Les données renvoyées seront placées dans p ;
•Les données ne sont pas accessibles dans tous les domaines
•la réponse est ; les données et le statut renvoyés sont le statut de la demande ;
•Aucune fonction de rappel en cas d'échec de la demande
4. getJSON()
•La méthode utilise la requête AJAX HTTP GET pour obtenir JSON. data.
•Paramètres :
•url. : URL de la requête, paramètres requis ;
•data : données envoyées au serveur ;
•function(data, status, xhr) : fonction de rappel en cas de succès ; request
$(function () {
$("input").click(function () {
$.getJSON(
"./data.json",
function(data,status) {
console.log(data.name);
},
);
});
})
......
<body>
<p>
<input type="button" value="xinzhi">
</p>
</body>Copier après la connexion
•Méthode directe Ce qui est obtenu, ce sont des données json
•Aucune fonction de rappel qui renvoie un échec
•La fonction de rappel est une fonction nommée, pas ; une fonction anonyme ;
5. getScript()
•La méthode utilise la requête AJAX HTTP GET pour obtenir et exécuter le code js
•Paramètres :
• url : URL de la demande, paramètres requis ;
• function(data, status) : fonction de rappel pour une demande réussie
$(function () {
$("input").click(function () {
$.getScript(
"./data.js",
function(data,status) {
console.log(data);
},
);
});
})
......
<body>
<p>
<input type="button" value="xinzhi">
</p>
</body>Copier après la connexion
•Les données du résultat renvoyé sont du code js
•Cette méthode peut être utilisée pour charger dynamiquement du code js
<.>2 jsonp
•Définition : Un format de communication de données qui peut envoyer des requêtes http entre domaines et peut être intégré dans ajax.
•Principe : utilisez des balises de script pour lier les ressources entre les domaines. Fonctionnalités
Utilisation 1 : passage des paramètres de fonction
Explication : définissez un fichier data.js en externe et le. le chemin de ce fichier peut ne pas être dans le même domaine que la page actuelle
<script type="text/javascript">
function aa(data){
console.log(data.name);
}
</script>
<script type="text/javascript" src="....../data.js"></script>Copier après la connexion
Contenu de data.js :
• Passer les données sous forme de paramètres de. la fonction définie sur la page pour obtenir les données.
aa({
"data":{
"name":"xiaohong",
"age":"18"
}
})Copier après la connexion
•Essentiellement, les données peuvent être divisées afin qu'elles ne soient pas forcées d'être enregistrées sous le même nom de domaine.
Utilisation 2 : Utilisation d'ajax
•Le contenu de data.js est le même que ci-dessus.
$.ajax({
url:'...../data.js',//可以不是本地域名
type:'get',
dataType:'jsonp', //jsonp格式访问
jsonpCallback:'aa' //获取数据的函数
})
.done(function(data){
console.log(data.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});Copier après la connexion
•La méthode d'utilisation d'ajax est essentiellement une balise de script qui peut relier des ressources entre domaines, mais jquery encapsule la même méthode et se ressemble.
•Le processus d'exécution du code ci-dessus est le suivant : ajax accède au fichier data.js sur plusieurs domaines via la technologie jsonp et exécute la méthode .done en trouvant la méthode aa() et en transmettant ses paramètres aux données. paramètre de la méthode .done.
•À l'heure actuelle, cette méthode a encore ses limites, c'est-à-dire que vous devez connaître le nom du fichier data.js et la méthode définie aa. Si vous ne connaissez que le nom de domaine, une autre méthode est nécessaire.
Utilisation 3
• Vérifiez le paquet de données renvoyé par le serveur à chaque fois que vous saisissez un mot-clé via le navigateur, recherchez l'adresse de l'en-tête dans le fichier js et le fichier associé données de soumission et constatez que la clé est le mot-clé. Par conséquent, les données peuvent être envoyées au serveur.
var $input = $("input");
$input.keyup(function () {
$.ajax({
url:'https://sug.so.360.cn/suggest?',//请求360搜索的联想数据
type:'get',
dataType:'jsonp', //jsonp格式访问
data: {word: $input.val()},
})
.done(function(data){
console.log(data);
})
.fail(function() {
alert('服务器超时，请重试！');
});
})
....
<body>
<input type="text">
</body>Copier après la connexion
•Les données renvoyées par le serveur seront automatiquement transmises aux données de paramètre de la fonction anonyme du rappel.
Recommandations associées :
Comment JS natif implémente AJAX et JSONP
La différence et l'utilisation de json et jsonp
L'utilisation d'ajax et jsonp en javascript Explication détaillée du code astucieux
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
