Ajax JS 小樣本

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

上載者：User

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

HTML頁面

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <script language="javascript" src="jquery.js"></script>    <script language="javascript" src="xml.js"></script>    <meta http-equiv=”Content-Language” content=”UTF-8” />    <title>ajax執行個體 TEST</title></head><body>    ajax執行個體 TEST <br/>        <input type="text" id="username"name="username"/>        <input type="button" value="ok" onclick="varify()">        <div id="msg"></div></body></html>

JAVASCRIPT:

var xmlhttp;function varify(){    var username = document.getElementById("username").value;    if(window.XMLHttpRequest){        xmlhttp = new XMLHttpRequest();        if(xmlhttp.overrideMimeType ){            xmlhttp.overrideMimeType("text/xml");        }    }else if(window.ActiveXObject) {        var activexName = ["MSXML.XMLHTTP","Microsoft.XMLHTTP"];        for(var i;i<activexName.length;i++){            try{                xmlhttp = new ActiveXObject(activexName[i]);                break;            }catch(e){            }        }    }    //註冊回呼函數時，只需要函數名，不要回括弧    xmlhttp.onreadystatechange=callback;    /*     * 第一個參數表示http的請求方式，支援所有http的請求方式，主要為get和post;     * 第二個參數表示請求的url地址，get方式參數也在URL中;     * 第三個參數表示採用非同步還是同步方式互動，true 表示非同步;     */   // xmlhttp.open("GET","AjaxServlet?name="+username,true);   // xmlhttp.send(null);    //post方式    xmlhttp.open("POST","AjaxServlet",true);    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded") ;    // 參數    xmlhttp.send("name="+username);}// 回呼函數function callback() {    //判斷對象的狀態是互動完成的    if(xmlhttp.readyState == 4){        if(xmlhttp.status==200){         //  使用純文字方式   out.println("使用者名稱[" + name + "]已經存在，請使用其他使用者名稱, ");             var responseText = xmlhttp.responseText;             alert(responseText) ;             //使用XML   s.append("使用者名稱[" + name + "]已經存在，請使用其他使用者名稱, ").append("</message>");             var domObj = xmlhttp.responseXML;             var messageNode = domObj.getElementsByTagName("message");             var responseMessage = messageNode[0].firstChild.nodeValue;             alert(responseMessage) ;             document.getElementById("msg").innerHTML=responseMessage;        }     }}

==================

AjaxServlet

import javax.servlet.ServletException;import javax.servlet.http.*;import java.io.*;public class AjaxServlet extends HttpServlet {    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {         doGet(request,response);    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        response.setContentType("text/xml;charset=utf-8");  //使用XML 為 text/xml        PrintWriter out = response.getWriter();        String name = request.getParameter("name");        StringBuilder s= new StringBuilder();        s.append("<message>");        if(name==null||name.length()==0){            s.append("使用者不可為空").append("</message>");        } else{            if(name.equals("qq")) {                s.append("使用者名稱[" + name + "]已經存在，請使用其他使用者名稱, ").append("</message>");            } else{                s.append("使用者名稱[" + name + "]不存在，可以使用").append("</message>");            }            out.println(s.toString());            System.out.println(s);        }    }}

本文章原先以中文撰寫並發佈於 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