一 何为ajax
ajax（Asynchronous Javascript And Xml）不是一门新的语言，而是对现有技术的综合利用。
本质是在HTTP协议的基础上以异步的方式与服务器通信。
二 异步
指某程序执行时不会阻塞其他程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序。
其优势在于不阻塞程序的执行，从而提升整体执行效率。
对比
三 案例
7_19_AJAX.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello AJAX
</body>
</html>
使用AJAX异步处理，将7_19_AJAX.html内容显示(在现代浏览器上写AJAX主要依靠XMLHttpRequest对象)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var xhr=new XMLHttpRequest();
//设置请求行
xhr.open("POST","7_19_1AJAX.html");
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//设置请求主题]
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState=4){
console.log(xhr.responseText);
document.querySelector("#result").innerHTML = xhr.responseText;
}
};
</script>
</head>
<body>
<p id="result"></p>
</body>
</html>
响应结果
响应结果
1 说明：
1） 当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，如果已完成，再根据status === 200判断是否是一个成功的响应。
2） XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。
注意，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。
最后调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。
2 细节：
1） get/post方法区别
- get没有请求头，也就是在调用过程中不需要设置setRequestHeader（）
- 参数传递
- get传参
xhr.open("GET","7_19_1AJAX.html?name=yang&age=20&sex='男'");
xhr.send(null);
- post传参
xhr.open("POST","7_19_1AJAX.html");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("name=yang&age=20&sex='男'");
2）setRequestHeader（）
参数为何为"Content-Type","application/x-www-form-urlencoded",请参考
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000
网友评论