一、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、文件上传
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);
}
参考阅读
您阅读本篇文章共花了：
发表评论