首頁 > 開發者 > Ajax

Ajax的學習與使用

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

  要想應用Ajax，首先必須搞清楚Ajax的執行原理：一個Ajax互動從一個稱為XMLHttpRequest的JavaScript對象開始。如同名字所暗示的，它允許一個用戶端指令碼來執行HTTP請求，並且將會解析一個XML格式的伺服器響應。Ajax處理過程中的第一步是建立一個XMLHttpRequest執行個體。使用HTTP方法（GET或POST）來處理請求，並將目標URL設定到XMLHttpRequest對象上。
　　當你發送HTTP請求，你不希望瀏覽器掛起並等待伺服器的響應，取而代之的是，你希望通過頁面繼續響應使用者的介面互動，並在伺服器響應真正到達後處理它們。要完成它，你可以向XMLHttpRequest註冊一個回呼函數，並非同步地派發XMLHttpRequest請求。控制權馬上就被返回到瀏覽器，當伺服器響應到達時，回呼函數將會被調用。

  看這些你可能看不懂，太抽象了！下面我給個Ajax的實際例子：
1. 初始化Ajax
　　Ajax實際上就是調用了XMLHttpRequest對象，那麼首先我們的就必須調用這個對象，我們構建一個初始化Ajax的函數：

　function InitAjax()
  {
 var ajax=false;
 try
 {
  ajax = new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
　　  try
  {
　　   ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }
  catch (E)
  {
　　　   ajax = false;
　　  }
　　    }
 if (!ajax && typeof XMLHttpRequest!='undefined')
 {
　　  ajax = new XMLHttpRequest();
　 }
　 return ajax;
  }
我們在執行任何Ajax操作之前，都必須先調用InitAjax()函數來執行個體化一個Ajax對象。這個函數可以作為一個通用函數來用，當然這個函數也有其他的寫法，此處寫的比較簡單，因為大多數瀏覽器都支援Ajax。

2. 使用Get方式
　　現在我們第一步來執行一個Get請求，加入我們需要擷取 /show.php?id=1的資料，那麼我們應該怎麼做呢？
　　假設有一個連結：＜a href="/show.php?id=1"＞新聞1＜/a＞，我點該連結的時候，不想任何重新整理就能夠看到連結的內容，那麼我們該怎麼做呢？
   
    //將連結改為：
    ＜a href="#" onClick="getNews(1)"＞新聞1＜/a＞
   //並且設定一個接收新聞的層，並且設定為不顯示：
   ＜div id="show_news"＞＜/div＞
   同時構造相應的JavaScript函數：
   function getNews(newsID)
  {
　 //如果沒有把參數newsID傳進來
　 if (typeof(newsID) == 'undefined')
　 {
　 　return false;
　 }
　 //需要進行Ajax的URL地址
　 var url = "/show.php?id="+ newsID;
  　 //擷取新聞顯示層的位置
　 var show = document.getElementById("show_news");
　 //執行個體化Ajax對象
　 var ajax = InitAjax();
　 //使用Get方式進行請求
　 ajax.open("GET", url, true);
　 //擷取執行狀態
　 ajax.onreadystatechange = function() {
　 //如果執行是狀態正常，那麼就把返回的內容賦值給上面指定的層
　 if (ajax.readyState == 4 && ajax.status == 200)
   {
　　　 show.innerHTML = ajax.responseText;
　 }
　 }
　 //發送空
　 ajax.send(null);
 }
當使用者點擊“新聞1”這個連結的時候，在下面對應的層將顯示擷取的內容，而且頁面沒有任何重新整理。當然，上面省略了show.php這個檔案，我們只是假設show.php檔案存在，並且能夠正常工作的從資料庫中把id為1的新聞提取出來。這種方式適應於頁面中任何元素，包括表單等等，其實在應用中，對錶單的操作是比較多的，針對錶單，更多使用的是POST方式。

下面是我做的一個簡單的例子：
1、test.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=gb2312" />
<title>ajax測試頁</title>
<style type="text/css">
<!--
body {
 margin-left: 10%;
 margin-right: 10%;
}
#Layer1 {
 position:absolute;
 width:256px;
 height:326px;
 z-index:1;
 left: 380px;
 top: 16px;
}
-->
</style>
<script type="text/javascript">
function InitAjax()
{
 var ajax=false;
 try
 {
  ajax = new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
　　 try
  {
　　  ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }
  catch (E)
  {
　　　  ajax = false;
　　 }
　　}
 if (!ajax && typeof XMLHttpRequest!='undefined')
 {
　　 ajax = new XMLHttpRequest();
　 }
　 return ajax;
}
function getimages(id)
{
　 var url = "images.php?picture="+id;
 var show = document.getElementById("Layer1");
　 var ajax = InitAjax();
 ajax.open("GET", url, true);
　  ajax.onreadystatechange = function()
 {
　　 if (ajax.readyState == 4 && ajax.status == 200)
  {
　　 　 show.innerHTML = ajax.responseText;
　　 }
　 }
　 ajax.send(null);
}
</script>
</head>

<body>
<table width="226" height="433" border="1" align="left" cellpadding="3" rules="none" frame="rhs">
  <tr>
    <th height="69" scope="col" align="right"><input type="button" name="" value="圖片一" onclick="getimages(1)"></th>
  </tr>
  <tr>
    <th height="69" scope="col" align="right"><input type="button" name="" value="圖片二" onclick="getimages(2)"></th>
  </tr>
  <tr>
    <th height="69" scope="col" align="right"><input type="button" name="" value="圖片三" onclick="getimages(3)"></th>
  </tr>
  <tr>
  <th height="214" scope="col"></th>
  </tr>
</table>
<div id="Layer1"></div>
</body>
</html>

 

2、images.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=gb2312" />
<title>圖片</title>
</head>

<body>
<?php
$id=$_GET["picture"];
if($id==1)
{
 printf("<img src='images/1.jpg' width='320' height='440' />");
}
if($id==2)
{
 printf("<img src='images/2.jpg' width='320' height='440' />");
}
if($id==3)
{
 printf("<img src='images/3.jpg' width='320' height='440' />");
}
?>
</body>
</html>

只要在images檔案夾下有這三個圖片就可以了！

 

 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More