山山未迟

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Ajax跨域请求——jsonp技术

1Ajax跨域请求原理图

wpsFD0F.tmp

2、Ajax跨域请求不被允许的原因

l Ajax技术由于受到浏览器的限制,该方法不允许跨域通信。

l 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。

3、jsonp协议

jsonp就是一个非官方协议,主要用于解决Ajax的跨域请求问题

面试题:json与jsonp的区别

jsonp技术主要是借助script标签的中的src属性来动态载入远程文件。

例1:通过Javascript原生方式解决跨域问题

wpsFD20.tmp

demo07.php

wpsFD21.tmp

运行结果:

wpsFD31.tmp

例2:改进上题,让我们的跨域请求随着按钮的触发在进行执行

wpsFD42.tmp

demo07.php

wpsFD53.tmp

运行效果:

wpsFD63.tmp

JSONP是一个非官方的协议,它允许在服务器端集成script tags返回至客户端,通过javascript callback的形式实现跨域访问。

4、通过jsonp返回大批量数据

demo07_kuayu.html

wpsFD83.tmp

demo07.php

wpsFD94.tmp

运行效果:

wpsFD95.tmp

说明:jsonp技术主要用于内部团队开发中,如果是外部接口,其提供了jsonp接口我们可以直接调用,否则,是没有办法调用的。

wpsFDA6.tmp

、jQuery中的跨域请求

1、通过jQuery的ajax底层实现$.ajax()解决跨域问题

demo08.html

wpsFDC6.tmp

demo07.php

wpsFDD7.tmp

2通过$.get()方法解决跨域请求

demo09.html

wpsFDE7.tmp

demo07.php

wpsFDF8.tmp

3、$.getJSON()方法解决跨域请求

demo10.html

wpsFE08.tmp

demo07.php

wpsFE19.tmp

通过以上上个案例可知,在jquery中,解决跨域请求都是通过模拟http的get请求方式进行解决的,且其处理了缓存问题。

、天气预报

1、原理图

wpsFE2A.tmp

2、代码实现

1)界面

2)设计数据库,初始化数据

3)代码实现

主要涉及的知识点:

file文件导出

jQuery的ajax请求

分类实现(new Option());

数据库查询

snoopy采集库

效果:

wpsFE2B.tmp

、那些年涛哥追过的jQuery插件

1、Lightbox

wpsFE4B.tmp

2、jquery.rotate.min.js插件

wpsFE5C.tmp

3、ValidateForm

wpsFE5D.tmp

4、多文件上传

wpsFE6D.tmp

5、jquery.lazyload.js

wpsFE8D.tmp

6、jQuery Mobile

wpsFE9E.tmp

posted on 2016-05-07 22:22  山山未迟  阅读(222)  评论(0编辑  收藏  举报