Ajax基本概念及请求步骤（同步异步概念）

同步异步

同步

        同步代码是按照代码的顺序一步一步执行的代码；

        在执行完一个方法后，一直等待返回值，这时系统是阻塞的，只有接收到返回的值后才往下执行其他的命令

异步

        异步代码是需要消耗等待时间的代码（定时器，事件体，请求和响应）；

        执行异步方法时，不必阻塞性地等待返回值，而是正常执行后续代码，在所有同步代码执行完毕后，如果异步方法已经准备好，则再执行异步方法。

运行机制

        同步任务是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；（执行栈）

        异步任务不进入主线程，而进入等待区，只有等主线程任务执行完毕，等待区的异步任务才会进入主线程执行。

---

ajax基本概念

        英文名Asynchronous JavaScript And XML

        异步JavaScript和XML

        是指一种创建交互式网页应用的网页开发技术

         ajax无需重新加载整个网页，就能够更新局部网页

ajax请求步骤

        创建xhr对象

                let xhr=new XMLHttpRequest()

        调用open方法

                xhr.open("请求方式get/post","服务器文件地址[get方式的请求参数]",true)

        post方式的请求头（get方式无需请求头）

                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        调用send方法

                xhr.send([post方式的请求参数])

        等待返回

                xhr.onreadystatechange=function(){

                if(xhr.status==200&&xhr.readyState==4){

                fun(xhr.responseText)

                }

                function fun(resText){

                console.log(resText)

                }

Ajax的作用

        以前的浏览器负责显示和发请求接响应两件事，而浏览器同一时刻只能做一件事，ajax可以让浏览器只负责显示，发送请求和接收响应由ajax完成，两者各负其责，用户永远不会看到浏览器空白

        更自然流畅的用户体验，对用户的操作及时响应

        在不中断用户操作的情况下与服务器进行通信

        通过局部更新降低网络流量，提高网络的使用效率

Ajax的封装

<script type="text/javascript">
	function ajax(type, url, data, isA, fun) {
		type = type.toLowerCase();
		let xhr = new XMLHttpRequest();
		if (type == "get") {
			let urlurl = url;
			if (data != "") {
				urlurl += "?" + data;
			}
			xhr.open(type, urlurl, isA);
			xhr.send();
		} else {
			xhr.open(type, url, isA);
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			xhr.send(data)
		}
		xhr.onreadystatechange = function() {
			if (xhr.status == 200 && xhr.readyState == 4) {
				fun(xhr.responseText);
			}
		}
	}

	function fun(res) {
		console.log(res);
	}
	ajax("get", "adadfs.php", "name=123", true, fun);
</script>