Ajax 初识

Ajax (Asynchronous JavaScript and XML)

  即用JavaScript执行异步网络请求，可以在无需加载整个页面的情况下能够更新部分网页的技术
 
 

• XMLHttpRequest对象

 用于在后台与服务器交换数据

- 创建对象

 var xmlHttp;
//大部分浏览器能够支持XMLHttpRequest
            if(window.XMLHttpRequest){
                xmlHttp = new XMLHttpRequest();
            }
//旧版本IE使用ActiveXObject
            else{ 
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

- 向服务器发送请求

方法：

• open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求。
  method：请求的类型；GET 或 POST
  url：文件在服务器上的位置
  async：true（异步）或 false（同步）
• send(string) ：将请求发送到服务器。
  string：仅用于 POST 请求
    

必须使用POST情况：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
    

- 获取服务器响应

responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

- onreadystatechange事件

XMLHttpRequest对象三个属性

 <div id="name"><p>今天是个好日子阿</p></div>
    <button id="btn">点击改变网页信息</button>
    <script>
        document.getElementById("btn").onclick = ()=>{

            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("name").innerHTML = xmlHttp.responseText;
                }
            };
            xmlHttp.open("GET","/code/project/ajax/test/aaa.txt",true);
            xmlHttp.send();

        };
    </script>