zoukankan      html  css  js  c++  java
  • 20150304+JQuery+AJax+插件-02

    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

  • 相关阅读:
    Pyton 练习题2
    Python 知识点练习
    pycharm 汉化
    关于sublime编辑Python的安装与配置
    python练习题
    虚短和虚断
    OSI的7层协议
    5V电压的制作
    三角波,方波,正弦波的转换
    单片机不工作,晶振是否起振怎么检查
  • 原文地址:https://www.cnblogs.com/lifushan/p/5469374.html
Copyright © 2011-2022 走看看