AJAX（Asynchronous Javascript And XML）

　　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);																								
	}
});