jsonP的原理和实现

  在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略) 这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容

  当我们必须进行跨域请求时 利用在页面中创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP,这项技术可以解决跨域提交Ajax请求的问题 假设在http://example1.com/index.php这个页面中向http://example2.com/getinfo.php提交GET请求,我们可以将下面的JavaScript代码放在http://example1.com/index.php这个页面中来实现: 

var eleScript= document.createElement("script"); 
eleScript.type = "text/javascript"; 
eleScript.src = "http://example2.com/getinfo.php"; 
document.getElementsByTagName("HEAD")[0].appendChild(eleScript); 

  当GET请求从http://example2.com/getinfo.php返回时,可以返回一段JavaScript代码,这段代码会自动执行,可以用来负责调用http://example1.com/index.php页面中的一个callback函数

  JSONP它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

  JSONP的最基本的原理是:动态添加一个<script>标签的方法向不同域提交HTTP请求

  JsonP的执行过程: 

  首先在客户端注册一个callback (如:'jsoncallback') 然后把callback的名字(如:jsonp1236827957501)传给服务器  然后以 javascript 语法的方式,生成一个function, function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 . 最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端 

  客户端浏览器 解析script标签 执行返回的javascript文档 此时javascript 文档数据 作为参数 传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里

  简述原理与过程:首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 json 数据。 然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。 

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

原文地址:https://www.cnblogs.com/love-yangerlei/p/8251148.html