分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

ajax跨域2

发布时间:2023-09-06 01:26责任编辑:胡小海关键词:跨域

接着昨天的写,写到关于解决跨域的问题,跨域这个名词,大家搜搜百度百科,里面有详细的介绍,我在这里就不赘述了

好在这里我来讲下关于jsonp的问题,jsonp解决跨域有两种该方案可选,1.原生js解决  2.jquery jsonp解决

下面我通过原生js来介绍下关于jsonp的原理,

客户端

function abc(data){ ???console.log(data.data); ???var json =JSON.parse(data.data.lists[0]) ???console.log(json);}<script src="test.php?callback=abc&key=123"></script>

服务端

<?php ?$callback = $_GET[‘callback‘]; ?$txt = $_GET[‘key‘];//逻辑处理根据自身业务来下 ?echo $callback.‘(’.$txt.‘)’;?>

这里我们来分析下上面的代码的意思,首先在客户端我们通过script标签,标签的src属性设置为我们要获取数据的地址,这样会帮我们吧数据从服务器拿到,

接着我们来分析服务器端的代码,服务器端根据传过来的querystring来得到一个键为callback的值和键位key的值,得到$callback=abc,$txt=123,最后返回给客户端abc(123),

接着客户端通过srcipt标签就拿到了abc(123),这里细心的朋友可能注意到了,我们刚好定义了一个abc()的函数,所以这时会去调用abc(data)这样我们就获取了服务端传过来的真实数据。这既是jsonp的原理(各位勿喷,这就是我自己的理解,不是直接copy过来的,所以可能有些概念不是那么严谨)

当然,如果每次都这样去获取,还是有点麻烦的,所以jquery中ajax给我们提供了更为简洁的方法


这里只需将dataType指定为jsonp就可以了,效果和上面一样

那么经过这样,我们已经可以通过跨域获取数据了,通过这种方式我们就可以拿到音乐数据了,感兴趣的朋友,自己可以尝试下去,在这里我就不说后面的具体细节了,得到了数据,其他都可以解决。

后话:这个音乐播放的案例是我6月份没事的是哦吼,做的玩下的,最开始不知道跨域这个问题,走了很多弯路,你并且我的第一个解决方案不是这样做的,我的第一个解决方案是用.net做后台去请求url,获得的数据中用字符串的处理办法,去除掉含有calllback()的字符,然后前端再去请求ashx,这样做你就要自己部署服务端,吧前端页面放在同一域下

ajax跨域2

原文地址:http://www.cnblogs.com/fandaxia/p/7878569.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved