Ajax入门级程序--Helloworld

最新推荐文章于 2025-08-09 16:29:58 发布

原创最新推荐文章于 2025-08-09 16:29:58 发布 · 542 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #function #javascript #服务器 #url

.net专题 Ajax 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的Ajax示例，展示了如何使用XmlHttpRequest对象实现客户端与服务器间的异步数据交换。客户端通过JavaScript创建对象并向服务器发送请求，服务器处理请求后返回响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文中的程序是Ajax的入门级例子。
通过本例可以很容易了解XmlHttpRequest在Ajax中的作用。

下面是客户端页面的Html代码，主要负责通过javascript建立一个新类CallBackObject，并将其实例化，利用XmlHttpRequest对象向服务器发送请求。

并接受服务器处理后返回的响应，根据对象的readyState值的变化，调用相应的执行函数。

<%@ 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注释->

function CallBackObject()

{

this.XmlHttp = this.GetHttpObject();

}

CallBackObject.prototype.GetHttpObject = function()//获得xmlhttp对象

{

var xmlhttp;

/*@cc_on

@if(@_jscript_version >= 5)

{

try

{

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

}

catch(e)

{

try

{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

catch(E)

{

xmlhttp = false;

}

@else

{

xmlhttp = false;

}

@end @*/

//!!!!!!!!!!!!!!!!!!!!!!!注意：/*@cc_on ， @end @*/不要分开写。!!!!!!!!!!!!!!!!!!!!!!!!!

if(!xmlhttp && typeof XMLHTTPRequest !="undefined")

{

try

{

xmlhttp = new XMLHTTPRequest();

}

catch(e)

{

xmlhttp = false;

}

return xmlhttp;

}

CallBackObject.prototype.DoCallBack = function(URL)//向服务器发送请求，参数URL为处理客户端请求的服务器的页面

{

if(this.XmlHttp)

{

if(this.XmlHttp.readystate==4||this.XmlHttp.readystate==0)

{

var oThis = this;

this.XmlHttp.open('POST',URL);

this.XmlHttp.onreadystatechange = function(){oThis.ReadyStateChange()};

this.XmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

this.XmlHttp.send(null);

}

CallBackObject.prototype.AbortCallBack = function()

{

if(this.XmlHttp)

{

this.XmlHttp.abort();

}

CallBackObject.prototype.OnLoading = function()

{

//loading

}

CallBackObject.prototype.OnLoaded = function()

{

//loaded

}

CallBackObject.prototype.OnInteractive = function()

{

//Interactive

}

CallBackObject.prototype.OnComplete = function(responseText,responseXML)

{

//Complete

}

CallBackObject.prototype.OnAbort = function()

{

//Abort

}

CallBackObject.prototype.OnError = function(status,statueText)

{

//Error

}

CallBackObject.prototype.ReadyStateChange = function()

{

if(this.XmlHttp.readystate == 1)

{

this.OnLoading();

}

else if(this.XmlHttp.readystate == 2)

{

this.OnLoaded();

}

else if(this.XmlHttp.readystate == 3)

{

this.OnInteractive();

}

else if(this.XmlHttp.readystate == 4)

{

if(this.XmlHttp.status == 0)

{

this.OnAbort();

}

else if(this.XmlHttp.status == 200&&this.XmlHttp.statusText == "OK")

{

this.OnComplete(this.XmlHttp.responseText,this.XmlHttp.responseXML);

}

else

{

this.OnError(this.XmlHttp.status,this.XmlHttp.statusText,this.XmlHttp.responseText);

}

//******************************************************************************************

//********************之上的内容可以放在一个单独的js文件里。********************************

function createRequest()

{

var name = document.getElementById("name").value;

var cbo = new CallBackObject();

cbo.OnComplete = CBO_Complete;

cbo.OnError = CBO_Error;

cbo.DoCallBack("ajax.aspx?name="+name);//不要丢掉这里的“=”

}

function CBO_Complete(responseText,responseXML)//完善响应处理函数

{

alert(responseText);

}

function CBO_Error(responseText,responseXML)

{

alert(responseText);

}

</script>

</head>

<body>

<div>

</form>

</body>

</html>

以下是接受客户端请求的页面的cs文件，就收请求后，处理，并向客户端返回响应。

using System;

using System.Data;

using System.Configuration;

using System.Collections;

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 ajax : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

string name = HttpContext.Current.Request.QueryString["name"];

string str = "您输入的内容是"+name;

HttpContext.Current.Response.Clear();

HttpContext.Current.Response.Write(str);

HttpContext.Current.Response.Flush();

HttpContext.Current.Response.End();

}