今天，我还是风尚，一个有梦想的咸鱼程序员
今天我们还来和jQuery来靠近乎
不过今天，来了个重头戏
-------Ajax-------
什么是Ajax？
百度词条：Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
我总结：异步JavaScript和XML
ajax原理：
- 运用 XMLHttpRequest 异步交换
- 服务器上的数据 通常是 JSON 格式保存文本数据；
- 运行 javascript 来操作渲染dom
关于Ajax的优势
由于 Ajax 包含众多特性，优势与不足也非常明显。
- 不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；
- 用户体验极佳（不刷新页面即可获取可更新的数据）；
- 提升 Web 程序的性能（在传递数据方面做到按需加载，不必整体提交）；
- 减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；
-
它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验
万事都有两面性：Ajax 的不足：
- 前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会几率前后页面）；
- 搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；
定义和用法
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。
异步是什么？
使用 Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步有什么区别呢？
我们普通的 Web 程序开发基本都是同步的，意为执行一段程序才能执行下一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务，感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。
Ajax 也可以使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条执行，会让 Web 页面出现假死状态，所以，一般 Ajax 大部分采用异步模式。
使用Ajax
建一个XMLHttpRequest
1，创建xhr
var xhr=new XMLHttpRequest();2, 打开链接 open （method,url,asny);
xhr.open("get","url?params1=some¶ms2=somm2",true);3, 发送 send （"params1=some¶ms2=somm2"）;
xhr.send("name="+uname.value);//发送数据
// post 请求需要发一个header
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');4,监听 readyState status
xhr.onreadystatechange=function(){//当XHR 状态方式改变时
if(xhr.status==200&&xhr.readyState==4){
//如果http的状态码200(请求成功) xhr的状态是4（成功状态）
}
}readyState
0,'未初始化....' 1,'请求参数已准备，尚未发送请求...' 2,'已经发送请求,尚未接收响应' 3,'正在接受部分响应.....' 4,'响应全部接受完毕'
响应
status 响应码 200 成功 statusText 响应状态 ok 成功 responseText响应题文本形式
XMLHTTPRequest案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<button>获取文件</button>
<script>
var btn = document.querySelector("button");
btn.onclick=function(){
//01 声明一个xhr对象
var xhr =new XMLHttpRequest();
//02 打开链接地址
xhr.open("GET", "./text.txt",true);
//03 发送
xhr.send();
//04 监听事件
// readyState进行状态 为4的时候打开完毕
// status 服务的响应码 200 时候是响应成功
// responseText服务的返回数据
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText,xhr);
document.querySelector("body")
.append(xhr.responseText)
}
}
}
</script>
</body>
</html>post方式
post 需要设置xhr请求头 url编码
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var xhr = new XMLHttpRequest();
xhr.open("post","http://520mg.com/ajax/echo.php");
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("name=mumu&age=18");
文件上传
获取文件 var fileObj = document.getElementById("file").files[0];
文字上传需要创建一个 表单数据对象var form = new FormData()form.append("file",fileObj);
onload 加载完毕回调函数 注意xhr.send(form)要最后调用
function UploadFile(){
var fileObj = document.getElementById("file").files[0];
var url ="https://www.520mg.com/ajax/file.php";
var form = new FormData();
form.append("file",fileObj);
var xhr = new XMLHttpRequest();
xhr.open("post",url,true);
xhr.onload = function(){
console.log(xhr);
}
xhr.send(form);
}上传进度跟踪
XMLHttpRequest对象，传送数据的时候，有一个progress事件，用来返回进度信息。
它分成上传和下载两种情况
１）下载的progress事件属于XMLHttpRequest对象
２）上传的progress事件属于XMLHttpRequest.upload对象。
xhr.upload.onprogress =function(e){
console.log(e);
console.log(e.loaded,e.total,Math.round(e.loaded/e.total*100)+"%")
}
jq上传进度
$.ajax({
type: "POST", // 数据提交类型
url: "https://www.520mg.com/ajax/file.php", // 发送地址
data: formData, //发送数据
async: true, // 是否异步
processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
contentType: false, //需设置为false,因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
xhr:function(){
var xhr = new XMLHttpRequest();
if(xhr.upload){
xhr.upload.addEventListener("progress",function(e){
console.log(e);
})
}
return xhr;
}
});
今日份分享到这里结束了
我还是风尚，一个有梦想的咸鱼程序员！让我们一起努力，共创明天的辉煌！喜欢就给个小关注啊，
关注风尚不迷路！
记得一键三连，禁止白嫖