跨域有好多种方式,会根据当前的业务逻辑选择对应方式
这里介绍了jsonp的方法的实现过程
准备工作
模拟两个不同的域(下面用a.com 和b.com 来讲解)
a.com站点下面创建一个client.html
b.com站点下面创建一个server.php
a.com站点通过js跨域请求b.com站点,我们利用script标签不受域访问限制特点进行请求(img标签同样有此特点),最主要的特点就是能执行请求返回来的js脚本
下面代码执行过程是
1、点击send按钮,创建script标签,为该标签src赋值后,添加到document中。
2、放到document中会立即请求b.com中的server.php ,请求的地址有个callback=resutl参数,这个result就是client.html中定义的一个js函数
3、server.php 返回一个'result("{\"message\",\"xxxxxx\"}")';
4、接着执行client.html中的js函数resut;
代码如下:
client.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jsonpClient.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script type="text/javascript">
function createScript(){
var script = document.createElement("script");
script.id="jsonid";
script.src="http://b.com/server.php?q=sss&callback=result";
document.body.appendChild(script);
}
function result(data){
var dataJson = eval("("+data+")");
document.write(dataJson.message);
document.body.removeChild(document.getElementById("jsonid"));
}
<body>
<input type="button" value="send" οnclick="createScript()"/>
</body>
</html>
server.php
q = $_REQUEST['p'];
callback = $_REQUEST['callback'];
处理过程省略
....
....
....
resutl="xxxxx";
echo callback+'("{\"message\",\"'+resutl+'\"}")';