如何利用客户端JavaScript中的XMLHttpRequest获取服务端的值
服务端的页面为aspx页面，然后要利用服务端的代码隐藏页的方法返回一个数据给客户端，请大虾们伸出援助只手。小弟弟谢谢了！
小弟天生愚钝， 最好有源码，或者例子，不甚感激！
服务端的页面为aspx页面，然后要利用服务端的代码隐藏页的方法返回一个数据给客户端，请大虾们伸出援助只手。小弟弟谢谢了！
小弟天生愚钝， 最好有源码，或者例子，不甚感激！
var XmlRequest=null;
try{
XmlRequest=new XMLHttpRequest();
}
catch(a){
try{
XmlRequest=new ActiveXObject("MsXml2.XMLHTTP");
}catch(b){
try{
XmlRequest=new ActiveXObject("Microsoft.XMLHTTP");
}catch(c){}
}
}
function Request(){
XmlRequest.open("get","result.aspx",true);
XmlRequest.onreadystatechange=Response;
XmlRequest.send(null);
}
function Response(){
if(XmlRequest.readystate==4 && XmlRequest.status==200){
result.innerText=XmlRequest.responseText;
}
}
</script>
是这样的；建议你采用现在流行的一些ajax框架来做，包装了的js使用起来更加方便；
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
} function callServer() {
//从Web 表单中获取city and state数据
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
if ((city = = null) || (city = = ""))
return;
if ((state = = null) || (state = = ""))
return;
//建立要连接的 URL
var url = "/scripts/getZipCode.php?city="+escape(city) + "&state=" + escape(state);
//打开到服务器的连接
xmlHttp.open("GET", url, true);
//设置服务器在完成后要运行的函数
xmlHttp.onreadystatechange = updatePage;
//发送请求
xmlHttp.send(null);
}function updatePage() {
if (xmlHttp.readyState = = 4) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}
题外话：经不住一些朋友的一再要求，一气写了这么几篇Ajax方面的文章，这其中大部分代码都是从我的项目中摘取出来的，不过为了演示整个程序的框架结构，所以在演示程序代码里不会有大量与实际相关的业务逻辑处理，但是这并不妨碍你利用这些理论做出复杂的、完善的应用。一、数据库分页理论在实际项目中经常会遇到一个表里有几K、几M以上的数据，而呈现给用户时并不会一下子都显示出来，所以都是分批展示给用户，这样一来可以减小网络传输量，二来也减轻服务器压力。本文展示了在数据库中如何实现分页，如何利用AjaxPro实现无刷新分页。用AjaxPro实现定时刷新效果
说明：在Web开发中，有时候需要经常更新某一部分内容，如果不采用Ajax技术，就需要使用传统的html技术，在区域加以下代码： （假设每10秒更新一次），这样做的缺点是每次更新的时候整个页面都刷新了带来很多不必要的流量，也影响效率。微软的Ajax.Net类库也提供了相应的控件，使用微软提供的控件开发效率高，但是经常会出现“***不是已知元素 原因可能是网站中存在编译错误 ”的提示，另外有些控件虽然在执行的时候不占用显示空间，但是在设计视图的时候却占用显示空间，让人心情不爽，所以我还是倾向于AjaxPro这个第三方控件。不过AjaxPro本身好像没有提供定时执行某个方法的类，但是我们可以利用Js本身的方法，它就是setInterval("方法名()",间隔多少微秒)，没研究微软的 Ajax.Net类库，我估计它的最终效果也是采用这个方法或者类似方法来实现的。（如果只想执行一次，可以使用setTimeout("方法名()",间隔多少微秒)这个方法。用AjaxPro实现二级联动
在实际asp.net项目中经常会遇到无刷新二级或者N级(N>=2)联动情况，其实N级联动和二级联动的原理都是一样的，实现这种办法有很多，一种是纯脚本实现（动态生成Array数组），一种 是采用微软的Ajax.net中的UpdatePanel来实现，今天我给大家来展示如何采用AjaxPro来实现，相关文章请参考http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/2026908.aspx《AjaxPro与服务器端交互过程中如何传值》一文。读者完全可以根据实际代码更改成三级联动的例子。AjaxPro与服务器端交互过程中如何传值
用asp.net开发Ajax有两种主流，一种是微软推出的技术，其中一个最常用的就是UpdatePanel控件，还有一种是AjaxPro技术。 这种技术有着各自的特点。采用微软的技术开发也沿用了微软一贯的简单化、傻瓜化的特点，开发简单Ajax程序几乎不需要了解任何网页脚本知识和XHTML知识，缺点也有一些，通常会带来一些不必要的网络流量（整个UpdatePanel控件内所有的控件内容都会提交），另外在VS2005下经常会出现“***不是已知元素 原因可能是网站中存在编译错误 ”的提示，虽然有治标不治本的办法（见拙作：***不是已知元素 原因可能是网站中存在编译错误中提到的解决办法），但是经常出现这种提示，也够让人心烦的。 而AjaxPro的起点较高，需要开发人员孰知Js脚本知识和XHTML相关知识，因为所有的方法需要你自己编写网页脚本。开发速度相对会较慢一点，调试也会困难一点（JS调试就是麻烦）。 讲述了Ajax如何把HTML控件的值传递给服务器方法。
AjaxCore.Ajax=function(type,url,onload,params,contentType){
this.req=null;
this.url=url;
this.params=params;
if(type){
this.type=type;
}else{
this.type="GET";
}
if(!contentType && type=="POST"){
this.contentType="application/x-www-form-urlencoded; charset=UTF-8";
}else{
this.contentType=contentType;
}
this.onload=onload;
this.responseText=null;
this.GetHttpRequest();
}AjaxCore.Ajax.prototype.GetHttpRequest=function(){
if(window.ActiveXObject){
this.req=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
this.req=new XMLHttpRequest();
}
}AjaxCore.Ajax.prototype.SendRequest=function(){
var loader=this;
this.req.onreadystatechange=function(){
loader.OnReadyState.call(loader);
}
this.req.open(this.type,this.url,true);
if(this.contentType){
this.req.setRequestHeader("Content-Type",this.contentType);
}
this.req.send(this.params);
}AjaxCore.Ajax.prototype.OnReadyState=function(){
var ready=this.req.readyState;
var data;
if(ready==4){
if(this.req.status==200 || this.req.status==0){
this.responseText=this.req.responseText;
}else{
this.responseText="false";
}
}else{
this.responseText="load";
}
this.onload.call(this,this);
}
WebForm2.aspx:<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="test1.WebForm2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script src="Ajax.js" type="text/javascript"></script>
<script type="text/javascript">
function func()
{
var url="WebForm2.aspx?type=send";
var ajax = new AjaxCore.Ajax("POST",url,receiveInfo,null);
ajax.SendRequest();
}
function receiveInfo(data)
{
if(data.responseText == "false")
{}
else if(data.responseText=="load")
{}
else
{
document.getElementById("txtBox").value = data.responseText;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" onclick="func()" value="test" />
<input type="text" id="txtBox" />
</div>
</form>
</body>
</html>
WebForm2.aspx.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;namespace test1
{
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request["type"] != null)
{
Response.Write("成功!!!");
Response.End();
}
}
}
}
//这是两个完整的页.复制出来用就可以了.相应的注释说明了怎么做到的.
//default.aspx页<%@ 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 xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title> <script language="javascript" type="text/javascript">
// <!CDATA[var req;//全局变量
function UserNameCheck() {var username= document.getElementById('username').value; //获得文本框的值
var url ="pre.ashx?user_name=" + escape(username);//指定请求发送的url地址和参数
if(window.XMLHttpRequest)
{
req = new XMLHttpRequest(); //建立XMLHttpRequest对象
}
else if(window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET",url,true);//向服务器发送请求
req.onreadystatechange=callback;//指定回调函数
req.send(null);
}function callback() //回调请求
{
if(req.readyState==4) //判断接受到的响应的状态,如果是4表示加载完毕
{
if(req.status==200)
{
parseMessage(); //收到服务器数据后进行解析
}else
{
alert('错误:' + req.statusText);
}
}else //响应未加载成功时,页面中的代码
{
document.getElementById('check_username').innerText='正在验证用户名.....';
}
}function parseMessage() //对返回数据进行解析
{
var xmlDoc = req.responseXML.documentElement; //xmlDoc 变量用来存放接收到的XML格式
var node = xmlDoc.getElementsByTagName('info');//获得XML数据中的节点的数据
document.getElementById('check_username').innerText=node[0].firstChild.nodeValue;//设置<span>标记中的HTML代码
}
}// ]]>
</script></head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="username" runat="server" onBlur="UserNameCheck()"></asp:TextBox><span
id="check_username"></span><br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Submit" runat="server" Text="按 纽" /></div>
</form>
</body>
</html>
//pre.ashx 页<%@ WebHandler Language="C#" Class="pre" %>using System;
using System.Web;public class pre : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/xml";
context.Response.Buffer = false;//由于禁用了缓存,处理程序输出就不会在传输到浏览器前缓存到服务器端内存中 string username = context.Request["user_name"]; string xml = "<?xml version=\"1.0\" encoding=\"gb2312\" ?>";
if (username.Equals("") || username == null)
{
xml += "<message><info>Username is required !></info></message>";
}
else if (username == "wzt226")
{
xml += "<message><info>Username has exsites ,Please choose other username !></info></message>";
}
else
{
xml += "<message><info>Username is approved!></info></message>";
}
context.Response.Write(xml);
}
public bool IsReusable {
get {
return false;
}
}}