原生態JS操作ajax(二) —— 操作html

ajax基礎信息前面都已經介紹過了。這個就略過。

使用原生js操作ajax的話還是比較容易的，跟前面的一篇內容基本差不多。

使用步驟：

一、創建對象 XMLHTTPRequest/ActiveOBject

二、發送請求 open()、send()

三、服務器響應 responseText(onreadystatechange、readyState、status)

步驟大體就分爲這三個。

創建對象

 var xmlHttp;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }else{
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

如果是ie5、ie6的瀏覽器是不支持 XMLHttpRequest()這個對象的，需要用ActiveXObject()這個對象來實現。

上面的window.XMLHTTPRequest判斷瀏覽器是否支持XMLHttpRequest()這個功能，如果支持就創建對象不支持則創建ActiveXObject對象。

發送請求

使用open()方法來創建請求，裏面有兩個參數，第一個參數是用什麼方式來請求，一般常用的get post兩種，第二個參數就是要請求的url地址。

用send()方法來發送參數，如果請求的地址不帶參數則填null。

xmlHttp.open("GET","ceshi.php");
xmlHttp.send(null);

這兒訪問的是本地的ceshi.php，這個不管哪種編程語言，只要是能開發web的編程語言都可以實現。

服務器響

使用responseText來接收服務器響應

xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4){
        if(xmlHttp.status == 200 || xmlHttp.status==304){
            alert(xmlHttp.responseText);                   
        }
    }
}

第一個判斷 onreadystatechange 當請求被髮送到服務器時，需要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState是指存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

以下就是readyState存儲的值。

0: 請求未初始化

1: 服務器連接已建立

2: 請求已接收

3: 請求處理中

4: 請求已完成，且響應已就緒

所以在上面判斷readyState是否等於4 如果等於4的話就代表響應已經完成。

status這個是一個狀態值判斷200或者304是請求處於正常狀態。

常用status狀態值有 200(正常) 403(找不到頁面) 500(服務器異常)。

至此前臺的程序已經完畢。

接下來需要在程序文件 ceshi.php文件裏面創建內容，這兒只做個簡單的演示內容

ceshi.php

<?php
	echo "<p>ceshi</p>"
?>

上面只是用aler打印出來。如果要放到網頁頁面上，就需要大家學習DOM的內容了。