第五週:Ajax 技術

一、定義javascript

  Ajax 全稱爲「Asynchronous Javascript And XML」(異步 JavaScript 和 XML),是一種在 XML,HTML,CSS 和 JavaScript 的幫助下建立更好,更快和更具交互式 Web 應用程序的新技術html

二、用途 java

  1. Ajax 使用 XHTML 呈現內容,CSS 處理表現,使用文檔對象模型(DOM)和 JavaScript 顯示動態內容。ajax

  2. XML 一般被用做從服務器接收的數據格式,儘管它能夠是任意格式,包括文本。瀏覽器

  3.  

    Ajax 是一種獨立於 Web 服務器軟件的 Web 瀏覽器技術。
  4. 用戶能夠繼續使用該應用程序,而客戶端程序在後臺向服務器請求信息。
  5. 直觀和天然的用戶交互。再也不須要點擊,鼠標移動就足夠觸發事件。
  6. 基於數據驅動的,而非頁面驅動。
  7. 傳統的 Web 應用程序使用同步請求的方式傳輸信息到服務器或者從服務器獲取信息。這意味咱們須要填寫表單,點擊提交,而後定向到服務器提供的帶有新信息的新頁面。
  8. 對於 Ajax,當咱們點擊提交,JavaScript 會發起一個到服務器的請求,它會解析結果,而後更新當前屏幕顯示。從純粹意義上講,用戶甚至都不知道給服務器傳送了什麼。

三、工做原理服務器

            

 

四、實例框架

 (1) 源代碼以下:異步

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/statics/demosource/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">經過 AJAX 修改內容</button> </body> </html>

 

 

(2)未點擊按鈕前的效果:函數

 

 

(3)點擊按鈕後運行效果:性能

(4)代碼詳解

上面的 AJAX 應用程序包含一個 div 和一個按鈕。

div 部分用於顯示來自服務器的信息。當按鈕被點擊時,它負責調用名爲 loadXMLDoc() 的函數:

<html>
<body>

<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

 

接下來,在頁面的 head 部分添加一個 <script> 標籤。該標籤中包含了這個 loadXMLDoc() 函數:

<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>

 

五、我的感覺

  Ajax 前景很是樂觀,能夠提升系統性能,優化用戶界面。Ajax 現有直接框架 AjaxPro,能夠引入 AjaxPro.2.dll 文件,能夠直接在前臺頁面 JavaScript 調用後臺頁面的方法。但此框架與表單驗證有衝突。另外微軟也引入了 Ajax 組件,須要添加 AjaxControlToolkit.dll 文件,能夠在控件列表中出現相關控件。許多重要的技術和 Ajax 開發模式能夠從現有的知識中獲取。例如,在一個發送請求到服務端的應用中,必須包含請求順序、優先級、超時響應、錯誤處理及回調,其中許多元素已經在Web 服務中包含了。同時,隨着技術的成熟還會有許多地方須要改進,特別是UI部分的易用性。

相關文章
相關標籤/搜索