20150304+JQuery+AJax+插件-02

三、Ajax跨域请求——jsonp技术

1、Ajax跨域请求原理图

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

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

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

3、jsonp协议

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

面试题：json与jsonp的区别

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

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

demo07.php

运行结果：

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

demo07.php

运行效果：

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

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

demo07_kuayu.html

demo07.php

运行效果：

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

四、jQuery中的跨域请求

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

demo08.html

demo07.php

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

demo09.html

demo07.php

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

demo10.html

demo07.php

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

五、天气预报

1、原理图

2、代码实现

1）界面

2）设计数据库，初始化数据

3）代码实现

主要涉及的知识点：

file文件导出

jQuery的ajax请求

分类实现（new Option()）;

数据库查询

snoopy采集库

效果：

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

1、Lightbox

2、jquery.rotate.min.js插件

3、ValidateForm

4、多文件上传

5、jquery.lazyload.js

6、jQuery Mobile