Ajax入门概要

 第1章  Ajax概述

 

1  

{  

 

send_request('checkUserName.aspx?username='+username+'&r='+Math. 

 

random());  

 

}  

} 

 

上述代码用于完成对用户名的验证。当该输入框失去焦点时，首先获取用户输入的用

 

 

 

 

 

 

 

 

 

户名，如果用户名为空，则给出错误提示信息，并使用户名输入框重新获得焦点，如图

1-8 

 

 

 

 

 

 

所示。

 

 

图

1-8 

 

用户名为空的错误提示效果

 

如果输入了相应的用户名，即用户名不为空，将执行

send_request('checkUserName.aspx? 

username='+username+'&r='+Math.random());

语句来调用函数

send_request()

。

该函数的具体代码

如代码

1.3

所示。

 

代码

1.3 

 

向服务器发送请求函数

send_request() 

var http_request = false;  

function send_request(url)  

 

{ 

 

//

初始化

,

指定处理函数

,

发送请求的函数

  

 

http_request = false;  

 

//

开始初始化

XMLHttpRequest

对象

  

 

if(window.XMLHttpRequest) 

 

{  

 

    //Mozilla 

浏览器

  

 

 

http_request = new XMLHttpRequest();  

 

 

if (http_request.overrideMimeType)  

 

 

 

{ 

 

 

 

    //

设置

MiME

类别

  

 

 

 

 

http_request.overrideMimeType('text/xml'); 

 

 

 

}  

 

 

12 

第

一

篇

 

 

Ajax

基

础

篇

 

 

}  

 

else if (window.ActiveXObject)  

 

 

{  

 

 

// IE

浏览器

 

 

 

 

try  

 

 

 

{  

 

 

 

 

http_request = new ActiveXObject("Msxml2.XMLHTTP");  

 

 

 

}  

 

 

 

catch (e)  

 

 

 

 

{  

 

 

 

 

try  

 

 

 

 

 

{  

 

 

 

 

 

 

http_request = new ActiveXObject("Microsoft. 

 

 

 

 

 

 

XMLHTTP"); 

 

 

 

 

 

}  

 

 

 

 

 

catch (e) {}  

 

 

 

 

}  

 

 

}  

 

if (!http_request)  

 

 

{  

 

 

    // 

异常

,

创建对象实例失败

  

 

 

 

window.alert("

不能创建

XMLHttpRequest

对象实例

.");  

 

 

 

return false;  

 

 

}  

 

http_request.onreadystatechange = processRequest;  

 

// 

确定发送请求的方式和

URL

以及是否同步执行下段代码

 

 

 

http_request.open("GET", url, true);  

 

http_request.send(null);  

} 

 

上述代码首先创建

XMLHTTP

对象，

并根据不同的浏览器对其进行相应的初始化。

接着判

断

XMLHTTP

对象是否创建并初始化成功，

如果不成功，

则返回相应的提示信息。

最后设置回

调函数，建立对服务器的调用，并向服务器发送请求。

 

代码中

http_request.open("GET", 

url, 

true);

语句就是用来建立对服务器的调用，其中

url

值

是传递过来的

checkUserName.aspx?username='+username+'&r='+Math.random()

。该语句表明此

次向服务器发送的请求将由

checkUserName.aspx

来处理。该处理实现文件

checkUserName. 

aspx.cs

的具体代码如代码

1.4

所示。

 

代码

1.4 

 

服务器端处理请求：

checkUserName.aspx.cs 

using System; 

using System.Data; 

using System.Configuration; 

using System.Collections; 

 

 

13 

第

 

 

章

 

 

Ajax

概

述

 

1 

using System.Web; 

using System.Web.Security; 

using System.Web.UI; 

using System.Web.UI.WebControls; 

using System.Web.UI.WebControls.WebParts; 

using System.Web.UI.HtmlControls; 

public partial class checkUserName : System.Web.UI.Page 

{ 

    protected void Page_Load(object sender, EventArgs e) 

    { 

        string userName = Request.QueryString["username"]; 

        userName = userName.ToLower(); 

        if (userName == "") 

        { 

            Response.Write("3"); 

            return; 

        } 

        else if ((userName == "zhht") || (userName == "somboy")) 

            { 

                Response.Write("2"); 

                return; 

            } 

            else 

            { 

                Response.Write("1"); 

                return; 

            } 

    } 

} 

 

上述代码中，通过

string userName = Request.QueryString["username"];

语句获取传递过来的

用户名，然后进行验证，并根据验证结果输出相应的信息。该例只是通过与

zhht

和

somboy

进

行比较，来模拟同数据库中取出的用户名进行比较的过程。读者可以根据自己的需要进行相应

的扩展。

 

send_request()

函数中，

http_request.onreadystatechange=processRequest;

语句用于设置回调函

数为

porcessRequest()

，

即每个状态的改变都会触发

processRequest()

函数。

该函数的代码如代码

1.5

所示。

 

代码

1.5 

 

处理返回信息的函数

processRequest()

：

tool.js 

// 

处理返回信息的函数

 

 

function processRequest()  

{  

 

 

14 

第

一

篇

 

 

Ajax

基

础

篇

 

 

if (http_request.readyState == 4)  

 

 

{  

 

 

    // 

判断对象状态

  

 

 

 

if (http_request.status == 200) 

 

 

 

{  

 

 

 

    // 

信息已经成功返回

,

开始处理信息

  

 

 

 

 

var str = http_request.responseText;  

 

 

 

 

showMsg(str); 

 

 

 

}  

 

 

 

else  

 

 

 

{  

 

 

 

    //

页面不正常

  

 

 

 

 

alert("

您所请求的页面有异常

.");  

 

 

 

}  

 

 

}  

} 

 

上述代码中，如果服务器成功返回信息，那么获取该返回信息，并调用

showMsg()

函数。

该函数的代码如代码

1.6

所示。

 

代码

1.6 

 

显示结果信息函数

showMsg()

：

tool.js 

//

根据返回结果，显示信息

 

function showMsg(str) 

{ 

 

if(str == "1") 

 

{ 

 

 

document.getElementById("showmsgform").innerHTML = " <font color= 

 

 

'Red'>

昵称可以使用！

</font> "; 

 

} 

 

else if(str == "2") 

 

{ 

 

 

document.getElementById("showmsgform").innerHTML = "<font color= 

 

 

'Red'>

会员昵称已存在！

</font>"; 

 

} 

 

else if(str == "3") 

 

{ 

 

    document.getElementById("showmsgform").innerHTML = "<font color= 

 

    'Red'>

会员昵称不能为空！

</font>"; 

 

} 

} 

 

上述代码中，根据前面返回的结果输出不同的提示信息。如果用户在输入框中输入了已

 

 

 

 

 

 

 

经存在的用户名，如

zhht

、

somboy

等，当该输入框失去焦点时将得到如图

1-9

所示的提示

 

 

 

 

 

 

 

 

 

15 

第

 

 

章

 

 

Ajax

概

述

 

1 

信息。

 

在图

1-10

所示的页面中，如果输入的昵称不存在，那么将给出“昵称可以使用！

”提示信

息。同样，用户也察觉不到对昵称的检测，这一切都在用户不知的情况下完成的。而且整个过

程当前页面并没有进行任何刷新。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

图

1-9 

 

已经昵称时

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

图

1-10 

 

昵称可用时