不使用XMLHttpRequest物件的Ajax技術

原文網址:Ajax & PHP without using the XmlHttpRequest Object

從Ajax這個名詞問世以來,你就會發現好像不管什麼網站,都得用上一點Ajax技術來讓自己的網站多一點互動性;不過有個小問題就是,雖然大部分的瀏覽器都支援XmlHttpRequest物件,但是還是有瀏覽器無法支援;而且雖然IE6可以支援,但是卻會出現那個討厭的ActiveX警告訊息,真是要命。所以網路上就有程式設計師想出了一招不用XmlHttpRequest物件就可以產生出類似Ajax即時互動效果的方法,這個範例則是搭配PHP來使用,其他伺服器語言請看著辦吧!首先,你必須準備一個PHP檔案:


<?php
$html = '<b>This content came from our Ajax Engine</b>';
?>
div = document.getElementById('contentdiv');
div.innerHTML = '<?php echo $html; ?>';

這個頁面會產生我們要的資料,不過因為我們不希望這個檔案一開始就給我跑得很開心,所以需要撰寫一個觸發事件的按鈕,讓使用者做了某個動作以後我們才會執行這個檔案,所以請加上下面這一段JS語法:

// 取得所在網址
url = document.location.href;
xend = url.lastIndexOf("/") + 1;
var base_url = url.substring(0, xend);
function ajax_do (url) {
  // 判斷URL是否以http開頭
  if (url.substring(0, 4) != 'http') {
    url = base_url + url;
  }
  // 建立一個新的Javascript元素
  var jsel = document.createElement('SCRIPT');
  jsel.type = 'text/javascript';
  jsel.src = url;
  // 產生JS內容
  document.body.appendChild (jsel);
}

這是非常重要的處理檔案,因為相當簡單,所以就不再介紹了;下面這個部分就是HTML的部份:

<html>
  <head>
    <title>不使用XMLHttpRequest物件的Ajax技術</title>
    <script type="text/javascript" src="engine.js" mce_src="engine.js"></script>
  </head>
  <body>
    <div id="contentdiv"></div>
    <input type="button" onclick="ajax_do ('page1.php');" value="取得內容" />
  </body>
</html>

這個方法雖然很好用,但是卻不能夠傳參數給PHP檔案喔!所以如果遇到要傳參數給PHP檔案的話,你還是乖乖使用XMLHttpRequest吧!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s