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"); |
|
收藏
淘帖
踩
