A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 宅宅宅 初级黑马   /  2019-5-31 12:46  /  788 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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");

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马