AJAX五步使用法及中文亂碼處理！

learning_1發表於2008-10-14
也是從《AJAX技術入門》的視訊上摘錄的程式碼，覺得蠻有用滴，記下來了，以後要用到AJAX的直接在自己的部落格上找就得了，省了GOOGLE的時間，嘿嘿！
效果圖如下：只是實現一個簡單的使用者名稱驗證！
[img]http://niunan.iteye.com/upload/picture/pic/23327/8d9f3947-98b9-3cef-a6ce-cabda3fbfa35.jpg[/img]

程式使用ASP.NET實現！
Default.aspx頁面原始碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
<title>AJAX五步使用法及中文亂碼處理</title>
    <script type="text/javascript">
        var xmlhttp;

        function submit() {
            // 1.建立XMLHttpRequest物件
            if (window.XMLHttpRequest) {
                // IE7,IE8,FireFox,Mozilla,Safari,Opera
                xmlhttp = new XMLHttpRequest();
                if (xmlhttp.overrideMimeType) {
                    xmlhttp.overrideMimeType("text/xml");
                }
            } else if(window.ActiveXObject) {
                // IE6,IE5.5,IE5
                var activexName = ["MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
                for (var i = 0; i <activexName.length; i++) {
                    try{
                        xmlhttp = new ActiveXObject(activexName[i]);
                        break;
                    } catch(e) {                        
                    }
                }
            }
            if (xmlhttp == undefined || xmlhttp == null) {
                alert('當前瀏覽器不支援建立XMLHttpRequest物件，請更換瀏覽器');
                return;
            }

            //2.註冊回撥方法
            xmlhttp.onreadystatechange = callback;
            //錯誤的寫法
            //xmlhttp.onreadystatechange = callback();

            // 獲取文字框中輸入的內容，經過兩次編碼防止中文亂碼
            var userName = document.getElementById("UserName").value;
            userName = encodeURI(encodeURI(userName));


            // GET方式互動
            // 3.設定和伺服器端互動的相應引數
            xmlhttp.open("GET","AJAXGB.ashx?name=" + userName,true);

            // 4.設定向伺服器端傳送的資料，啟動和伺服器端的互動
            xmlhttp.send(null);

           /*
            // POST方式互動
            // 3.設定和伺服器端互動的相應引數
            xmlhttp.open("POST","AJAXGB.ashx",true);

            // POST方式互動所需要增加的程式碼
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            // 4.設定向伺服器端傳送的資料，啟動和伺服器端的互動
            xmlhttp.send("name=" + userName);
            */
        }

        function callback() {
            // 5 .判斷和伺服器端的互動是否完成，還要判斷伺服器端是否正確返回了資料
            if (xmlhttp.readyState == 4) {
                // 表示和伺服器端的互動已經完成
                if (xmlhttp.status == 200) {
                    // 表示伺服器的響應程式碼是200，正確的返回了資料
                    // 純文字資料的接受方法
                    var message = xmlhttp.responseText;
                    // XML資料對應的DOM物件的接受方法
                    // 使用的前提是，伺服器端需要設定content-type為text/xml
                    // var domXml = xmlhttp.responseXML;

                    //向div標籤中填充文字內容的方法
                    var div = document.getElementById("message");
                    div.innerHTML = message;
                }
            }
        }
    </script>

</head>
<body>
<input type='text' id='UserName' value='牛腩' />
<input type='button' onclick='submit()' value='校驗使用者名稱' />
<br />
<div id="message">
</div>
</body>
</html>

一般處理程式AJAXGB.ashx原始碼:

<%@ WebHandler Language="C#" Class="AJAXGB" %>

using System;
using System.Web;

public class AJAXGB : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string old = context.Request["name"];

        if (string.IsNullOrEmpty(old))
        {
            context.Response.Write("使用者名稱不能為空");
        }
        else
        {
            string name = context.Server.UrlDecode(old);
            if (name.Equals("牛腩"))
            {
                context.Response.Write("使用者名稱[" + name + "]已經存在，請使用其他使用者名稱！");
            }
            else
            {
                context.Response.Write("使用者名稱[" + name + "]尚未存在，可以使用該使用者名稱註冊！");
            }
        }
        context.Response.End();
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

相關文章