Ajax-異步發送

目錄

方法：

xmlhttp.open(method,URL,Async)             

xmlhttp.send(string)

xmlhttp.getAllResponseHeaders()        獲取響應頭

xmlhttp.getResponseHeader('Last-Modified')        獲取指定響應頭

xmlhttp.responseText()       響應內容

xmlhttp.responseXML()       獲得xml形式的響應數據

onreadystatechange 事件:

XMLHttpRequest       對象有三個重要的屬性

ajax 的例子：

get請求：

post 請求

ajsx 提交 form 表單：

get方式：

post方式：

---

 

第一步：

創建AJAX的XMLHttpRequest對象

//創建ajax對象
var xmlhttp;
//如果是 ie7以上的 以及其他 谷歌，火狐之類的瀏覽器
if (window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
}else{
    //ie6 ie5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

第二步：

執行方法：

xmlhttp.open("GET","/demo",true);
xmlhttp.send();

第三步：

如果 async 是 true

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

 

方法：

xmlhttp.open(method,URL,Async)             

method: 請求方式 get/post

URL: 請求路徑

Async：是否異步 "true/false"

                       當Async=true的時候，請規定在響應處於 onreadystatechange 事件中的就緒狀態執行的函數

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

                    當Async=false的時候，請不要編寫 onreadystatechange 函數，把需要執行的代碼放在send() 語句後面即可；

xmlhttp.send(string)

string 僅使用與 POST請求

xmlhttp.getAllResponseHeaders()        獲取響應頭

xmlhttp.getResponseHeader('Last-Modified')        獲取指定響應頭

xmlhttp.responseText()       響應內容

只有responseText,只有當 readyState的屬性值變爲 4 的時候，該屬性纔可以使用。

xmlhttp.responseXML()       獲得xml形式的響應數據

如果是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;

 

onreadystatechange 事件:

每當 readyState 改變時，就會觸發該事件

 

XMLHttpRequest       對象有三個重要的屬性

onreadystatechange 存儲函數名，每當readyState 屬性改變時，就會調用該函數

readyState      狀態碼

               0：請求未初始化

               1：服務器連接已建立

               2：請求已接受

               3：請求處理中

               4:  請求已完成，可以獲取並使用服務器的響應

 

ajax 的例子：

get請求：

<h1 id="asd"></h1>
<button οnclick="demo()">點擊</button>


<script>
    function demo() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //code for IE7+ 其他瀏覽器
            xmlhttp = new XMLHttpRequest();
        } else {
            //code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("asd").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","/demo",true);
        xmlhttp.send();
    }
</script>

post 請求

<h1 id="asd"></h1>
<button οnclick="demo()">點擊</button>


<script>
    function demo() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //code for IE7+ 其他瀏覽器
            xmlhttp = new XMLHttpRequest();
        } else {
            //code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("asd").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("POST","/demo",true);
        xmlhttp.send("username=root&password=123");
    }
</script>

ajsx 提交 form 表單：

get：

<form action="">
    手機號:<input type="text" name="ins" id="tel">
    <input type="submit" value="a">
</form>


$("#tel").blur(function () {
        //alert("失去焦點");
        //手機號碼驗證
        $.ajax({
            type: "get",    //請求方式
            url: "/demo1",  //請求路徑
            data: "tel=" + $(this).val(),    //請求的數據
            success: function (obj) {        //請求成功調用的方法
                    $("#asd").html('<b style="color:red">' + obj + '</b>')
            }
        });
    });

post：