ajax初步学习发送get请求

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //ajax问题
        //1 ajax请求缓存 解决 1、在url后加随机数  2、xmlhttp.setRequestHeader("If-Modified-Since", "0");
        //2 请求的路径中不要有中文
        //3 判断服务器是否执行成功(xmlhttp.status == 200)
        //4 区分大小写

        //1 创建对象
        var xmlhttp = createXHR();
        function createXHR() {
            var xhr;
            if (XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }

        function btn_click() {
            document.getElementById("d").innerHTML = "正在加载...";
           
            //2 初始化  第三个参数 true 异步请求    false 同步请求
            xmlhttp.open("get", "01-get.ashx", true);
            xmlhttp.setRequestHeader("If-Modified-Since", "0");
            //3 注册事件
            xmlhttp.onreadystatechange = function () {
                //判断XMLHttpRequest的状态readyState ==4 接收完成
                //
                if (xmlhttp.readyState == 4) {
                    //判断http的响应码
                    if (xmlhttp.status == 200) {
                        var s = xmlhttp.responseText;
                        document.getElementById("d").innerHTML = s;
                    } else {
                        document.getElementById("d").innerHTML = "服务器内部错误";
                    }
                }
            }
            //4 发送请求
            xmlhttp.send();
        }
    </script>
</head>
<body>
<input type="button" value="get" id="btnGet" onclick="btn_click()" />
    <div id="d"></div>
    
</body>
</html>

posted on 2013-12-12 13:11  月&&生  阅读(228)  评论(0编辑  收藏  举报