Cet article partage principalement un article sur la façon d'utiliser ajax et jsonp. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l’éditeur et jetons un coup d’œil.
1. ajax
Définition : Une technologie qui envoie des requêtes http pour une communication asynchrone avec l'arrière-plan .
Principe : Instancier l'objet xmlhttp et utiliser cet objet pour communiquer avec l'arrière-plan.
Politique de même origine Ajax :
Les pages ou ressources demandées par Ajax ne peuvent être que des ressources du même domaine, pas d'autres domaines. Ressources, ceci est basé sur des considérations de 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', couramment utilisée 'POST'
- dataType : définissez le format des données renvoyées, généralement en utilisant json, ou html et jsonp
- data : définissez les données envoyées au serveur
.done() : définir la fonction de rappel une fois la demande réussie .fail() : définir la fonction de rappel après l'échec de la demande async : définissez s'il doit être asynchrone. La valeur par défaut est "true", ce qui signifie asynchrone
Utilisation du code : -
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.
$(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
2. $.get() :
La méthode $.get() utilise la requête GET pour charger les données du serveur, c'est également une méthode ajax pour la requête ; données sans méthode de rafraîchissement. Paramètres : url : l'URL visitée doit suivre la politique de même origine -
data : 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(). et les trois autres en option. data sont les données renvoyées, le statut représente 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 sur plusieurs domaines Il n'y a pas de fonction de rappel en cas d'échec de la demande - <. 🎜>3. La méthode $.post()
$.get() utilise la requête POST pour charger les données du serveur
- Le méthode qu'il utilise et $. La méthode get() est exactement la même
- 4 $.load() :
Charger les données. depuis le serveur, pas besoin de préciser le type de données, return Les données seront automatiquement placées dans l'élément
- Paramètres :
URL : adresse ; - données : paramètres de la demande, facultatif ;
- fonction (réponse, statut, xhr) : fonction de rappel pour une demande réussie 🎜. >
- Les données renvoyées seront placées dans p ;
$(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
ne peut pas accéder aux données sur tous les domaines
la réponse correspond aux données renvoyées et le statut correspond au statut de la demande - Il n'y a pas de fonction de rappel en cas d'échec de la demande
- 4. . La méthode getJSON()
- utilise la requête AJAX HTTP GET pour obtenir les données JSON
Paramètres :
-
url : URL de requête, paramètres requis ; données : données envoyées au serveur - fonction (données, statut ; , xhr) : Fonction de rappel pour une demande réussie
- la méthode obtient directement les données json
$(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
Aucune fonction de rappel qui renvoie un échec ;
- La fonction de rappel est une fonction nommée, pas une fonction anonyme
- 5. 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 ;
- fonction (données, statut) : fonction de rappel pour une demande réussie
Cette méthode peut être utilisée pour charger dynamiquement du code js ;
$(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
Principe : La balise script peut être utilisée pour relier des ressources entre domaines.
Utilisation 1 : Passage des paramètres de fonction
- Instructions : Définir un fichier data.js en externe Le chemin de ce fichier peut être dans un domaine différent de celui. page actuelle. Contenu de data.js :
aa({
"data":{ "name":"xiaohong", "age":"18"
}
})
Copier après la connexion
用法二:利用ajax
$.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
data.js的内容和上面一样。
使用ajax的方法本质上也是script标签可以跨域链接资源,不过jquery为其封装了相同的方法,看起来一样。
以上代码的执行过程为:ajax通过jsonp技术跨域访问data.js文件,通过找到aa()方法将其参数传递给.done方法的data参数执行.done方法。
目前这种方式仍然有其局限性,就是必须知道data.js文件的名字和定义的方法aa,如果在仅仅知道域名的情况下,需要另外的方法.
用法三
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
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!