ajax的基本介绍

Ajax:(Asynchronous JavaScript +XML)
可实现异步刷新（不刷新网页的情况下更新服务器最新的数据）

实现步骤：
1.创建XMLHttpRequest核心对象
var xhr=new XMLHttpRequest();
2.准备请求
xhr.open(); 需要放入三个参数

        ①请求类型    GET/POST
        ②请求的路径 （请求的地址：如果是GET类型通过“？”在后面拼接参数）
        ③是否异步    true或false,默认异步是true

3.发送请求
xhr.send(); 表示传递于后台数据的行为，需要放入一个参数

①GET      参数为null
②POST     无参数时放入null，有参数时设置参数（数据）如uname=zhangsan&upwd=123

4.判断响应结果，解析响应数据

①若为同步请求（false）
		xhr.status （响应状态）
    		404：请求路径不正确
    		500：服务器内部异常
    		200：成功
		xhr.respondText (响应结果)
②若为异步请求（true）
	首先需要判断是否处理完毕，（异步是多个步骤同时启动，不能确定某个步骤何时完成，而同步是一个接一个完成，所以不需要判断）处理完毕后再解析数据。监听处理请求的状态码是readyState,需要绑定监听事件 onreadystatechange来得到响应状态.
	当状态码为4时，表示数据已经完全响应
		xhr.status (响应状态)
		 	404 请求路径不正确
		 	500：服务器内部异常
		 	200：成功
		 xhr.responseText （响应结果）

 Ex. 		GET请求异步
    <script type="text/javascript">
    	var xhr=new XMLHttpRequest();
    	
    	xhr.open("GET","js/data.json",true);
        xhr.send(null);
    	//绑定响应事件
    	xhr.onreadystatechange=function(){
    		console.log(xhr.readyState);
    		if(xhr.readyState==4){
    			if(xhr.status==200){
    				console.log(xhr.respondText);
    			}else{
    				alert(“错误状态码：”+xhr.status+",错误原因"+xhr.statusText);
    			}
    		}
    	};
		GET请求同步(同步不需要监听)
		var xhr=new XMLHttpRequest();
		xhr.open("GET","js/data.json",false);
		xhr.send(null);
		if(xhr.status==200){
			console.log(xhr.respondText);
		};
		
		POST请求同步
		var xhr=new XMLHttpRequest();
		xhr.open("POST","js/data.json",false);
		//post请求需要要先模拟表单
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded);
		xhr.send("uname=zhangsan");
		if(xhr.status==200){
			console.log(xhr.responseText);
		}
		
		POST异步
			var xhr=new XMLHttpRequest();
		xhr.open("POST","js/data.json",true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded);
		xhr.send("uname=zhangsan");
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				if(xhr.status==200){
					console.log(xhr.respondText);
				}
			}
		}

通过Jquery使用Ajax
多种封装调用形式：

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
$.ajax({
		type:"get",
		url:"js/data.json",
		dataType:"json",
		success:function(result){
			console.log(result);
		}
});

$.get("js/data.json",{},function(data){
		console.log(data);
});

$.post("js/data.json",{},function(data){
		console.log(data);
});

$.getJSON("js/data.json",{},function(data){
		console.log(data);
});
</script>