使用XMLHttpRequest的ASP.NET AJAX简单应用程序
本文关键字:AJAX 简单 应用程序 NET ASP XMLHttpRequest 使用 | 更新日期: 2023-09-27 18:19:40
我是ASP.NET和Ajax的新手。我正在尝试实现一个示例应用程序,它可以在没有Postback的情况下更新web表单。单击后,我的应用程序使用XMLHttpRequestModule向服务器发送请求,并显示通过警报窗口接收到的数据。
我认为问题可能是default.aspx页面没有为其网络表单提供httpRequest.responseText。
cf。sendRequest方法在XMLHttpRequestModule中,用于检查与浏览器的兼容性,并使用指定的参数和方法发送请求。
非常感谢您的帮助。
Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="XMLHttpRuquestModule.htm"></script>
<script type="text/javascript">
function helloToServer() {
var params = "name=" + encodeURIComponent(document.form.name.value);
sendRequest("Default.aspx", params, helloFromServer, "POST");
}
function helloFromServer() {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
alert("Response: " + httpRequest.responseText);
}
}
}
</script>
</head>
<body>
<form name ="form" runat="server">
<input type="text" name="name" />
<input type="button" value="enter" onclick="helloToServer()" />
</form>
</body>
</html>
Default.aspx。cs
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
String name = Request["name"];
Response.Write(name);
return;
}
}
XMLHttpRequestModule
<head>
<title></title>
<script type="text/javascript">
var httpRequest = null;
function getXMLHttpRequest() {
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
return null;
}
}
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}
function sendRequest(url, params, callback, method) {
httpRequest = getXMLHttpRequest();
var httpMethod = method ? method : 'GET';
if (httpMethod != 'GET' && httpMethod != 'POST') {
httpMethod = 'GET';
}
var httpParams = (params == null || params == '') ? null : params;
var httpUrl = url;
if (httpMethod == 'GET' && httpParams != null) {
httpUrl = httpUrl + "?" + httpParams;
}
httpRequest.open(httpMethod, httpUrl, true);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.onreadystatechange = callback;
httpRequest.send(httpMethod == 'POST' ? httpParams : null);
}
</script>
</head>
在您的问题中,您提到了通过脚本标记包含的XMLHttpRequestModule
:<script type="text/javascript" src="XMLHttpRuquestModule.htm"></script>
。XMLHttpRuquestModule.htm
中有拼写错误("Ruquest"而不是"Request"),可能是这导致了您的错误。
还要注意,在脚本中包含一个htm文件只有在该文件中有JavaScript而没有实际html的情况下才有效。
编辑:
这是关于我们在评论部分的交流。
我已经设法获得了一个ASP.NET服务器,针对与您完全相同的ASPX页面运行了Ajax代码,一切都还可以。警报框仍然弹出正确的响应。
不同的是,正如最初建议的那样,我已经将您的XMLHttpRuquestModule.htm
重命名为XMLHttpRuquestModule.js
,并删除了其中的所有标记
我在这里复制所有的代码,试着准确地粘贴它,然后运行它:
HTML文件(testXhr.htm):
<html>
<head>
<title></title>
<script type="text/javascript" src="XMLHttpRequestModule.js"></script>
<script type="text/javascript">
function helloToServer() {
var params = "name=" + encodeURIComponent(document.form.name.value);
sendRequest("Default.aspx", params, helloFromServer, "POST");
}
function helloFromServer() {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
alert("Response: " + httpRequest.responseText);
}
}
}
</script>
</head>
<body>
<form name ="form" runat="server">
<input type="text" name="name" />
<input type="button" value="enter" onclick="helloToServer()" />
</form>
</body>
</html>
JavaScript文件(XMLHttpRequestModule.js):
var httpRequest = null;
function getXMLHttpRequest() {
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
return null;
}
}
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}
function sendRequest(url, params, callback, method) {
httpRequest = getXMLHttpRequest();
var httpMethod = method ? method : 'GET';
if (httpMethod != 'GET' && httpMethod != 'POST') {
httpMethod = 'GET';
}
var httpParams = (params == null || params == '') ? null : params;
var httpUrl = url;
if (httpMethod == 'GET' && httpParams != null) {
httpUrl = httpUrl + "?" + httpParams;
}
httpRequest.open(httpMethod, httpUrl, true);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.onreadystatechange = callback;
httpRequest.send(httpMethod == 'POST' ? httpParams : null);
}
直接使用XMLHttpRequest有很多问题。其中之一是跨浏览器兼容性。。您应该尝试使用jQuery来创建ajax调用。并且您可以创建WebMethods是要从javascript调用的ASP.Net页面。看看他们
在ASP.NET Webforms 中使用jQuery for AJAX
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/
编辑:
在你想使用纯Javascript尝试
http://lamahashim.blogspot.com/2010/03/accessing-aspnet-webmethod-from.html
http://msdn.microsoft.com/en-us/library/ms535874%28v=vs.85%29.aspx