uncategorized

ajax跨域请求

介绍

今天看到jsonp这个新名词, 随问了一下度娘这东西是啥文艺, 原来这东西是针对ajax不能
跨源请求, 想出来的一种解决方式, 关于什么是跨源请求, 这里有个浏览器的同源策略
, 先了解一下这个是什么.

举例

我在自己的电脑上面, 用nginx配置两个虚拟主机, 一个监听80端口, 一个监听81端口, 大
致的配置参数是这样的.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
server {
listen 80;
root html;

location / {
}

location ~ \.php$ {
root html;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}

server {
listen 81;
root html;

location / {
}

location ~ \.php$ {
root html;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}

我们在nginx服务器的根目录下新建两个文件client.php和server.php, client.php的的类容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type='text/javascript' src='js/jquery-2.1.4.min.js'>
</script>

<script>
function callback(data) {
alert(data);
}
$.getJSON('http://localhost:81/server.php', function(data) {
callback(data);
});
</script>

</head>
<body>
</body>
</html>

server.php

1
echo "server";

当我们在浏览器里面请求http://localhost:80/client.php 的时候, 会出现这样的错误提示
Access-Control-Allow-Origin
这是因为我们的浏览器默认是不支持跨源请求的

打破同源策略的限制

我们修改client.php文件, 修改后的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type='text/javascript' src='js/jquery-2.1.4.min.js'>
</script>

<script>
function callback(data) {
alert(data);
}
var url = 'http://localhost:81/server.php?callback=callback';
var script = "<script type='text/javascript' src='" + url + "'><\/script>";
$('head').append(script);
</script>

</head>
<body>
</body>
</html>

server.php

1
2
<?php
echo $_REQUEST['callback'] . "('server')";

通过以上的方式, 我们就解决同源策略的限制

JSONP

实际上,上面的例子就是一个JSONP的简单实现。JSONP(JSON with Padding)就是服务器
端和客户端互相协作以完成跨域请求的一种协议,客户端向服务器端发送请求并附带callba
ck函数,服务器端返回相应的js代码,这个代码就是执行回调函数,参数就是服务器端返回
的JSON数据。上面例子中的server.php就是服务端的简单实现,返回的响应内容是callback
(‘server’),这段内容会被客户端插入到动态生成的script标签内部。

在jQuery中拥有对JSONP的支持,只要在使用jQuery.getJSON方法时传入的url的格式是url?
callback=?即可,jQuery会自动的将?替换成具体的回调函数名。上面例子的功能,可以采
用jQuery改写成:

1
2
3
$.getJSON('http://localhost:81/server.php?callback=?', function(data){  
callback(data);
});

参考

娄振林专栏
雨中无伞—–WEB前端开发