web前端解决跨域问题



1.JSONP
2.JQuery发送AJAX、JSONP请求


1.JSONP

JSONP利用JavaScript的动态性做到不考虑同源策略发送请求。
JSONP一般使用动态创建script标签将其src指向到要发请求的资源地址并附带参数为回调函数的名称的方式,在请求完成后服务端返回以函数名(数据); 的方式进行回调函数达到请求成功的目的。
data.php:


JSONP方式请求data.php

当请求成功时,返回的数据等同于





2.JQuery发送AJAX、JSONP请求

JQuery把发送异步请求封装的很好,很方便使用。
其中有
$.ajax(url,[settings]) load(url,[data],[callback]) $.get(url,[data],[fn],[type]) $.getJSON(url,[data],[fn]) $.getScript(url,[callback]) $.post(url,[data],[fn],[type])``` 只需```$.ajax(url,[settings])```函数就可以发送异步AJAX或者JSONP。发送AJAX请求:```html$.ajax({ type:'get',//请求方式 url:'http://127.0.0.1/configs/ajaxs', //请求资源 data:"name=林&age=119",//参数 dataType:'json', //请求类型 xml json text html script jsonp success:function(data){ //请求成功回调 console.log(data); }, error:function(data){ //请求失败回调 console.dir(data); } });

发送JSONP请求:
$.ajax({ url : 'http://127.0.0.1:53880/cross/data.php', //请求资源地址 data : "name=林&age=119", //参数 jsonp:'cb',//回调函数标识符参数键 jsonpCallback:'haha',//回调函数最后会在success中回调结果,不用设置该参数会有默认的 dataType:'jsonp',//jsonp方式请求 success:function(data){ //回调函数 console.dir(data); } });











【web前端解决跨域问题】


    推荐阅读