码迷,mamicode.com
首页 > Web开发 > 详细

ajax2.0

时间:2019-01-11 21:16:15      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:type   ini   response   ati   cti   ajax   NPU   pat   doc   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form>
            <input type="file" id="file" name="icon">
            <input type="text" id="user" name="user">
            <input type="button" id="btn" value="发请求">
    </form>
</body>
</html>

<script>
    //找到表单元素
    var form = document.querySelector(form);
    document.getElementById(btn).onclick = function(){

        //点击事件里我需要发一个异步请求
        //早期的ajax技术,是不支持异步上传文件的
        //在后期更新了ajax2.0版本,支持上传文件!它需要借助于一个对象,这个对象叫FormData对象
        //ajax2.0大体的步骤跟以前是一样的,区别
        
        //1. 还是要创建个请求对象
        var xhr = new XMLHttpRequest();
        //2. 还是要设置请求行
        xhr.open(post,data.php);
        //3. ajax2.0 里不需要设置请求头,它内部会自动帮你设置
        //创建一个FormData对象,并且传入一个表单
        var fm = new FormData(form);  //
        xhr.send(fm);
        xhr.onload = function(){
            console.log(xhr.responseText);
        }
    }
</script>

 

ajax2.0

标签:type   ini   response   ati   cti   ajax   NPU   pat   doc   

原文地址:https://www.cnblogs.com/yg-home/p/10257312.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!