如何发送一个Ajax请求(原生JS和jQ)

XHR1.0时代

var xhr = new XMLHttpResponse();
xhr.open('GET','test.php?id=22');
//如果请求方式是POST,需要设置,如果请求内容包括文件,必须是POST
//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//以及将要传输的数据以urlencode格式作为xhr.send()的参数传入
xhr.send(null);
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        console.log(xhr.responseText);
    }
}

XHR2.0时代

更方便的表单信息对象:FormData() -可以包含上传文件信息

更方便的XHR的回调函数:onload()方法

//获取表单元素
var form = document.getElementById("form");
//将表单元素作为参数传入FormData()获取表单内的所有内容
//FormData还有一个append方法可以再额外的添加进去一些其他内容
//例如fd.append("name1","tom");
var fd = new FormData(form);
var xhr = new XMLHttpResponse();
xhr.open('POST','test,php');
xhr.send(fd);
//XHR2.0新增加了onload方法,该事件会在xhr.readyState === 4和xhr.status === 200时触发
xhr.onload = function () {
    console.log(xhr.responseText);
}

在jQ中传输FormData数据(假设是有文件上传的)

<script>
        //jQ中有serialize方法 但是依然无法获取到上传文件控件的内容
        //所以还是需要使用formdata对象,然后还需要在ajax中设置2个属性
        //processData:false;    -不进行数据处理
        //contentType:false;    -不设置内容格式
        $('#btn').on('click', function () {
            var fd = new FormData($("#form")[0]);
            $.ajax({
                method :'POST',
                url : 'test.php',
                data : fd,
                success : function (datas) {
                    console.log(datas);
                },
                processData : false,
                contentType : false
            })
        })
</script>

上传进度操作

xhr.upload.onprogress 用于检测文件上传进度信息

​ 每次检测触发间隔为100ms

​ 进度信息需要从时间对象中获取

​ 为了保证能够至少获取一次,建议放在open和send方法中间

​ 事件对象中有2个关键属性:loaded(已上传大小)、 total(总大小)


<style>
        #view{
            width: 200px;
            height: 10px;
            margin-top: 20px;
            border: 1px solid #000;
            display: none;
        }
        #viewinfo{
            display: inline-block;
            /*width: 10px;*/
            height: 10px;
            background-color: green;
            float: left;
        }
        #progress{
            display: none;
        }
</style>

<body>
    <form id="form">
        <input type="file" multiple name="file"/>
        <input type="button" value="提交" id="btn"/>
    </form>
    <div id="view">
        <span id="viewinfo"></span>
    </div>
    <div id="progress">
        <h1 id="proinfo">0%</h1>
    </div>
<script>
    var form = document.getElementById("form");
    var btn = document.getElementById("btn");
    var view = document.querySelector("#view");
    var progress = document.querySelector("#progress");
    var viewinfo = document.querySelector("#viewinfo");
    var info =document.querySelector("#proinfo");


    btn.onclick = function () {
        view.style.display = 'block';
        progress.style.display = 'block';
        var xhr = new XMLHttpRequest();
        var fd = new FormData(form);
        xhr.open('POST','test.php');

        xhr.upload.onprogress = function (e) {
            //使用toFixed()方法,可以保留指定的小数位,参数为小数位数
            //进行计算时可能会出现小数的计算精度问题,建议把有小数的取整处理
            var bili = (e.loaded/ e.total).toFixed(2);
            viewinfo.style.width = 200 * bili +'px';
            info.innerText = parseInt(bili*100)+'%';
        }
        xhr.send(fd);
    }
</script>
</body>

1 + 6 =

求知若飢,虛心若愚。