1. 程式人生 > >原生Ajax之GET、POST請求

原生Ajax之GET、POST請求

ajax可以接收什麼資訊?
答:瀏覽器可以接收的資訊ajax都可以接收,例如字串、html標籤、css樣式內容、xml內容、json內容等等。
http請求方式:post 、get 、put 、heade、delete、trace Connect 、options….

ajax 物件成員:

屬性成員:
1. responseText : 以字串形式接受服務端返回的資訊
2. readyState : ajax物件的狀態
0:ajax物件建立完畢
1:已經呼叫open方法
2:已經呼叫send方法
3:資料已經返回一部分
4:資料返回完畢

onreadystatechange : 事件屬性(對講機)
readyState屬性值發生變化的時候該事件被觸發執行,為了獲得較多的狀態細資訊,在物件建立完畢後設置該事件最多隻能感知readyState的1/2/3/4狀態值

方法成員:

open()建立一個新的http請求
send()把http請求傳送給服務端

responseText 先接受資料
readyState是: AJAX物件的維持狀態 xhr.readyState == 4;表示資料接受完畢
Onreadystatechange :事件監聽 屬於事件on 用來判斷readyState的狀態值,判斷資料是否已經接受完畢。

ajax物件.open(get/post, 請求地址);

GET請求

<script type="text/javascript">
    function f1(){
    var nm  = document.getElementById('username).value;
    //對特殊字元進行處理
    nm = encodeURLComponent(nm);
        //①建立物件
        var xhr = new XMLHttpRequest();
        //④設定事件,感知readyState狀態變化,進而獲得伺服器的返回資訊
        xhr.onreadystatechange = function
(){ if(xhr.readyState == 4){ alert(xhr.responseText); //返回資料 } //② 建立新的http請求 xhr.open('get','./03.php?id='+nm); //③ 傳送請求 xhr.send(null); } } </script>

post請求

<script type="text/javascript">
    function checkname(){
    var nm  = document.getElementById('username).value;
    //對特殊字元進行處理
    nm = encodeURLComponent(nm);
        //①建立物件
        var xhr = new XMLHttpRequest();
        //把需要傳遞的資訊轉化為字串格式
        var info = "name"+nm+"&ag=20";
        //④設定事件,感知readyState狀態變化,進而獲得伺服器的返回資訊
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                alert(xhr.responseText);  //返回資料
            }
            //② 建立新的http請求
            //post方式傳遞資料是模擬form表單方式傳遞的資料
            xhr.open('get','./04.php?color=red');
        //設定http頭協議,把傳遞的post資料轉化為xml格式
        //setRequestHeader方法必須放在open方法的後邊呼叫
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            //③ 傳送請求
            xhr.send(info);
        }
    }
</script>

ajax對快取的處理

動態程式檔案避免快取效果:
① 保證每次請求都是不同的請求 [推薦使用]
② 設定header頭禁止瀏覽器快取當前的動態頁面

方法一、請求地址後面新增隨機數 +Math.random();
方法二、 在服務氣端(php)設定響應頭
//設定header頭,禁止瀏覽器快取當前頁面
header('Cache-Control:no-cache');
header('Pragma:no-cache');
header('Expires:-1');