同源

  • 基本概念：同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。
//同一域名下，允许通讯

http://www.a.com/a.js

http://www.a.com/b.js

//同一域名下不同文件夹，允许通讯

http://www.a.com/lab/a.js

http://www.a.com/script/b.js

//同一域名，不同端口，不允许

http://www.a.com:8000/a.js

http://www.a.com/b.js

//同一域名，不同协议，不允许

http://www.a.com/a.js

https://www.a.com/b.js

//域名和域名对应ip，不允许

http://www.a.com/a.js

http://70.32.92.74/b.js

//主域相同，子域不同，不允许

http://www.a.com/a.js

http://script.a.com/b.js

//同一域名，不同二级域名（同上），不允许

http://www.a.com/a.js

http://a.com/b.js

//不同域名，不允许

http://www.cnblogs.com/a.js

http://www.a.com/b.js

跨域

  • 跨域是十分危险的
  • iframe标签src属性可以获取外部网站的dom对象
  • 跨域又可以被利用，从别的网站接收一些十分有用的数据
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            background-color: yellow;

        }

    </style>

</head>

<body>

<h1>我是内部</h1>

<input type="text" value="123">

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body {

            background-color: green;

        }

    </style>

</head>

<body>

<h1>我是外部</h1>

<iframe src="15-inner.html"></iframe>

<script>

    var iframe = document.querySelector('iframe');

    var innerDocument = iframe.contentWindow.document;

    console.log(innerDocument);

</script>

</body>

</html>

核心思想

  • 因为浏览器禁止跨域访问，但是可以通过src属性进行跨域
  • 在script标签的src属性中添加一个js文件地址，可以实现跨域，但是是写死的
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--应该是域名加...全路径，如果要跨域访问的话-->

<script src="js/myjs.js"></script>

</body>

</html>
//myjs.js

function say(str) {

    alert(str);

}

say('hello');
  • 在script标签的scr属性中添加一个php地址，页面加载会自动发送一个get请求，这就写活了
  • 取数据：服务端获取get请求传递的参数，然后再返回回去，并且再利用字符串拼接把json数据传递过去，这时候是一个函数名+实参的形式传递给了页面
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    function say(data) {

        console.log(data);

        console.log(data.name);//wq

        console.log(data.age);//17

    }

</script>

<!--发送了一个get请求-->

<script src="files/07.php?callback=say"></script>

</body>

</html>
<?php

  $str='{name:"wq",age:17}';

  echo $_GET['callback'].'('.$str.')';

?>
  • jquery中异步方法已经帮我们封装好了一个jsonpCallback，可以将callback=jsonpCallback拼接到url中，post除外
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="button" value="ajax发送jsonp">

<script src="js/jquery.min.js"></script>

<script>

    function say(data) {

        console.log(data);

    }

    $(function () {

        $('input').click(function () {

            $.ajax({

                url: 'files/08.php',

                dataType: 'jsonp',

                type:'post',

                success: function (data) {

                    console.log(data);

                },

                jsonpCallback: 'say'

            });

        });

    });

</script>

</body>

</html>
<?php

  $str='{name:"wq",age:17}';

  echo $_GET['callback'].'('.$str.')';

?>
//{name: "wq", age: 17}

//{name: "wq", age: 17}

返回两行数据，可以发现，jsonpCallback参数是say，有一个就是调用了say方法，一个是success成功以后打印的传输数据

Ajax——跨域访问的更多相关文章

  1. 浅析JSONP-解决Ajax跨域访问问题

    浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...

  2. ajax跨域访问的解决方案

    今天的工作中要访问摄像机内部的一个web站点,这就涉及到jquery的ajax跨域访问的问题.我使用的是jquery1.7的版本,下面总结如下: 问题一:一开始用IE调试,总是返回No Transpo ...

  3. Ajax跨域访问解决办法

    方法1. jsonp实现ajax跨域访问示例 jsp代码: <body> <input type="button" onclick="testJsonp ...

  4. Web Api 2(Cors)Ajax跨域访问

    支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示   随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...

  5. ajax 跨域访问的解决方案

    ajax 跨域访问的解决方案 一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...

  6. Hbuilder编辑App时，ajax跨域访问失败问题

    今天试着用Hbuilder写app的前段显示页面,在第一步时就被打住了,ajax异步调用服务器的登录接口时,报错, 显示这样的错误 XMLHttpRequest cannot loadhttp://w ...

  7. 关于JQuery Ajax 跨域 访问.net WebService

    关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...

  8. JS Ajax跨域访问

    js ajax跨域访问报"No 'Access-Control-Allow-Origin' header is present on the requested resource 如果请求的 ...

  9. ajax跨域访问http服务--jsonp

    在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...

  10. Ajax跨域访问wcf服务中所遇到的问题总结。

    工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务 ...

随机推荐

  1. 在JQuery中$(document.body)和这个$("body") 这两的区别在哪里？

    两种写法代表的是同一个对象 $("body") 是一个选择器,jQuery 会从 DOM 顶端开始搜索,直到找到标签为 body 的元素. 而 $(document.body) 中 ...

  2. HBase的集群搭建

    前提:已经安装过jdk,HDFS集群和zookeeper,我的集群规划见HDFS的文章中 1.在1上安装配置hbase 下载:http://mirror.bit.edu.cn/apache/hbase ...

  3. alpha版出炉，实现win2008 service的session 0穿透

    指定用户名,拿最小session,实现和用户ui交互. 这样,搞windows的自动化部署,就可以向前一大步啦. 比以前用psexec要用户名密码,指定session要先进多啦. 安全保密性也提高了. ...

  4. 12、Java并发性和多线程-Java同步块

    以下内容转自http://ifeve.com/synchronized-blocks/: Java 同步块(synchronized block)用来标记方法或者代码块是同步的.Java同步块用来避免 ...

  5. gradle: 修改gradle-xx-bin.zip下载地址

    进入gradle/wrapper/目录,修改gradle-wrapper.properties文件, 将distributionUrl修改为自己的下载地址即可. 另外修改gradle reposito ...

  6. Android: 长按及松开处理

    长按及松开处理 // 长按触发handle final Handler handler = new Handler(); final Runnable mLongPressed = new Runna ...

  7. Android Zxing框架扫描解决扫描框大小，图片压缩问题

    在我们是Zxing框架进行二维码扫描的时候,会发现,如今手机随着分辨率的添加.那个扫描框会越来越小,在1920*1280和1280*720还算比較正常.可是三星的几款手机note4,5.S6,等几款手 ...

  8. LeetCode 706. Design HashMap (设计哈希映射)

    题目标签:HashMap 题目让我们设计一个 hashmap, 有put, get, remove 功能. 建立一个 int array, index 是key, 值是 value,具体看code. ...

  9. 日常工作中常见的mysql优化技巧

    1.介绍一下MYSQL经常使用的优化技巧. MySQL 自带 slow log 的分析工具 mysqldumpslow ,可是没有说明.本文通过分析该脚本,介绍了其用法. slow log 是 MyS ...

  10. go语言笔记——多值函数，本质上和nodejs的回调很像，不过nodejs是回调的第一个参数是err，而golang里是第二个！

    5.2 测试多返回值函数的错误 Go 语言的函数经常使用两个返回值来表示执行是否成功:返回某个值以及 true 表示成功:返回零值(或 nil)和 false 表示失败(第 4.4 节).当不使用 t ...