1. 程式人生 > >第7章藝術程式設計Ajax的學習

第7章藝術程式設計Ajax的學習

終於學到Ajax以前一直沒接觸到一直以為很NB,對這些內容我基本上是個小白中的小白哎,繼續加油

Ajax可以做到只更新頁面的一下部分,其他部分不需要重新載入

下面就是根據書上的內容所寫

HTML

<div id="new"></div>

js

addLoadEvent


			function addLoadEvent(func){
				var oldonload = window.onload;
				if(typeof window.onload != "function" ){
					window.onload = func;
				}else{
					window.onload  = function(){
						oldonload();
						func();
					}
				}
			}

getHTTPObject

function getHTTPObject(){
        if(typeof XMLHttpRequest == "undefined")
        XMLhttpRequest = function(){
            try{
                return new ActiveXObject("Msml2.XMLHTTP.6.0");
            }catch(e){}
            try{
                return new ActiveXObject("Msml2.XMLHTTP.3.0");
            }catch(e){}
            try{
                return new ActiveXObject("Msml2.XMLHTTP");
            }catch(e){}
            return false;//如果瀏覽器不支援XMLHttpRequest就會返回false
        }   
        return new XMLHttpRequest();
    }

getNewContent

function getNewContent(){
    var request = getHttpObject();//建立request物件
    if(request){
        request.open("GET","example.txt",true);//get型別、url、是否非同步

        request.onreadystatechange = function(){//伺服器返回響應時觸發
            /*
                function要在onreadystatechange被觸發時執行,而不是立即執行,所以不要加()
                request.onreadystatechange = doSomething;相當於是在傳遞指標而不是在加(),是在傳遞最後函式的值
            */
            if(request.readyState == 4){//返回的型別
                /*
                    readystate == 0 :未初始化
                    readystate == 1 :正在載入
                    readystate == 2 :載入成功
                    readystate == 3 :正在互動
                    readystate == 4 :完成
                */
                 if(request.status == 200){ //判斷是否一切準備就緒
                var para = document.createElement("p");
                var txt = document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementById("new").appendChild(para);      
                //document.getElementById("new").innerHTML = request.responseText;     
            }
           }
        };
        request.send();//傳送請求GET請求
        //request.send(需要傳的資料);傳送請求POST請求
    }else{
        alert("Sorry,your browser dosen\'t support XMLHttpRequest !!!");
    }
}
addLoadEvent(getNewContent);

在寫這個是時候我出現了以下問題

注意:有些瀏覽器會限制Ajax請求使用的協議(Firefox可以)其他的瀏覽器要搭建伺服器localhost,或在網址加空格–allow-file-access-from-files

擴充套件(以後應該要不斷更新)

GET的請求

request.open("GET", "test1.txt", true);

request.send();

POST的請求

request.open("POST", "ajax_test.asp", true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("fname=Bill&lname=Gates");

屬性

request.open(METHOD, URL, ASYNC);

METHOD: 請求型別 GET, POST 
URL: 目標連結地址,包括 QueryString 
ASYNC: 是否非同步請求

send(請求內容)