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 地址。电话号码归属地