一、ajax
1、什么是ajax?
ajax是异步javascript与xml,它是多种技术一个集合。可以无刷新状态更新页面。
2、ajax的优缺点:
优点:
1.不需要插件支持(一般浏览器且默认开启 JavaScript 即可);
2.用户体验极佳(不刷新页面即可获取可更新的数据);
3.提升 Web 程序的性能(在传递数据方面做到按需放松,不必整体提交);
4.减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);
缺点:
1.不同版本的浏览器对 XMLHttpRequest 对象支持度不足(比如 IE5 之前);
2.前进、后退的功能被破坏(因为 Ajax 永远在当前页,不会几率前后页面);
3.搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容);
4.开发调试工具缺乏(相对于其他语言的工具集来说,JS 或 Ajax 调试开发少的可怜)
3.同步与异步
使用 Ajax 最关键的地方,就是实现异步请求、接受响应及执行回调
同步操作:同的事情按照一定的顺序进行执行,后一件事情必须等到前一个执行完成才能执行,否则会处于等待状态。
同一个模块中的代码是按照程序结构顺序执行的,就是后一行代码必须等待前一行代码执行完成才能执行,否则处于阻塞状态。
异步操作:不同的事情在执行过程中,同时执行。不分前后顺序在程序代码执行过程中,后一行代码不会等待前一行代码执行完成再去执行,而是直接执行,表现出不同行的代码同时执行的效果。
二、实现原生js操作ajax
1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2、与服务器建立连接
//建立连接
xhr.open(参数1,参数2,参数)
//参数1:请求的方式 post get
//参数2:url地址
//参数3:是否异步 布尔值,默认为true,若为false,则为同步;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//设置请求头信息 post方式
3、发送请求
xhr.send(str);
4、监测状态变化
xhr.onreadystatechange = function () {
// console.log(xhr.readyState);
//0-未初始化,即尚未调用 open。
//1-初始化,即尚未调用 send。
//2-发送数据,即已经调用 send。
//3-数据传送中。
//4-完成。
if (xhr.readyState === 4 && xhr.status === 200) {
// console.log(xhr.responseText); //获得字符串的响应数据
//responseXML //获得 XML 形式的响应数据
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
二、FormData 类型
1、FormData主要用途
便于表单序列化
2、创建
var fdata = new FormData()
3、追加数据
fdata.append(key , val)
4、获取数据
fdata.get(key)
5、文件上传
<input type="file" name="file" class="myfile">
function uploadfile(){
var myfile = document.querySelector(".myfile");
var fdata = new FormData();
fdata.append(“file" , myfile.files[0]);//把上传的图片追加到formdata里
var xhr = new XMLHttpRequest();
xhr.open("post" , url , true);
//上传进度
xhr.upload.onprogress = function(ev){
// console.log(ev);//进度事件对象
// ev.loaded;//已经上传的文件大小
// ev.total;//上传总文件大小
var v = (ev.loaded / ev.total) * 100;
prog.value = v; //修改进度条的进度
}
xhr.onload = function(){
xhr.responseText;
//var msg = JSON.parse(xhr.responseText);
// console.log(msg.pic);//上传图片的路径
//var img = document.createElement("img"); //创建img标签对象
//img.src = msg.pic; //给img设置属性src
//img.onload = function () {
//div.appendChild(img); //把img追加到div内部
}
xhr.send(fdata);
}