黑马程序员技术交流社区

标题: 成都前端一期 [打印本页]

---

作者: zzzzzzyuanfeng    时间: 2019-6-6 13:57
标题: 成都前端一期
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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2