有捨才有得: [php][javascript]AJAX簡易範例(GET、POST傳送)

做一個小範例,就可以發現ajax的威力無窮阿!

首先要做:

以ajax實現頁面不刷新,從前端將值傳送到後端處理,並且回傳給前端顯示

(先做GET傳值、等等再介紹由POST傳值,兩個程式碼幾乎一樣,只改小地方)

共有三個檔案分別是ajax_index.php(主頁)、ajax_example.js(AJAX的JS檔)、ajax_example.php(AJAX的PHP檔)

ajax_index.php(主頁):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;"/>
<title></title>
<!-- 引入 jQuery(非必要,去掉時有些寫法要改為javascript) -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<!-- 引入AJAX(必要) -->
<script type="text/javascript" src="ajax_example.js"></script> 
<script type="text/javascript">
//賦與按鈕事件,點擊執行AJAX
$(document).ready(function(){
 $('#test').keyup(function(){  //當輸入時觸發test_ajax()並且傳入輸入框的值當參數
  test_ajax($('#test').val());  //test_ajax()由ajax_example.js引入
 });
});
</script>
</head>
<body>
<div>以ajax實現頁面不刷新,從前端將值傳送到後端處理,並且回傳給前端顯示</div>
<input type="text" id="test" value=""/>
<div id="show_area"></div>
</body>
</html>

ajax_example.js(AJAX的JS檔):

var http_request=false;
function test_ajax(variable){
 http_request=false;
 if(window.XMLHttpRequest){
  http_request=new XMLHttpRequest();
  if(http_request.overrideMimeType){
   http_request.overrideMimeType('text/xml');
  }
 }else if(window.ActiveXObject){
  try{ //6.0+
   http_request=new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   try{ //5.5+
    http_request=new ActiveXObject("Microsoft.XMLHTTP");
   }catch (e){}
  }
 }
 if(!http_request){
  alert('Giving up :( Cannot create a XMLHTTP instance');
  return false;
 }
 http_request.onreadystatechange=show_area;
 http_request.open('GET','ajax_example.php?variable='+variable,true);
 http_request.send(null);
}

function show_area(){
 if(http_request.readyState==4){
  if(http_request.status==200){
   $('#test').val('');  //將輸入框清空
   $('#show_area').append(http_request.responseText);  //將結果顯示出來
  }
 }
}

ajax_example.php(AJAX的PHP檔):

<? 
echo $_GET['variable'].'的ascii碼為:'.ord($_GET['variable']).'</br>';  //將傳送進來的字元轉成ascii碼
?>

顯示結果:

就是這麼easy~

如果要傳送多個變數,則改寫成 var1=變數1&var2=變數2 如下:

http_request.open('GET','ajax_example.php?var1='+var1+'&var2='+var2,true);

接下來講以POST傳送

也很簡單! 首先修改ajax_example.js檔

var by_post='variable='+variable; //將變數放進字串
http_request.onreadystatechange=show_area;
http_request.open('POST','ajax_example.php',true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");  //**重要一定要加上
http_request.send(by_post);

修改地方不大

1.首先我們將variable變數寫成類似get傳送變數一樣的寫法並且將字串指定給by_post這個變數

2.將open()那由'get'改成'post',網址只留PHP檔案路徑,問號(?)以後的都刪除,因為我們不是由GET傳送了

3.加上http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

4.將by_post這個變數傳送到PHP

ajax_example.php:

這裡改的變動不大,由GET改成POST而已

結論:

AJAX應用非常廣泛,如:

檢查會員帳號是否重覆、每秒顯示伺服器時間等等...

未來有時間的話可以研究comet,代表人物就是node.js (我自己也還沒有時間學~_~)

有捨才有得

2012年10月25日星期四

[php][javascript]AJAX簡易範例(GET、POST傳送)

2 則留言:

2012年10月25日 星期四

[php][javascript]AJAX簡易範例(GET、POST傳送)

2 則留言:

2012年10月25日星期四