Ajax异步交互

一、简介

　　Ajax（Asynchronous JavaScript and XML）。一般都写为Ajax。

Ajax是与服务器交换数组并更新部分网页的艺术。最初的使用时2005中Google Suggest 搜索框输入时，返回搜索建议。

　　WEB的运行原理：一次HTTP请求对应一个页面。如果要让用户留在当前页面中，同时发出新的HTTP请求。就必须用JavaScript发送这个请求。接收到数据再用Javascript更新页面。用户就感觉自己仍然停留在当前页面，但数据却可以不断的更新。

二、创建方法

　　通过XMLHttpRequest对象，开发人员可以在应用程序的任何地方，初始化Http请求。

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

三、示例、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>shuiguo</title>
    </head>
    <body>
        <div>
            <button>APPLE</button> 
            <button>CHERRIES</button>
            <button>BANANAS</button>
        </div>
        <div id="target">
            Press a button
        </div>
        <script>
            let button = document.getElementsByTagName("button");//获取按钮
            for (let i = 0; i < button.length; i++){
                button[i].onclick = handleButtonPress; //遍历按钮
            }
            function handleButtonPress(e) {
                let httpRequest = new XMLHttpRequest(); //创建XMLHttpRequest对象
                httpRequest.onreadystatechange = handleResponse; //onreadystatechange的值为；
                httpRequest.open("GET", e.target.innerHTML+ ".html",true);//获取交互数据就是按钮的HTML文件
                httpRequest.send();
            }
            function handleResponse(e) {
                if (e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200){//当请求触发
                    document.getElementById("target").innerHTML = e.target.responseText;//返回给前台的数据
                }
            }
            
        </script>
    </body>
</html>

交互文件的格式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>香蕉</title>
        <style> p{
            color: red;
        }</style>
    </head>
    <body>
        <p> 
            香蕉 ；
        </p>
    </body>
</html>