jquery ajax jsonp php,用jQuery AJAX发出JSONP请求实现跨域获取数据

JSONP全称是"JSON with Padding",个人理解就是"填充JSON"的意思.

填充到哪里?就是填充到JS函数调用时的参数里.

可见JSONP的本质就是带有JSON数据的JS函数调用,它是一句合法的JS代码.

JSONP能通过AJAX跨域请求的原理(前提)是:

浏览器不会拦截跨域输出的JS代码,就像

下面以jQuery的$.ajax函数为例说明:

先用PHP开2个不同域的HTTP服务:

php -S 127.0.0.1:8080 -t /home/eechen/www1

php -S 127.0.0.2:8080 -t /home/eechen/www2

然后是 127.0.0.1:8080 AJAX跨域请求 127.0.0.2:8080 的JSONP数据.

http://127.0.0.2:8080/jsonp.php 内容:

<?php

header('Content-Type: application/javascript'); //建议指定响应头为JS代码

echo $_GET['callback'].'('.json_encode(array('Server'=>'PHP')).')';

http://127.0.0.1:8080 通过AJAX发出JSONP请求:

$.ajax({

type: "GET", //JSONP只能通过GET方式发出请求

url: "http://127.0.0.2:8080/jsonp.php",

data: {name:"ele", pass:"123"},

dataType: "jsonp"

// 发出的GET请求 http://127.0.0.2:8080/jsonp.php?callback=jQuery112400641287495426539_1477561917569&name=ele&pass=123&_=1477561917570

// 返回的JSONP数据 jQuery112400641287495426539_1477561917569({"Server":"PHP"})

}).done(function(data){

console.log(data); //data即为获取到的JSON对象{"Server":"PHP"}

});