国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP
SUN的《AJAX與J2EE》全文
客戶(hù)端所嵌入的頁(yè)面特定的控制邏輯以JavaScript代碼的形式存在。頁(yè)面與JavaScript的交互建立在事件的基礎(chǔ)上(比如文檔加載事件、鼠標(biāo)點(diǎn)擊事件、焦點(diǎn)變化事件、甚至一個(gè)時(shí)鐘事件)。AJAX清楚的將表示邏輯和數(shù)據(jù)分離開(kāi)來(lái)、一個(gè)HTML網(wǎng)頁(yè)能夠在需要的時(shí)候獲取以比特為單位的數(shù)據(jù)片段!這不同于以前的有一點(diǎn)變化就必須刷新整個(gè)頁(yè)面的做法。同時(shí)AJAX也需要一種完全不同的服務(wù)端架構(gòu)來(lái)支持這種交互模式。以前的傳統(tǒng)服務(wù)端WEB應(yīng)用專(zhuān)注于為每一個(gè)客戶(hù)端的每一次請(qǐng)求生成HTML頁(yè)面、每一次客戶(hù)端接到響應(yīng)都要刷新和重新渲染整個(gè)頁(yè)面。而我們所談的WEB應(yīng)用專(zhuān)注于客戶(hù)端把HTML文檔當(dāng)作模版或容器、客戶(hù)端向其中插入內(nèi)容、其原理就是每當(dāng)客戶(hù)端發(fā)生事件、客戶(hù)端都可以向服務(wù)端發(fā)出請(qǐng)求并使用服務(wù)端返回的XML數(shù)據(jù)。

名為ValidateServlet的Servlet驗(yàn)證表單數(shù)據(jù)、但是要求不能對(duì)整個(gè)頁(yè)面刷新。步驟如下:

1. A client event occurs.——客戶(hù)端事件發(fā)生:
點(diǎn)擊鏈接或表單元素的鍵盤(pán)事件引發(fā)JavaScript函數(shù)validate():
<input type="text"
            size="20"  
              id="userid"
            name="id"
         onkeyup="validate();">

2. A XMLHttpRequest object is created and configured.——一個(gè)XMLHttpRequest對(duì)象被創(chuàng)建并配置:
var req;
function validate() {
    var idField = document.getElementById("idField");
    var url = "validate?id=" + escape(idField.value);
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");——?jiǎng)?chuàng)建XMLHttpRequest對(duì)象
    }
    req.open("GET", url, true);——調(diào)用XMLHttpRequest對(duì)象的open方法、url為所請(qǐng)求的服務(wù)端組件路徑、true表示這個(gè)調(diào)用是異步的、

如果設(shè)置為異步就必須還要有一個(gè)callback函數(shù)如下:
    req.onreadystatechange = callback;
    req.send(null);
}

3. The XMLHttpRequest object makes a call.——XMLHttpRequest對(duì)象發(fā)出請(qǐng)求:

如果是GET請(qǐng)求那么內(nèi)容可以為空、在url附加參數(shù)。
如果是POST請(qǐng)求那么就需要一個(gè)Content-Type頭的設(shè)置如下:
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("id=" + escape(idTextField.value));

如果用JavaScript產(chǎn)生表單元素值、必須確保值編碼的正確、JavaScript有一個(gè)escape()函數(shù)用于保障正確的編碼、并把特定字符正確的忽略掉。

4. The request is processed by the ValidateServlet.——請(qǐng)求被ValidateServlet所處理:
servlet處理XMLHttpRequest就和處理其他HTTP請(qǐng)求一樣:

public class ValidateServlet extends HttpServlet {   
    private ServletContext context;
    private HashMap users = new HashMap();
    public void init(ServletConfig config) throws ServletException {
        this.context = config.getServletContext();
        users.put("greg","account data");
        users.put("duke","account data");
    }
    public void doGet(HttpServletRequest request, HttpServletResponse  response)
        throws IOException, ServletException {

        String targetId = request.getParameter("id");

        if ((targetId != null) && !users.containsKey(targetId.trim())) {
            response.setContentType("text/xml");
            response.setHeader("Cache-Control", "no-cache");
            response.getWriter().write("valid"); 
        } else {
            response.setContentType("text/xml");
            response.setHeader("Cache-Control", "no-cache");
            response.getWriter().write("invalid"); 
        }
    }
}

5. The ValidateServlet returns an XML document containing the results.——ValidateServlet返回一個(gè)包含結(jié)果的XML文檔。
ValidateServlet生成一個(gè)XML文檔作為響應(yīng)、更復(fù)雜的情況可能用到DOM、XSLT等。

    response.setContentType("text/xml");
    response.setHeader("Cache-Control", "no-cache");
    response.getWriter().write("invalid"); 
開(kāi)發(fā)者必須了解兩件事:第一:Content-Type必須設(shè)置為text/xml;第二:Cache-Control必須設(shè)置為no-cache。

6. The XMLHttpRequest object calls the callback() function and processes the result. 
——XMLHttpRequest對(duì)象調(diào)用callback()函數(shù)并處理結(jié)果。
XMLHttpRequest對(duì)象的準(zhǔn)備狀態(tài)有所變化的時(shí)候則調(diào)用callback()方法、我們假定已經(jīng)請(qǐng)求完畢ValidateServlet、準(zhǔn)備狀態(tài)為4、表示XMLHttpRequest調(diào)用已經(jīng)完成、HTTP狀態(tài)碼為200、表示HTTP交互已經(jīng)成功。

function callback() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            // update the HTML DOM based on whether or not message is valid
        }
    }
}
瀏覽器維護(hù)著一個(gè)文檔的對(duì)象表示模型、既:DOM。網(wǎng)頁(yè)中的JavaScript方法可以訪問(wèn)這個(gè)模型、并且可以在頁(yè)面已經(jīng)全部加載完成后再次改變這個(gè)模型。

使用JavaScript代碼:req.responseXML可以得到服務(wù)端返回的XML文檔、req為XMLHttpRequest對(duì)象、DOM為JavaScript提供了一種搜索文檔內(nèi)容以及根據(jù)搜索結(jié)果改變網(wǎng)頁(yè)DOM的手段??梢允褂胷eq.responseText來(lái)訪問(wèn)返回的XML文檔的字符串表示、如下所示:

 <message>
  valid
 </message>

上面的例子是一個(gè)簡(jiǎn)單的XML片段、實(shí)際應(yīng)用可能包含更多:

function parseMessage() {
    var message = req.responseXML.getElementsByTagName("message")[0];
    setMessage(message.childNodes[0].nodeValue);
}

parseMessages()方法處理從服務(wù)端返回的XML文檔、該方法使用message元素的值去調(diào)用setMessage()方法來(lái)改變HTML DOM。

7. The HTML DOM is updated.——HTML文檔對(duì)象被更新。

JavaScript可以獲得HTML DOM中任何元素(對(duì)象)的引用、推薦使用document.getElementById("userIdMessage")方法來(lái)獲取。userIdMessage就是網(wǎng)頁(yè)上任意元素的ID屬性、有了元素(對(duì)象)的引用、JavaScript就可以改變這個(gè)元素的屬性以及這個(gè)元素的樣式屬性、還可以增加刪除或改變這個(gè)元素的子元素。通用的方法是設(shè)置innerHTML屬性、如下所示:

<script type="text/javascript">
 function setMessage(message) {
     var userMessageElement = document.getElementById("userIdMessage");
     userMessageElement.innerHTML = "<font color=\"red\">" + message + " </font>";
 }
</script>
<body>
<div id="userIdMessage"></div>
</body>

innerHTML屬性被改變以后網(wǎng)頁(yè)可以立即體現(xiàn)出變化、如果innerHTML屬性?xún)?nèi)部包含象<image>、<iframe>這樣的元素、那么其所指定的資源內(nèi)容一樣被瀏覽器解析顯示。

這種方法最大的缺點(diǎn)是在JavaScript代碼里面難于以字符串形式書(shū)寫(xiě)HTML、內(nèi)嵌于JavaScript中的HTML也難以看懂、維護(hù)和更改。另外的改變HTML DOM的方法是動(dòng)態(tài)創(chuàng)建新元素然后將其作為子元素插入目標(biāo)元素下、如下所示:

<script type="text/javascript">
 function setMessage(message) {
     var userMessageElement = document.getElementById("userIdMessage");
     var userIdMessageFont = document.getElementById("userIdMessageFont");
     var messageElement = document.createTextNode(message);
     if (userMessageElement.childNodes[0]) {
         // update the elements
         userIdMessageFont.replaceChild(messageElement, userIdMessageFont.childNodes[0]);
     } else {
         // create the new elements
         var fontElement = document.createTextNode("font");
         fontElement.setAtribute("id", "userIdMessageFont");
         fontElement.setAtribute("color", "red");
         userMessageElement.appendChild(fontElement);
         fontElement.appendChild(messageElement);
     }
 }
</script>
<body>
 <div id="userIdMessage"></div>
</body>
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶(hù)發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)
打開(kāi)APP,閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
Ajax 基礎(chǔ)和例子
在Java2平臺(tái)企業(yè)版中應(yīng)用異步JavaScript技術(shù)和XML(AJAX)
AJAX原理
掌握 ajax,第 1 部分: ajax 簡(jiǎn)介
JSON 簡(jiǎn)介
Ajax 簡(jiǎn)介+實(shí)例 - namelysweet的博客 - 和訊博客
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服