Maison > Article > interface Web > À propos de l'utilisation d'Ajax et de JSONP
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
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.
Paramètres communs : <.>
$(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>
//参考代码:$(function () { $("input").click(function () { $.get( "./data.json", function (data,status) { console.log(data.name); }, "json" ); }); }) ...... <body> <p> <input type="button" value="xinzhi"> </p></body>
$(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>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
$(function () { $("input").click(function () { $.getJSON( "./data.json", function(data,status) { console.log(data.name); }, ); }); }) ...... <body> <p> <input type="button" value="xinzhi"> </p></body>Aucune fonction de rappel qui renvoie un échec ;
Les données de résultat renvoyées sont 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>
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.
Utilisation 1 : Passage des paramètres de fonction
aa({ "data":{ "name":"xiaohong", "age":"18" } })
将数据以页面定义的函数的参数的形式传递进去,从而获取数据。
本质上可以将数据拆分,使得数据不用强制保存在同一个域名下。
$.ajax({ url:'...../data.js',//可以不是本地域名 type:'get', dataType:'jsonp', //jsonp格式访问 jsonpCallback:'aa' //获取数据的函数}) .done(function(data){ console.log(data.name); }) .fail(function() { alert('服务器超时,请重试!'); });
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>
通过浏览器查看每次输入关键字服务器发送回的数据包,找到js文件中header的地址以及相关的提交数据,发现key为word关键字,因此可以向服务器发送data数据。
服务器返回的数据会自动传给回调的匿名函数的参数data.
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!