December 22, 2011

【AJAX】AJAX+PHP簡單範例(用POST傳送)

A.html
<script type="text/javascript" language="javascript" src="../js/ajax.js">
</script>
<script language="javascript">
function test1()

var v1=document.getElementsByName('txt').item(0).value;
 var v2=document.getElementsByName('txx').item(0).value;
定義兩個變數來放要傳送的資料
 var show=document.getElementById('aa');
 var postd="u1="+v1+"&u2="+v2;
要傳送的資料
POST的傳送出去的格式說明: "變數"="值"&"變數"="值,簡單說明就是會變成 A=1&B=2&C=3

 var aj=ajax();
宣告XMLHttpRequest
 aj.open("POST","test2.php",true);
參數說明
第一個用 POST 的方式傳送
第二個要傳送的網址
第三個是否為非同步,true表示非同步,false表示為同步,只有這兩個!!

 aj.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
用 POST 方式需要設定 HTTP 表頭 MIME 型態,不要問我裡面什麼意思...我照抄的...
 aj.onreadystatechange=function()
當資料回傳時,要做什麼的處理。
 {
  if(aj.readyState==4)
  {
   if(show.childNodes)
   {
    for(var i=0;i<show.childNodes.length;i++)
    {
     show.removeChild(show.childNodes.item(i));
    }
   }
   var aa=aj.responseText;
   var jj=document.createTextNode(aa);
   show.appendChild(jj);
  }
 }
 aj.send(postd);
}
</script>

<body>
<form name="frm">
<input type="text" name="txt" />
<input type="text" name="txx" />
<input type="button" value="OK" onclick="test1()" />
</form>
<div id="aa">
</div>
</body>
</html>

ajax.js
function ajax(){
var request = null;
try {
//IE7,or non-IE browser
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
//IE browser
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
//other IE browser
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
//not support
request = null;
}
}
}
return request;
}

0推薦此文章
Today's Visitors: 0 Total Visitors: 228
Personal Category: 網頁Java Script Topic: feeling / personal / murmur
Previous in This Category: 【CSS】用DIV做出捲軸   Next in This Category: 【PHP】產生XML物件
[Trackback URL]

No one can comment

誰來收藏
Loading ...
unlog_NVPO 0