jsonp的一个总体理念:
客户端让服务器返回数据的同时,
并告诉服务器,要调用哪个函数,
服务器就返回调用该函数的形式,并且数据作为该函数调用的参数
可以理解为:服务器最终就是返回一条js函数调用语句,类似如下:
xxx函数(数据);
具体代码:
客户端写法(jQuery)
$.ajax({
url : 请求地址,
data: 请求时要发送的数据,
dataType: "jsonp",
//成功后要做的事
success : function(){ .... }
})
客户端写法(原生js)
function test( data ){
console.log(data);//处理数据
}
var script = document.createElement("script");
script.src = "xxx.php?callback=test";
document.body.append(script);
服务器端:
<?php
$callback = $_GET['callback'];
$arr = array(....); //数据
$data = json_encode($arr);
echo $callback . "(" . $data . ")";
?>
XMLHttpRequest 2.0中的新特性:
1)超时特性:
xhr.timeout = 2000; //设置超时时间(毫秒)
//如果超时了,怎么处理
xhr.ontimeout = function(){ ... }
2)FormData对象:用于一次性收集form表单数据
var formObj = document.querySelector("form表单");
var formData = new FormData(formObj);
//然后直接作为xhr的send参数:
xhr.send( formData );
细节:
2.1)xhr此时只能是post请求
2.2)xhr此时无需设置请求头
2.3)FormData还可以追加数据,形式为:
formData.append('key', "value");
3)监听文件上传进度:
xhr.upload.onprogress = function(e){
var current = e.loaded; //已上传 的 数据大小
var total = e.total; //要上传的总数据大小
//然后就可以去根据这两个数据设定进度条的表现了
}
提示:
测试大文件,需要去php.in中修改以下两个配置:
post_max_size, upload_max_filesize
服务器端:
header("Access-Control-Allow-Orign: * ");
header("Access-Control-Allow-Orign:http://www.itcast.cn:80"); |
|