jsonp的工作原理
Posted Lonely existence, lonely burni
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsonp的工作原理相关的知识，希望对你有一定的参考价值。
<!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的工作原理的主要内容，如果未能解决你的问题，请参考以下文章