ASP.NET AJAX使用XMLHttpRequest的简单应用程序

我是ASP.NET和Ajax的新手。我正在尝试实现一个示例应用程序，它可以更新不带回发的Web表单。单击时，我的应用程序使用XMLHttpRequestModule向其服务器发送请求，并显示通过警报窗口收到的数据。ASP.NET AJAX使用XMLHttpRequest的简单应用程序

我认为问题可能是default.aspx.cs页面没有将httpRequest.responseText提供给它的web窗体。

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>

来源

2012-01-05 Si Young Kim

什么是“比照sendRequest'和它在你的代码中的位置？ – Abbas 2012-01-05 07:15:33

sendRequest方法在我在此代码中提到的XMLHttpRequestModule.htm中。 sendRequest方法有四个参数（url，params，callback和方法） – 2012-01-05 07:18:59

你想让我上传XMLHttpRequestModule.htm吗？ – 2012-01-05 07:19:52

在您的问题中，您提到了您通过脚本标记包含的XMLHttpRequestModule：<script type="text/javascript" src="XMLHttpRuquestModule.htm"></script>。 XMLHttpRuquestModule.htm有拼写错误（'Ruquest'，而不是'请求'），也许这是导致你的错误。

另请注意，在脚本中包含htm文件只有在该文件中有JavaScript并且没有实际html时才有效。

编辑：

这是参照我们在评论部分交换。

我已经设法弄到一个ASP.NET服务器，运行Ajax代码，完全像你的ASPX页面，一切都还好。警告框仍然弹出正确的响应。

不同之处在于，正如最初的建议，我已将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); 
}

来源

2012-01-05 07:31:35 Abbas

感谢您指出错误！该代码仍然无法正常工作:(该htm文件的头部只包含JavaScript代码 – 2012-01-05 07:41:30

不客气，你的意思是“头脑中”是什么意思？src属性期望一个文本文件中根本没有标记。为什么你使用.htm文件而不是.js – Abbas 2012-01-05 07:46:45

你是对的，我应该使用.js没有任何标签！鳕鱼是不是工作虽然:( – 2012-01-05 07:50:53