JS AJAX编程

一 何为ajax
ajax（Asynchronous Javascript And Xml）不是一门新的语言，而是对现有技术的综合利用。
本质是在HTTP协议的基础上以异步的方式与服务器通信。
二 异步
指某程序执行时不会阻塞其他程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序。
其优势在于不阻塞程序的执行，从而提升整体执行效率。

对比

三 案例
7_19_AJAX.html

    
    


Hello AJAX

使用AJAX异步处理，将7_19_AJAX.html内容显示(在现代浏览器上写AJAX主要依靠XMLHttpRequest对象)

响应结果

响应结果

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