DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 關於Ajax的操作簡單總結
關於Ajax的操作簡單總結
編輯:AJAX詳解     

1, 使用JavaScriptJS文件,驗證用戶名是否存在

var AJax = function(option)
{
var request;
var createRequest = function()
    {
//var request;
if (window.XMLHttpRequest)
        {
            request = new XMLHttpRequest();
        }
else
        {
try
            {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            }
catch (e)
            {
                request = new ActiveXObject("Msxml2.XMLHTTP");
            }
        }
return request;
    }
var sendRequest = function()
    {
        request = createRequest();
/*---------GET 和 POST的區別------------
            1、 get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中,值和表單內各個字段一一對應,在URL中可以看到。
                post是通過HTTP post機制,將表單內各個字段與其內容放置在Html HEADER內一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。
            2、 對於get方式,服務器端用Request.QueryString獲取變量的值,
                對於post方式,服務器端用Request.Form獲取提交的數據。
                兩種方式的參數都可以用Request來獲得。
            3、 get傳送的數據量較小,不能大於2KB。
                post傳送的數據量較大,一般被默認為不受限制。
            4、 get安全性非常低,post安全性較高。
            5、 當我們在提交表單的時候我們通常用post方式,當我們要傳送一個較大的數據文件時,需要用post。
                當傳遞的值只需用參數方式(這個值不大於2KB)的時候,用get方式即可。
        */
        request.open("GET", option.url, true);
//request.open("POST", option.url, true);
//發送請求之前設置該屬性,獲取服務器上的准備狀態
        request.onreadystatechange = ResponseRequest;
        request.send(null);    
    }
/*
        request.readyState == 4說明服務器已經收到一個響應
        request.status == 200,HTTP服務器響應的狀態值,表示一切順利
        HTTP的就緒狀態
        0:請求沒有發出(在調用 open() 之前)。 
        1:請求已經建立但還沒有發出(調用 send() 之前)。 
        2:請求已經發出正在處理之中(這裡通常可以從響應得到內容頭部)。 
        3:請求已經處理,響應中通常有部分數據可用,但是服務器還沒有完成響應。
        4:響應已完成,可以訪問服務器響應並使用它。
    */
var ResponseRequest = function()
    {
        alert("HTTP的就緒狀態: "+request.readyState);
if (request.readyState == 4)
        {
if (request.status == 200)
            {
                alert("一切順利!");
                option.Success(request);
            }
else
            {
                alert("出現錯誤,錯誤信息為: "+request.status);
                option.Failure(request); 
            }
        }
    }
    sendRequest();
}
//判斷輸入的數值是否存在
function getIS()
{
/*
        1,url是要鏈接的頁面和傳過去的值,傳過去值,讓動態頁面執行
        2,Default.ASPx為要為這個執行的頁面
        3,name是傳過去的參數名
        4,document.getElementById('Text1').value傳過去的參數值
        5,message.responseText成功之後從服務端返回的消息
    */
var option = 
    { 
        url: "Default.ASPx?name="+document.getElementById('Text1').value,
        Success:function(message)
        {
            alert(message.responseText);
        }
     };
new AJax(option);
}


 

ASPx文件

if (Request["name"] != null)
        {
this.Response.Clear();
string name = Request["name"].ToString();
if (name == "1")
            {
                Response.Write("用戶名已存在,請填寫其他的用戶名!");
            }
else
            {
                Response.Write("該用戶名沒被注冊,可以使用!");
            }

this.Response.End();
        }

2, 通過Jquery實現:

 $(document).ready(function(){
        $("#Button1").click(function(){
									 $.AJax({
											type:"GET",
											url:"ResponsePage.ASPx?name="+document.getElementById('Text1').value,
											success:function(message) {
                                                               alert(message);
                    }

											});

        });
        });

     

    XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
    Copyright © DIV+CSS佈局教程網 All Rights Reserved