Ajax基础

A(Asynchronous)J(JavaScript)A(And)X(XML)

[ˈeˌdʒæks]

异步的JavaScript和XML

---

• Ajax最大的优点就是在   不重新加载整个网页   的情况下，与服务器  交换数据  并  更新部分网页内容。

不使用Ajax的传统网页，如果需要更新内容，必须重新载入整个页面

• 只需要浏览器允许JavaScript即可，不需要其他插件或技术。

---

XMLHttpRequest对象时Ajax的基础，所有浏览器都支持  XMLHttpRequest对象  (Chrome,Firefox,Edge....IE just go die!)

使用：

       1.创建XMLHttpRequest对象。

                   var xtr = new XMLHttpRequest();

       2.向服务器发送请求：[三个方法]

xtr.open("method","url",asynchronous);
xtr.setRequestHeader('X-test','test');
xtr.send([String]);    //String 可选，仅用于POST请求

       3.服务器响应，如需获得服务器的响应，应使用XMLHttpRequest对象的 responseText 或 responseXML属性：

=xhr.responseText;

    

---

[三个属性]:

  

    当请求 被发送到 服务器时，我们需要执行一些基于响应的任务。
onreadystatechange = function(){
    .....//
}
    该属性用于存储函数(或函数名)，每当readyState属性改变时，就会调用该方法。

readyState //存有XMLHttpRequest对象的状态。从0 到 4；
    0：请求未初始化
    1：服务器连接已建立
    2：请求已接收
    3：请求处理中
    4：请求已完成，且响应已就绪

status   
    200："OK"
    404:未找到页面

-----------------------------
当 xhr.readyState==4&&xhr.status==200    时，表示响应已就绪

 

实例：
<script>
function loadXMLDoc() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET","/sg/text",true);
            xmlhttp.send();


            xmlhttp.onreadystatechange=function (ev) {
                if(xmlhttp.readyState==4&&xmlhttp.status==200){
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            
        }

</script>