后端学前端之AJAX

第一节认识AJAX

1.概念

AJAX,Asynchronous Javascript And Xml,异步的js和xml,AJAX不是新的编程语言,而是一种使用现有标准的新方法,AJAX是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的艺术.

2.实现过程

获取XMLHttpRequest对象,是AJAX的核心
监听onreadystatechange事件
准备要发送的请求
发送请求

第二节 JavaScript实现AJAX

1.引入AJAX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*给按钮绑定点击事件*/
            document.getElementById("btn").onclick = function () {
                //创建XMLHttpRequest对象,是AJAX的核心对象,所有操作都通过他进行
                var xmlHttp;
                if (window.XMLHttpRequest) {
                    //主流浏览器
                    xmlHttp = new XMLHttpRequest();
                } else {
                    //IE5,IE6
                    xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
                }
                //监听readyState的变化
                xmlHttp.onreadystatechange = function () {
                    alert(xmlHttp.readyState);
                    if (xmlHttp.readyState == 4) {
                        if (xmlHttp.status == 200 || xmlHttp.status == 302) {
                            //响应成功,可以取值了
                            document.getElementById('box').innerText = xmlHttp.responseText;
                        }
                    }
                };
                //准备要发送的请求,需要调用open方法
                xmlHttp.open('get', '/msg2', true);
                //发送请求,需要调用send方法
                xmlHttp.send(null);
            };
        };
    </script>
</head>
<body>
<div id="box"></div>
<button id="btn">get message</button>
<br>
<script>
    document.write(Math.random());
</script>
</body>
</html>