Ajax 简单介绍

一、ajax是什么：

( 1 ) . ajax 是异步JavaScript和XML， 英文全程是Asynchronous Javascript and XML.

( 2 ). ajax 可以通过与后台进行少量的数据交换，实现对局部网页进行异步更新，避免了要刷新这个页面的情况。

在通常情况下，如果要更新网页的数据，需要刷新整个页面，如果利用ajax，那么就可以只进行局部刷新即可。

二、AJAX是基于现有的Internet标准：

ajax 并不是一门新的技术，而是基于现有的Internet标准与技术：

( 1 ).XMLHttpRequest对象（异步的与服务器交换数据）。

( 2 ).Javascript/DOM(信息显示/交互)。

( 3 ).CSS（给数据定义样式）。

三、代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax 简单介绍</title>
</head>
<body>
    <div id="show"><h2>原来的内容</h2></div>
    <button type="button" id="bt">查看效果</button>
    <script type="text/javascript">
        function loadXMLDoc(){
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    document.getElementById("show").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open('GET', 'demo.txt',true);
            xmlhttp.send();
        }
        window.onload = function(){
            var obt = document.getElementById('bt');
            obt.onclick = function(){
                loadXMLDoc();
            }
        }
    </script>
</body>
</html>

 

posted @ 2018-04-03 09:00  renyangli  阅读(99)  评论(0)  编辑  收藏  举报