zoukankan      html  css  js  c++  java
  • 09-JSONP跨域实现原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的ajax是不能进行跨域请求的。但 img、iframe 、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用<script>标签的开放策略,我们可以实现跨域请求数据,当然这需要服务器端的配合。 Jquery中ajax的核心是通过 XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的 js脚本。

      当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的JavaScript代码。因为jsonp 跨域的原理就是用的动态加载<script>的src ,所以我们只能把参数通过url的方式传递,所以jsonp的 type类型只能是get !

     1 示例:
     2 
     3 $.ajax({
     4 
     5     url: 'http://192.168.10.46/demo/test.jsp',        //不同的域
     6 
     7     type: 'GET',                                                        // jsonp模式只有GET 是合法的
     8 
     9     data: {
    10 
    11         'action': 'aaron'
    12 
    13     },
    14 
    15     dataType: 'jsonp',                                              // 数据类型
    16 
    17     jsonp: 'jsonpCallback',                                     // 指定回调函数名,与服务器端接收的一致,并回传回来
    18 
    19 })

    其实jquery 内部会转化成

    http://192.168.10.46/demo/test.jsp?jsonpCallback=jQuery202003573935762227615_1402643146875&action=aaron

    然后动态加载

    <script type="text/javascript"src="http://192.168.10.46/demo/test.jsp?jsonpCallback= jQuery202003573935762227615_1402643146875&action=aaron"></script>
    然后后端就会执行jsonpCallback(传递参数 ),把数据通过实参的形式发送出去。

    使用JSONP 模式来请求数据的整个流程:客户端发送一个请求,规定一个可执行的函数名(这里就是 jQuery做了封装的处理,自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄),服务器端接受了这个 jsonpCallback函数名,然后把数据通过实参的形式发送出去

    (在jquery 源码中, jsonp的实现方式是动态添加<script>标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数,当 <script>代码插入时函数执行,执行完毕后就 <script>会被移除。同时jquery还对非跨域的请求进行了优化,如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。)

  • 相关阅读:
    RESTful日#2:使用Unity容器和引导程序在Web api中使用依赖注入实现控制反转
    RESTful日#2:使用Unity容器和引导程序在Web api中使用依赖注入实现控制反转
    带有可选选项的输入文本框(组合框)
    在组合框中嵌入一个DataGridView
    ItemData在。net
    实现一个所有者绘制的组合框
    模板化的“请等待”按钮和模板控件介绍
    使用AvalonEdit (WPF文本编辑器)
    办公风格的扁平组合箱
    【windows】telnet 和一些dos命令
  • 原文地址:https://www.cnblogs.com/haoqiyouyu/p/14720399.html
Copyright © 2011-2022 走看看