jsonp我根本不知道什么,每次我都记成了jquery的一个ajax方法,但其实不是。其实这是一个解决跨域问题的一个方法。我个人是比较喜欢在php上加上header(“Access-Control-Allow-Origin:*”)的,所已这个跨域问题我其实真的不是很明白。
JSONP
js的jsonp其实就是利用script标签的src属性不会受到跨域的影响,所以把php当作script标签加载进来了。但是只是加载php是不行的,所以需要事件处理函数,于是就是必须在加载php的同时传入参数了:
<script type="text/javascript" src="http://localhost/ajax/jsonp.php?jsoncallback=func"></script>
我一开始不理解什么是jsoncallback参数,现在理解了。这是一个函数名,实在网页中定义的事件处理函数,用来处理php返回的数据:
<script>
function func(result) {
var html = '<ul>';
for(i in result) {
html+= '<li>'+result[i]+'</li>';
}
html += '</ul>';
document.getElementById("result").innerHTML = html;
}
</script>
php的内容很简单,是这样:
<?php
header('Content-type: application/json');
$jsoncallback = htmlspecialchars($_GET["jsoncallback"]);
$json_data = '["data1","data2"]';
echo $jsoncallback."(".$json_data.")";
?>
返回到html中的是这样的内容:
func(["data1","data2"])
这不就是javascript嘛?之前都定义好了func函数,所以执行之后
就是这样了:
<ul>
<li>data1</li>
<li>data2</li>
</ul>
这就是jsonp,实现跨域的方法之一。
也可以用jquery的方法来实现,更加简单一点:
$.getJSON("//127.0.0.1/AJAX/data/jsonp.php?jsoncallback=?", function(data) {
var html = '<ul>';
for (i in data) {
html += '<li>' + data[i] + '</li>';
}
html += '</ul>';
document.getElementById("result").innerHTML = html;
})
JSON
json我觉得是js与php交流的核心内容,php只能返回字符串给js,但是根据字符串的不同,到了js里就变成了不同的数据类型。
$arr = '["a","b","c"]';
$obj = '{"a":1,"b":2,"c":3}';
在php里这就是字符串,没什么区别,到了js里这就是数组和对象。
但其实我们还是需要对象字符串比较好用,在php里没有js里的对象,但是有特殊的索引数组,和js中的对象是一样的:
$data = array(
'id' => "1",
'title' => "First image",
'url' => "http://www.example.org/1",
'width' => "200",
'height' => "283",
'image' => "../sample-images/image_1_big.jpg",
'preview' => "../sample-images/image_1.jpg"
)
echo $data; //会报错
echo json_encode($data);需要转化为json字符串
这就需要用到php的json_encode方法把数组转化为json字符串了。
还有一种php的对象:
class Emp {
public $name = "";
public $hobbies = "";
public $birthdate = "";
}
$e = new Emp();
$e->name = "sachin";
$e->hobbies = "sports";
$e->birthdate = date('m/d/Y h:i:s a', "8/5/1974 12:20:03 p");
echo json_encode($e);
也是一样的道理。