博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax跨域原理
阅读量:6534 次
发布时间:2019-06-24

本文共 1128 字,大约阅读时间需要 3 分钟。

转ajax跨域的原理:

1.原因:浏览器的同源策略

2.Script可以避开同源策略检查。jsonp就利用了这样的原理。

jsonp主要是利用了 <script/> 标签对 javascript 文档的动态解析来实现。(其实也可以用eval函数)

来个超简单的例子:

Html代码  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" >  
  3. <head>  
  4.     <title>Test Jsonp</title>  
  5.     <script type="text/javascript">  
  6.             function jsonpCallback(result)  
  7.             {  
  8.             alert(result.msg);  
  9.             }  
  10.         </script>  
  11.     <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>  
  12. </head>  
  13. <body>  
  14. </body>  
  15. </html>   

 

其中 jsonCallback 是客户端注册的,获取跨域服务器上的json数据后,回调的函数。

http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback

这个 url 是跨域服务器取 json 数据的接口,参数为回调函数的名字,返回的格式为

 

Js代码  
  1. jsonpCallback({msg:'this is json data'})  

 

Jsonp原理:

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

 

此时,服务器先生成 json 数据。 

然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

 

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

 

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

附,其它跨域的方式:iframe等。http://blog.csdn.net/coldy456/article/details/5982712

你可能感兴趣的文章
云栖问答送的淘公仔收到啦
查看>>
线程眼中的线性地址空间
查看>>
量子通信是个鸡肋,没有证券分析师说得那么好
查看>>
linux下cat命令详解
查看>>
Java架构必会几大技术点(转)
查看>>
css控制大幻灯绝对居中(非背景)
查看>>
01_04_Linux操作系统基础
查看>>
centos下安装mysql5.7
查看>>
毕业设计记录(四)一个form里有两个image的input提交按钮,servlet咋处理?
查看>>
2.10-2.13环境变量、CP、MV、文档查看
查看>>
Linux中Inode概念
查看>>
KVM命令集管理虚拟机
查看>>
常用的商业级和免费开源Web漏洞扫描工具
查看>>
快过年了,我给小明制定了一份价值60万的Java学习计划
查看>>
新一代视频AI服务,阿里云智能视觉重磅发布
查看>>
2019年面对全新的DDoS功击企业需做好哪些防护措施?
查看>>
原有vue项目接入typescript
查看>>
企业该分多少钱给员工?看柏明顿阿米巴奖金分配方案
查看>>
百度PaddlePaddle再获新技能 智能推荐、对话系统、控制领域都能搞定!
查看>>
大学生如何看待校园考勤
查看>>