javascript基础之十五（ajax）

最新推荐文章于 2024-09-29 16:53:02 发布

原创最新推荐文章于 2024-09-29 16:53:02 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种利用AJAX技术实现网页局部刷新的方法。通过JavaScript创建XMLHttpRequest对象，并使用GET方式请求服务器上的数据，当请求成功并收到响应时，使用JavaScript动态更新页面指定区域的内容。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>15-ajax</title>
</head>
<script>
//AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
	//创建XMLHttpRequest用于发送接收AJAX请求
	var request=new XMLHttpRequest();
	//设置URL
	request.open("GET","AjaxDate.html",true);
	//注册回调函数
	request.onreadystatechange=function(){
		//值为4表示服务器响应请求，数据返回
		if(request.readyState===4 && request.status===2000){
			var result =document.getElementById("content");
			result.innerHTML=request.responseText;
		};
	};
	//发送请求
	//request.send();

</script>

<body>
        <div id="test"></div>

        <script type="text/javascript">
            function getHTTPObject(){
                if(typeof XMLHttpRequest == "undefined"){
                    XMLHttpRequest = function(){
                        try{
                            return new ActiveXObject("Microsoft.XMLHTTP");
                        }catch(e){}
                        return false;
                    }
                }
                return new XMLHttpRequest();
            }

            function getNewContent(){
                var request = getHTTPObject();
                if(request){
                    request.open("GET","test.txt",true);
                    request.onreadystatechange = function(){
                        if(request.readyState == 4){
                            console.log("Response Received!");
                            var para = document.createElement("p");
                            var txt  = document.createTextNode(request.responseText);
                            para.appendChild(txt);
                            document.getElementById("test").appendChild(para);
                        }
                    };
                    request.send();
                }else{
                    console.log("Browser does not support XMLHttpRequest");
                }
                console.log("Function Done!");
            }

            function addLoadEvent(func){
                var oldonload = window.onload;
                if(typeof window.onload != 'function'){
                    window.onload = func;
                }else{
                    window.onload = function(){
                        oldonload();
                        func();
                    }
                }
            }

            addLoadEvent(getNewContent);
        </script>
    </body>

</html>