定义：异步的javascript和XML，是一种综合技术，运用XMLHttpRequest(xhr)和服务器交换数据，通过javascript局部渲染页面，从而实现页面异步的局部更新
同步与异步： 简单来说同步代码按顺序执行，会阻塞代码执行(alert)。异步不会阻塞代码。
1、创建xml 对象
var xhr = new XMLHTTPRequest()2、 打开HTTP连接
xhr.open(method,url,布尔值) 打开的方法 地址 是否异步3、 监听xhr 的变化
xhr.onreadystatechange = function(){ if(xhr.readystate===4&&xhr.status==200){ // xhr.responseText } }4、 设置头信息：
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');5、 发送数据：
xhr.send() //发送数据6、xhr.readystate中的数值
0,‘未初始化…’ 1,‘请求参数已准备，尚未发送请求…’ 2,‘已经发送请求,尚未接收响应’ 3,‘正在接受部分响应…’ 4,‘响应全部接受完毕’
7、响应内容
response 响应内容 responseText: 响应文本内容 responseXML：响应xml内容
8、status 响应码 200代表成功 9、statusText 响应的文本 Ok代表成功
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>ajax-GET</h1> <button id="btn">加载</button> <p id="pp"></p> <script type="text/javascript"> /* Ajax Asnchronous Javscript And XML 异步的xml和javascript 是一种综合技术 利用XMLHTTpequest 和后端进行数据交换 通过js */ btn.onclick=function(){ var xhr =new XMLHttpRequest(); xhr.open("GET","./be.txt",true) //打开的方法 地址 是否异步 xhr.send(); //发送出去 xhr.onreadystatechange =function(){ if(xhr.readyState===4&&xhr.status==200){ /*如果xhr的状态是第四4个状态 响应码为200*/ console.log(xhr.responseText,xhr); pp.innerHTML=xhr.responseText //输出ajax返回的文本内容 } } } </script> </body> </html>be.txt文件中是需要输出的文字：
步骤： 1、创建xml 对象 var xhr = new XMLHTTPRequest() 2、 打开HTTP连接 xhr.open(method,url,aync=true) 3、获取formData
var data = file.files[0]; // 获取文件 var fdata = new FormData(); fdata.append("file",data);4、监听上传进度
xhr.upload.onprogress =funciton(e){} e.loaded是已上传，e.total总文件大小5、 xhr.onload() 监听加载事件
xhr.responseText()6、发送
xhr.send(fdata)代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>ajax-文件上传</h1> <input type="file" id="file"> <button id="btn">文件上传</button> <script> btn.onclick =function(){ var xhr =new XMLHttpRequest(); // 建立xhr对象 xhr.open("POST","https://www.520mg.com/ajax/file.php",true) // 打开http连接 var data = file.files[0] // 获取文件 var fdata =new FormData(); fdata.append("file",data) // 获取formData 要传递的表单文件 // 监听xhr的加载事件 xhr.upload.onprogress =function(e){ // console.log(e); // 监听上传文件的进度 console.log(e.loaded,e.total,Math.round(e.loaded/e.total*100)+"%") // e。loaded是已上传，e.total总文件大小 } xhr.onload = function(){ console.log(xhr); var res = JSON.parse(xhr.responseText); // 把json字符串转换为javascript对象 if(res.error==0){ var img = document.createElement("img"); img.src ="https://www.520mg.com"+res.pic; img.width=100; // 创建一个图片 设置 src 与宽 document.body.append(img); // 插入到页面中 } } xhr.send(fdata); //发送 } </script> </body> </html>优点：
不刷新更新页面，提升用户体验异步的 提升页面的加载速度.减轻服务器压力，实现浏览器端渲染 缺点 对搜索引擎不友好jquery中ajax总共是三层
最底层$.ajax()中间层$.get() $.post()最上层$.getScript() $.getJSON() load()其中beload.html文件：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="lod"> <h1>html</h1> </div> <div class="red"> <p style="color: red;">红色</p> </div> </body> </html>