AJAX，async javascript and XML(异步JavaScript和XML)。
AJAX 是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。
在没有JQuery之前，我们一般的代码都像下面：
<script type="text/javascript">
window.onload=function(){
document.getElementByID("btnGetUser").onclick=function{
//1、创建异步对象
var xhr=new XMLHttpRequest();
//2、为异步对象设置请求方式
xhr.open("get","getUser.php",true);
//3、关闭使用浏览器缓存
xhr.setRequestHeader("If-Modified-Since",0);
//4、为异步对象的onreadystatechange事件绑定方法（添加回调函数）
xhr.onreadystatechange=function(){
//如果xhr的准备状态等于4，说明已经从服务器获得了请求报文，响应报文里的状态码是200，说明服务器运行正常
if(xhr.readyState==4&&xhr.status==200){
//接收返回值
var res=xhr.responseText;
//更新页面
document.getElementByID("divUser").innerHTML=res
}
}
5、发送请求
xhr.send(null);
}
};
</script>在JQuery出现后，我们用的多的往往是下面的形式：
$.ajax({
type：get/post,
url:请求地址,
async:是否异步(默认是true)，默认true表示异步,
data:发送到服务器的数据,
datatype:预期服务器返回的数据类型,
contentType:请求头,
success:function(data){//请求成功时
},
error:function(data){//请求失败时
}
})一般设置四个参数即可：type、url、data、success。
实际上，JQuery中总封装了四种使用样式：
$.ajax({
type:"get",
url:"data.txt",
success:function(data){
console.log(data);
// 将字符串转换为JSON格式
let obj=JSON.parse(data);
console.log(obj);
}
});
$.get("data.txt",function(data){
console.log(JSON.parse(data));
});
$.post("data.txt",function(data){
console.log(JSON.parse(data));
});
$.getJSON("data.json",function(data){
console.log(data);
});只是我们一般习惯了使用$.ajax这样的方式，也可以根据需要选择相应的方式。
向后台传递参数，我们一般传递的是JSON格式的对象，也可以使用form封装方式：
let wordFile = document.getElementById('readFile');
const fd = new FormData();//FormData构造器接收的是一个form的DOM对象
fd.append("wordFile",wordFile.files[0]);//Word文件数据
fd.append("c01",$('#Dc01').val());//文件名
fd.append("c02",fileExt);//文件后缀
fd.append("c03",$('#Dc03').val());//选择分类
fd.append("c04",$('#Dc04').val());//上传人
fd.append("c05",$('#Dc05').val());//上传时间
fd.append("c07",$('#Dc07').val());//说明
fd.append("c08",$('#Dc08').val());//说明
fd.append("OP","新增");//操作类型
$.ajax({
url: 'ZTBHTDocxFile.php',
type: "POST",
data: fd,
dataType: "JSON",
async: false,
processData: false,//设置为false,JQuery则不对数据进行序列化
contentType: false,//设置为false，JQuery则不设Content-Type请求头
beforeSend: function(xhr){
},
complete: function(xhr,status){
},
error: function(xhr,status,error){
console.log("xhr:"+xhr);
console.log("status:"+status);
console.log("error:"+Error);
},
success: function(result){
//刷新父窗口表格
parent.layui.$(".layui-laypage-btn")[0].click();
// 关闭弹出层
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
}
});
