ajax技術的應用及總結

最後更新：2018-12-03 來源：互聯網

上載者：User

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

Ajax（Asynchronous JavaScript and XML）是一個結合了Java技術、XML、以及JavaScript的web開發模式，可以讓你構建基於Java技術的Web應用，解決了web開發中經常碰到的頁面重載問題（即不需要頁面重新整理便可輕易實現伺服器端資料的擷取）

本例中的應用是基於java的Servlet技術(也可以很容易的擴充到bean中實現)，共需要建立三個檔案: index.jsp AjaxUse.java web.xml

---------------index.jsp檔案代碼

<%@ page contentType="text/html;charset=GB2312"%>
<html>
<title>Ajax應用</title>
<head>
<script language="javascript">
var req;
function sendData() {
   var idField = document.getElementById("userid");
   var url = "servlet/AjaxUse?id=" + escape(idField.value);
   waitMessage();
   if (window.XMLHttpRequest) {
       req = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
       req = new ActiveXObject("Microsoft.XMLHTTP");
   }
   req.open("GET", url, true);
//open包含5個參數:(http-method, url, async, userID, password) 前三個是必要的，後兩個是可選的
//----http-method： HTTP的通訊方式，比如GET或是 POST
//----url：接收XML資料的伺服器的URL地址。通常在URL中要指明 ASP或CGI程式
//----async：布爾標識.如是非同步通訊方式(true)，客戶機不等待伺服器的響應；如是同步方式(false)，客戶機就要等到伺服器返回訊息後才去執行其他動作
//----userID: 使用者ID，用於伺服器身分識別驗證
//----password 使用者密碼，用於伺服器身分識別驗證
   req.onreadystatechange = callback;
//如用POST方法，需添加如下內容
//----req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//----req.send("id=ok");
   req.send(null);
}
function callback() {
    if (req.readyState == 4) {
//XMLHTTP對象中的readyState屬效能夠反映出伺服器在處理請求時的進展狀況
//----0 Response對象已經建立，但XML文檔上傳過程尚未結束
//----1 XML文檔已經裝載完畢
//----2 XML文檔已經裝載完畢，正在處理中
//----3 部分XML文檔已經解析
//----4 文檔已經解析完畢，用戶端可以接受返回訊息
        if (req.status == 200) {
//檢查是否成功接收了伺服器響應
             parseMessage();
        }
    }
}
function parseMessage() {
   var message = req.responseXML.getElementsByTagName("data");
   var str=new Array();
   if(message.length>=1){
       for(var i=0;i<message.length;i++){
          str[i]=message[i].firstChild.data;
       }
   }else{
      str[0]=message.length;
   }
    mdiv = document.getElementById("userIdMessage");
    mdiv.innerHTML = "<div>"+str[0]+"</div>";
}
function waitMessage() {
    mdiv = document.getElementById("userIdMessage");
    mdiv.innerHTML = "<div>請稍後----</div>";
}
</script>
</head>
<body bgcolor=silver>
<font size=2>輸入一個數字，通過ajax將會在頁面靜態擷取伺服器端相應：</font>
<input type="text" name="id" id="userid" size="20">
<input type="button" value="發送" onclick="sendData()">
<div id="userIdMessage"></div>
</body>
</html>

---------------AjaxUse.java 檔案代碼

package com.servlet;

import javax.servlet.*;
import javax.servlet.http.*;

public class AjaxUse extends HttpServlet {
    private ServletContext context;
    public void init(ServletConfig config) throws ServletException {
        this.context = config.getServletContext();
    }
    public void doGet(HttpServletRequest request, HttpServletResponse response)
        throws IOException, ServletException {
        String targetId = request.getParameter("id");
        StringBuffer sb=new StringBuffer("<message>");
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        sb.append("<data>LiaoNing</data><data>ShenYang</data>");
        sb.append("</message>");
        PrintWriter out=response.getWriter();
        out.write(sb.toString());
        out.close();
         }
    }
}

---------------web.xml 檔案代碼

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<servlet>
    <servlet-name>AjaxUse</servlet-name>
    <servlet-class>com.servlet.AjaxUse</servlet-class>
</servlet>
   <servlet-mapping>
        <servlet-name>AjaxUse</servlet-name>
        <url-pattern>/servlet/AjaxUse</url-pattern>
    </servlet-mapping>
</web-app>

本例是通過一個Button按鈕來觸發用戶端的sendData()方法向伺服器發送資料,如果需要實現過一個固定時間預設向伺服器發送資料,可以在javascript代碼中加入定時器:setInterval("sendData()",1000),定時器單位為毫秒.

使用總結：
   在使用中通常可能碰到如下問題：
   1>使用ajax傳輸資料的頁面，如果使用了定時傳輸setInterval()，而且傳輸時間間隔設定的比較短，會造成如果試圖點擊本頁面的一些連結，反映會比較遲鈍；
   2>如果傳輸的資料量比較大，動態資料載入顯示的時候會有一點延遲，在這裡建議對req.readyState不等於4（即用戶端尚未完成接收資料）的情況進行處理，例如加入"資料載入中"等提示資訊；
   3>如果從伺服器端傳送過來的資料是以text/xml格式，則會出現中文問題。例如當你傳送的資料中包含中文的時候，這時如果在用戶端對接收到的資料仍以xml格式進行解析，則會解析不出任何資料，而且也不會報出任何異常。關於這種情況，針對xml格式需要添加一項編碼格式設定,如<?xml version="1.0" encoding="GBK" ?>;或者把傳送的資料格式換為text/html，這樣則不需要任何設定，但是在用戶端對接收到的資料進行解析可能就會麻煩一點，有兩種方法：一種是用"字串.split()"按照一些特定字串對整個資料串進行切割；一種是用Regex，例如用req.responseText.match(/<data>(.*?)<//data>/g);對<data></data>中間包含的資料進行匹配，但是有一個小問題，這裡匹配之後得到的資料仍然還包含<data></data>這兩個標籤，在後面的代碼中還需要對這兩個標籤進行清除："str.replace("<data>","");str.replace("</data>","");"

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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