HTML笔记05------AJAX

Posted 2020-10-31 meng-blog

AJAX初探01

AJAX概念

概念：即"Asynchronous javascript And XML"
通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。（传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页页面或者使用iframe。）

AJAX写法
浏览器兼容

if(window.ActiveXObject){
           xmlHttp = new ActiveXObject("Micr0soft.XMLHTTP");
       }else if(window.XMLHttpRequest){
           xmlHttp = new XMLHttpRequest();
       }

状态码
readyState
存在XMLHTTPRequest的状态

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

---

<button onclick="update()">数据更新</button>
<br/>
    <div id="dataArea">
   展示服务器返回的数据
    </div>

<script>
   function update() {
       var xmlHttp;
       if(window.ActiveXObject){
           xmlHttp = new ActiveXObject ("Micr0soft.XMLHTTP");//IE678 opera OLD 老旧浏览器
       }else if(window.XMLHttpRequest){
           xmlHttp = new XMLHttpRequest(); // 新浏览器
       }
       xmlHttp.open("","");//打开和服务器的链接
       // xmlHttp.open("获取方式（get / post）","文件名");
       xmlHttp.send("null");//send动作才是真正的给服务器按照上面open的url发送请求
       //  on (当) ready (准备) state (状态) change (改变)
       xmlHttp.onreadystatechange = function () {
           if(xmlHttp.readyState === 4&& xmlHttp.status === 2){
               document.getElementById("dateArea").innerhtml = xmlHttp.responseText;
           }
       }
   }

---