JS AJAX编程

2017-07-20 本文已影响0人常威爆打来福

一何为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

JS AJAX编程

猜你喜欢

热点阅读