跨域:跨当然是跨过去,域当然是别的服务器 (说白点就是去别服务器上取东西) 只要协议、域名、端口有任何一个不同,都被当作是不同的域

ajax 是一种请求响应无刷新技术(xmlhttqrequest对象请求服务器  服务器响应数据到客户端)

当然ajax跨域就是请求别的服务器的东西,好了说了这么多,下面看一个类似跨域原理的东西

下面是我创建的两个应用程序 test1 和test 2

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title></title>
  4. <script type="text/javascript" src="Scripts/test1.js"></script>
  5. </head>
  6. <body>
  7.  
  8. </body>
  9. </html>
  1. test1.js 代码
  1. alert('我是test1网站');

弹出 alert('我是test1网站')

//下面是testWeb2应用程序

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title></title>
  4. <script type="text/javascript" src="http://localhost:10603/testWeb1/Scripts/test1.js"></script>
  5. </head>
  6. <body>
  7.  
  8. </body>
  9. </html>

testWeb2应用程序 也会弹出 alert('我是test1网站')

哦,我能引求到到test1Web应用程序的js 没错的确能请求到 因这功要归于 src

<script>标签的src属性并不被同源策略所约束,所以可以获取任何服务器上脚本并执行。

所以我们ajax跨域可以利用 src来实现(因为真实的ajax跨域本是一个 伪命题)

下面是引用百度百科关于josnp的一段话

  1. Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料。
  2.  
  3. 由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML <script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

//上个请求google的地址

q是搜索关键字,callback 是回调函数名

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title></title>
  4. <script type="text/javascript" src="Scripts/test1.js"></script>
  5.  
  6. <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
  7. <script type="text/javascript">
  8.  
  9. $(function () {
  10. $("#btnAdd").click(function () {
  11. $.ajax({
  12. type: "get",
  13. url: "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result",
  14. success: function (data) {
  15. alert(data);
  16. }
  17.  
  18. });
  19. });
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <input type="button" id="btnAdd" value="测试" />
  25. </body>
  26. </html>

//IE 和google chrome弹出效果如下:

//这时候我们直接用XMLHttpRequest请求不同域上的数据时,是不可以了

但是在页面用src 引用不同的脚本是可以的json正是用了这个特性

  1. <script type="text/javascript">
  2. function addScriptTag(src) {
  3. var script = document.createElement('script');
  4. script.setAttribute("type", "text/javascript");
  5. script.src = src;
  6. document.body.appendChild(script);
  7. }
    //调用加载ScrptTag函数
  8. window.onload = function(){
  9. //搜索apple,将自定义的回调函数名result传入callback参数中
  10. addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result");
  11.  
  12. }
  13. //自定义的回调函数result
  14. function result(data) {
  15. //我们就简单的获取apple搜索结果的第一条记录中url数据
  16. alert(data.responseData.results[0].unescapedUrl);
  17. alert(data.responseData.results[0].cacheUrl);
  18. }
  19.  
  20. </script>
  21.  

关于ajax跨域的一些说说的更多相关文章

  1. Laravel中的ajax跨域请求

    最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...

  2. Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)

    由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...

  3. Ajax跨域问题的两种解决方法

    浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: ...

  4. 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。

    ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...

  5. 解决ajax跨域请求 (总结)

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

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

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

  7. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  8. Ajax跨域:Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

  9. jquery ajax跨域调用

    客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...

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

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

随机推荐

  1. Android小技术知识(多用于面试)

    Android Dev Doc Android 开发 多使用内部类 使用方便且效率高 UI方面的知识 一.在编写layout的xml文件时,一定要仔细!如果在报错的时候,如何解决? 解决:将xml仔细 ...

  2. java创建二叉树并实现非递归中序遍历二叉树

    java创建二叉树并递归遍历二叉树前面已有讲解:http://www.cnblogs.com/lixiaolun/p/4658659.html. 在此基础上添加了非递归中序遍历二叉树: 二叉树类的代码 ...

  3. iOS子线程操作检测版本更新,有新版本通知用户更新, CheckVersion

    iOS子线程操作检测版本更新,有新版本通知用户更新 CheckVersion 一:如何使用: #import "CheckVersion.h" //输入你的app在appStore ...

  4. 关于Csdn水区被占据一事 (2015-08-01)

    例如以下图所看到的 水区被占据 ,假设发贴机不仅仅在水区发贴.也在其他版块也发贴,将不堪设想啊各位. 如今非常多站点也经历过被 注冊机,发贴机,乱炸,是非常可恨的事.可是您想想.为什么注冊机.发贴机会 ...

  5. 〖Linux〗不知谁写的,很实用的Linux命令

    第一部分 . sudo 运行上一条命令 sudo !! . HTTP方式共享当前目录 python -m SimpleHTTPServer . vim保存一个root用户文件 :w !sudo tee ...

  6. 优化技术之Android UI优化

    2013-06-30 UI 优化 在Android中,最常用LinearLayout表示UI的布局.比起LinearLayout,在资源利用上,RelativeLayout会占用更少的资源而达到相同的 ...

  7. java开源内容管理系统J4CMS支持真正静态化

    原理非常easy,使用httpclient请求遍历整个站点的菜单.文章链接.请求下来以后,生成html文件.即静态化了 把它们稍作调整,直接扔在88元购买的阿里云主机上.站点就完毕了 这是我的 静态站 ...

  8. ItelliJ项目打jar包

    不是Eclipse里方便的export...了. 一.配置 . 点击View->Open Module Settings(快捷键是F4) . 在弹出的对话框中,点击最左侧树的Artifacts ...

  9. django 官方文档下载

    今天发现自己的django文档有点过时了,于是想去下载一份新,找了老半天才找到pdf的下载地址:于是把它记录下来,希望以后可以直接用. 一.进行django官方网站: 二.文档的pdf文件就在docu ...

  10. LDA与QDA

    作者:桂. 时间:2017-05-23  06:37:31 链接:http://www.cnblogs.com/xingshansi/p/6892317.html 前言 仍然是python库函数sci ...