ajax2.0的理解与应用实例

1、通过一些代码来解释一下ajax2.0版本的运用：

<body>
//这个form表单的作用就是让我们的ajax2.0能够自动给获取数据
     <form action="">
         <input type="text" name='userName' placeholder="用户名">
         <input type="password" name='userPass' placeholder="密码">
         <br>
         <input type="submit">
     </form>
     <input type="button" value='ajax2.0'>
 </body>

2、js原生部分，在如下代码中可以看出步骤跟ajax是一样的

<!-- js原生的写法    -->
 <script>
     document.querySelector('.ajax').onclick=function(){
         //创建异步对象
         var ajax=new XMLHttpRequest();
         //设置请求行
         ajax.open('post','./saveData.php');
         //设置请求头 2.0可以不用写
         //回调函数
         ajax.onload=function(){
             console.log(ajax.responseText);
         }
         //设置请求主体
         ajax.send();
     }
 </script>

3、区分ajax2.0和ajax的不一样，2.0需要借助formData来使用

<script>
     document.querySelector('.ajax').onclick=function(){
         //创建异步对象
         var ajax=new XMLHttpRequest();
         //设置请求行
         ajax.open('post','./saveData.php');
         //设置请求头 2.0可以不用写
         //回调函数
         ajax.onload=function(){
             console.log(ajax.responseText);
         }
         //ajax2.0需要结合一个新的对象来使用
         //formData
         //能够自动帮助我们获取表单中有name属性的数据
         var sendData=new FormData(document.querySelector('form'));

         //还可以自己去append
         sendData.append('ssd','固态硬盘');
         //设置请求主体
         ajax.send(sendData);
     }
 </script>

4、创建一个saveData.php，将传入的数据保存,不用弄得很复杂

<?php 
var_dump($_REQUEST);
?>

5、然后输入数据，我们开看一下输出的结果，没有报错，服务器也拿到了数据

6、如果是想要拿到文件的话，可以设置表单的类型为file，saveData.php的内容设置为获取文件

<?php
var_dump($_FILES);
//如果要将传入的图片保存起来的话，可以写如下代码：
move_uploaded_file($_FILES['file']['temp_name'],'./file/'.$_FILES['file']['name']);

?>

 <input type="file" name='file'>

7、ajax2.0还能用来显示文件上传进度

这里通过随机上传一个视频（时限长一点的文件都可以），来获取上传的进度，并渲染到页面做成一个做成一个进度条的示例

 <div class="progress">
     <div class="step"></div>
 </div>

<sytle>
        .progress{
            width:100%;
            height:20px;
            border:1px solid #000;
            border-radius:10px;
            overflow:hidden;
            positon:relative;
         }
         .step{
             height:100%;
             width:0%;
             background:linear-gradient(to right,skyblue,hotpink);
         }
         span{
             position:absolute;
             top:0;
             left:50%;
             transform:translateX(-50%);
            }
     </sytle>

<script>
    ajax.upload.onprogress=function(event){
        var percent=event.loaded/event.total*100+'%';
        Console.log(percent);
        document.querySelector('.step').style.width=percent;
        document.querySelector('span').innerHTML=Math.floor(event.loaded/event.total*100)+'%';
    }
</script>

上述代码书写完毕后将得到如下的效果：

总结：这只是ajax2.0的其中的一个小应用，为了方便大家理解，将会在下一篇对ajax2.0的应用再做一个拓展，会做一个图片预览的小功能，在不需要刷新页面的情况下更换我们的图片，这个功能在我们注册账号更换图片的时候经常使用。

一个视频（时限长一点的文件），来获取上传的进度，并渲染到页面做成一个做成一个进度条的示例

ajax2.0的理解与应用实例

猜你喜欢