AJAX跨域请求JSONP-白红宇

AJAX跨域请求JSONP

阅读量：6955 次

发布时间：2019-06-27

本文共 1108 字，大约阅读时间需要 3 分钟。

1、什么是JSONP？

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

2、JSONP有什么用？

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

3、如何使用JSONP？

下边这一DEMO实际上是JSONP的简单表现形式，在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。

jsonp.php 文件代码

一、原生js实现方法


    JSONP 实例

jQuery还有2种实现方法

二、（1）$.getJSON

    
        JSONP 实例

三、（2）$.ajax

这个对于的php是
    1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);$result=json_encode($arr);//echo $_GET['callback'].'("Hello,World!")';//echo $_GET['callback']."($result)";//动态执行回调函数$callback=$_GET['jsoncallback'];echo $callback."($result)";

但是JAONP只支持GET方式

四、

Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。

但是JAONP只支持GET方式

在PHP文件中加下面的header可以实现post方式跨域

// 指定允许其他域名访问

header('Access-Control-Allow-Origin:*');

// 响应类型

header('Access-Control-Allow-Methods:POST');

// 响应头设置

header('Access-Control-Allow-Headers:x-requested-with,content-type');

转载于:https://my.oschina.net/u/2612473/blog/1531836

你可能感兴趣的文章