Ajax (异步的 JavaScript 和 XML)

1. Ajax Introduce

• 一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换， 可以使网页实现异步更新
• 基于 XMLHttpRequest() 对象
• 运用 XHTML+CSS 来表达资讯
• 运用 JavaScript 操作 DOM（Document Object Model）来执行动态效果；
• 运用 XML 和 XSLT 操作资料;
• 运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换；
• 局部动态更新
• 注意： AJAX 与 Flash、Silverlight 和 Java Applet 等 RIA 技术是有区分的 实例：从Cnode社区请求数据

    <script>
            //实例对象
            var xmlhttp = new XMLHttpRequest();
            
            //异步回调,成功更新dom
            xmlhttp.onreadystatechange => (){
                if(xmlhttp.status == 200 && xmlreadystate = 4)
                {
                    document.getElementById("ID").innerHTML = xmlhttp.responseText;   
                }
            }
            
            //初始化参数, (方法, url, 同/异步请求)
            xmlhttp.open('get','https://cnode.org/api/v1/topics',true);
            
            //发送,应用post方法时，send()带参数
            xml.send();
    </script>

2. get 与 post 请求

• get 传送数据少，受URL限制，且不安全，form提交数据集须为ascii，但执行效率高
• post 传送多，数据传送放在请求体中，较安全，支持整个ISO10646字符集

实例：简单的数据提交请求

    ... //与get相同
    
    /*  header: 规定头的名称  value: 规定头的值 */
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  
    xmlhttp.send("fname=Henry&lname=Ford");

3. XHR 响应

• responseText 获得字符串形式的响应数据
• responseXML 获得 XML 形式的响应数据 XML转化方法：

    xmlDoc=xmlhttp.responseXML;   
    
    txt="";
    
    x=xmlDoc.getElementsByTagName("ARTIST");
    
    for (i=0 ;i < x.length; i++)

        txt=txt + x[i].childNodes[0].nodeValue + "<br>";  //追加子节点方式

    document.getElementById("myDiv").innerHTML=txt;

4. onreadystatechange 回调

• readyState 改变时触发
• readyState 属性存有 XMLHttpRequest 的状态信息
• ... 参见： www.runoob.com/ajax/ajax-x…

5. 小结

    /* 实例化 */
    var xmlhttp = new XMLHttpRequest()
    
    /* hook */
    xmlhttp.onreadystate =>(){
        if(xmlhttp.status == 4 && xmlhttp.readystate == 200)
            document.getElementById('ID').innerHTML = xmlhttp.responseText;
    }
    
    /* get */
    xmlhttp.open('get','url',ture)
    
    xmlhttp.send()    
    
    /* post */
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  
    xmlhttp.send("fname=Henry&lname=Ford");