<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--

             src 属性他自带有跨域功能，浏览器没有限制。

    -->

    <script>

        function jsonp(info) {

            //已经帮我转成对象。

            console.log(info);

        }

        /*

         * 我的目的是什么：

         *   http://www.baidu.com/asdfsadf/asdf.php

         *   然后这个地址返回，我想把这个返回的数据获取。

         *   我的目的是获取第三方网站的资源数据。

         *

         * */

    </script>

    <!--

           这个标签没有跨域的限制，浏览器没有对这个标签进行一个禁用。

           jQuery

           //之前这段代码是写在http://www.wu.com

           $.ajax({

               url:"http://www.baidu.com/asdfasdfasdf",

               type:"get",

               success:function(){

               }

           })

           //假设没有加dataType:jsonp

           //这个jQuery 底层默认是去发送一个XMLHttpRequest 的请求

           //但是请求的资源是http://www.baidu.com 的资源 ，直接跨域的。

           //现在我是dataType:jsonp

           //jQuery 底层 var srcipt=document.createElement("srcipt");

           //srcipt.src="http://www.baidu.com" //跨域

    -->

    <script src="http://api.wu.com/api/04jsonp1.php?callback=jsonp"></script>

</head>

<body>

</body>

</html>

跨域：

      我在www.xiaoyanzi.com 站点下面的一个页面想去访问  http://www.baidu.com 下面的一个资源.

      http://www.xiaoyanzi.com   a.html

      http://www.baidu.com  b.html

      1:document

      a.html 想访问b.html 下面的元素  顶级域名都不一样。

      http://www.xiaoyanzi.com   a.html

      http://api.xiaoyanzi.com   b.html  主域名一样。

      a.html 想访问b.html 默认不允许。

      同源：域名，端口，协议必须一样。

      （不同源就跨域）

      但是主域名都一样。

      所以我怎么去解决这个跨域的问题。

      http://www.z.com   a.html 使用js 添加一个document.domian ="zhuwu.com";

      http://api.z.com   b.html 使用js 添加一个document.domian ="zhuwu.com";

       2:ajax 跨域

       在http://www.z.com  有一个a.html 想去访问http://www.baidu.com/afads.php

 有跨域的特性。（浏览器觉得会有安全问题。）

       a.html

       $.ajax({

            url:"http://www.baidu.com",

            type:"",

       })

       请求可以发送出去，数据回不来。

         $.ajax({

                    url:"http://www.baidu.com",

                    type:"",

                    dataType:"jsonp",

       })

       底层的原理

       在jQuery 的参数不加   dataType:"jsonp",

       默认是发送一个xmlHttpRequest 请求，使用这个对象去发送请求。你浏览器根本就接收不到数据。

       添加了：dataType:"jsonp",

       jQuery 里面

       var script=document.createElement("script");

       script.src="http://www.baidu.com/demo.js";

跨域访问是我们以后比较常见的操作：

       1： 在我的网站下面去访问一些其它网站提供的一些服务。

       2： 天气预报，查询机票，查询火车票。 查询ip 地址。电话号码归属地

jsonp的工作原理的更多相关文章

  1. javascript 同源策略和 JSONP 的工作原理

    同源策略 同源策略是一个约定,该约定阻止当前脚本获取或操作另一域的内容.同源是指:域名.协议.端口号都相同. 简单地说,A 服务器下的 a 端口执行 ajax 程序,不能获取 B 服务器或者 A 服务 ...

  2. 浅谈JSONP 的工作原理

    小编最近在工作中经常用到 jsonp 这个东西, 表示之前从来没用过  最近稍微研究了下 当然很多内容来源于网上 收集整理 你懂的 ~~~ 话说我们访问一个页面的时候 需要像另一个网站获取部分信息, ...

  3. JSONP 的工作原理是什么？

    利用<script>标签没有跨域限制的"漏洞"来达到与第三方通讯的目的. 当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,形 ...

  4. jsonp 跨域原理详解

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  5. ajax工作原理及jsonp跨域详解

    一.Ajax简介 ajax = 异步 JavaScript 和 XML. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.我们知道,传统的网页(不使用ajax)如果需要更新内容, ...

  6. ajax工作原理，Jsonp原理

    Ajax工作原理是 相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化. 对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务 ...

  7. ajax及其工作原理

    1.关于ajax的名字 ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. 2. ...

  8. Ajax工作原理及实例

    1.关于ajax的名字 ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. 2. ...

  9. 菜鸟学Struts2——Struts工作原理

    在完成Struts2的HelloWorld后,对Struts2的工作原理进行学习.Struts2框架可以按照模块来划分为Servlet Filters,Struts核心模块,拦截器和用户实现部分,其中 ...

随机推荐

  1. vi命令修改文件及保存的使用方法

    简单点:vi文件名,按"I"进入insert模式,可以正常文本编辑,编辑好之后按“esc”退出到“命令模式”,再按“shift+:”进入“底行模式”, 按“:wq”保存退出! 还一 ...

  2. Python打包方法——Pyinstaller (转)

      Python版本:Python3.5.2 一.安装Pyinstaller 1.安装pywin32 下载安装文件:查找到跟自己适用的python版本及window系统版本匹配的pywin32,下载后 ...

  3. HDU1211 密文解锁 【扩展欧几里得】【逆元】

    <题目链接> <转载于 >>> > 题目大意: RSA是个很强大的加密数据的工具,对RSA系统的描述如下: 选择两个大素数p.q,计算n = p * q,F( ...

  4. HTTP协议学习笔记（二）

    HTTP协议学习笔记(二) 1.HTTP报文 HTTP报文:用于HTTP协议交互的信息.请求报文:请求端(客户端)的HTTP报文叫做请求报文.响应报文:响应端(服务端)的HTTP报文叫做响应报文. H ...

  5. MySQL QA

    Q:MySQL常用的存储引擎有哪些? A:MyISAM及InnoDB,5.5版本后默认数据库引擎由MyISAM变为InnoDB Q:MyISAM及InnoDB有什么区别?至少5点 A: ①.InnoD ...

  6. 说出ArrayList,Vector, LinkedList的存储性能和特性

     ArrayList和Vector都是使用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,它们都允许直接按序号索引元素,但是插入元素要涉及数组元素移动等内存操作,所以索引数据快而插 ...

  7. WTL中最简单的实现窗口拖动的方法（转）

    目前,很多基于对话框的应用程序中对话框都是不带框架的,也就是说对话框没有标题栏.众所周知,窗口的移动都是通过鼠标拖动窗口的标题栏来实现的,那么现在应用程序中的对话框没有了标题栏,用户如何移动对话框呢? ...

  8. grep/pgrep/egrep/fgrep

    Differences between grep, pgrep, egrep, and fgrep (Linux): grep grep is an acronym that stands for & ...

  9. Makefile 中的.PHONY

    PHONY 目标并非实际的文件名:只是在显式请求时执行命令的名字.有两种理由需要使用PHONY 目标:避免和同名文件冲突,改善性能. 所谓的PHONY这个单词就是伪造的意思,makefile中将.PH ...

  10. Linux TC(Traffic Control)框架原理解析

    近日的工作多多少少和Linux的流控有点关系.自打几年前知道有TC这么一个玩意儿而且多多少少理解了它的原理之后,我就没有再动过它,由于我不喜欢TC命令行,实在是太繁琐了.iptables命令行也比較繁 ...