AJAX

AJAX = 异步 JavaScript 和 XML

ajax是一种用于创建快速动态网页的技术，

可以在不重新加载整个网页的情况下，对网页的局部进行更新。

 

创建 XMLHttpRequest对象

var xhr = new XMLHttpRequest(); // 不支持IE5 IE6；

var xhr = new ActiveXObject('Microsoft.XMLHTTP')  // 支持IE5 IE6写发；

 

向服务器发送请求

    使用XMLHttpRequest 对象的open() 和 send() 方法；

        open(method,url,async)

               规定了请求的类型，url ，以及是否异步处理请求。

                      method:请求的类型；GET 或 POST

                      url: 文件的服务器上的位置

                       asy: true（异步）或 false（同步）

       send(string) 将请求发送到服务器

              string:仅用于POST请求    

 

GET 与 POST

与POST相比，GET 更简单也更快，并且在大部分情况下都能用。

但是在下列情况中，使用POST请求；

    无法使用缓存文件（更新服务器上的文件或数据）

    向服务器发送大量数据（POST 没有数据量限制）

    发送包含未知字符串的用户输入时，post 比 get 更加稳定可靠

 

服务器响应

    如需获得来自服务器的响应，使用XMLHttpRequest对象的responeText 或 responseXML

    responseText 获取字符串形式的响应数据

    responseXML 获得XML形式的响应数据

 

onreadstatechange 事件

    当请求被发送到服务器时，需要执行一些基于响应的任务。

    每当readState改变时，就会触发onreadystatechange事件。

    readyState 属性存有XMLHttpRequest的状态信息，从0到4；

        0：请求未初始化

        1：服务器链接建立

        2：请求已接受

        3：请求处理中

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

    state

         200:'ok'

         404:未找到页面

<script>
    function loadXMLDoc(){
        var xmlhttp;
        if(window.XMLHttpRequest){
               xmlhttp = new XMLHttpRequest();
    }else{
               xmlhttp = new ActiveXOBject('MIcrosoft.XLMHTTP');
   }
   xmlhttp.onreadystatechange = function(){
              document.getElementById('myDiv').innerHTML = xmlhttp.respondeText;
}
xmlhttp.open('GET','/try/ajax/ajax_info.txt',true)
xmlhttp.send();
}
<div id = 'myDiv'><h2>使用ajax修改文本内容</h2></div>
<button type  = 'button' onclick = 'loadXMLDoc()'>修改的内容</button>
</script>