第7章藝術程式設計Ajax的學習
阿新 • • 發佈:2018-11-08
終於學到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(請求內容)