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').οnclick=function(){
//创建异步对象
var ajax=new XMLHttpRequest();
//设置请求行
ajax.open('post','./saveData.php');
//设置请求头 2.0可以不用写
//回调函数
ajax.οnlοad=function(){
console.log(ajax.responseText);
}
//设置请求主体
ajax.send();
}
</script>
3、区分ajax2.0和ajax的不一样,2.0需要借助formData来使用
<script>
document.querySelector('.ajax').οnclick=function(){
//创建异步对象
var ajax=new XMLHttpRequest();
//设置请求行
ajax.open('post','./saveData.php');
//设置请求头 2.0可以不用写
//回调函数
ajax.οnlοad=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.οnprοgress=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的应用再做一个拓展,会做一个图片预览的小功能,在不需要刷新页面的情况下更换我们的图片,这个功能在我们注册账号更换图片的时候经常使用。
一个视频(时限长一点的文件),来获取上传的进度,并渲染到页面做成一个做成一个进度条的示例