c# asp.net js 实现异步调用 ajax基础

2009-07-15 17:58

具体实现功能 :实现无刷新 检测用户名 是否存在

其实使用下面的代码 改一改 可以实现好多ajax功能

快下班了写的有些简便

具体如下:

js 文件:

// JScript 文件
var xmlHttp;

//创建异步对象
function createXMLHttpRequest1()
{

    if (window.ActiveXObject)
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {
        xmlHttp = new XMLHttpRequest();
    }
}


//创建 发送字符串url
function createQueryString1()
{
    var firstName = document.getElementById("firstName").value;
    var queryString = "firstName1="+ firstName;
    return queryString;
}


//使用get方法 异步处理
function doRequestUsingGET1()
{
    createXMLHttpRequest1();
    var queryString = "CheckfirstName.aspx?"; //在 CheckfirstName 检测用户名
    queryString = queryString + createQueryString1()
   
   
    //方法 handleStateChange1 没有参数 直接使用方法名字引用
    xmlHttp.onreadystatechange = handleStateChange1;
   
    //如果 有参数就是 下面的例子:
    //xmlHttp.onreadystatechange = function(){ handleStateChange1(参数)}

    xmlHttp.open("GET", queryString, true);
    xmlHttp.send(null);
}


//使用 post方法 异步处理
function doRequestUsingPOST1()
{
    createXMLHttpRequest1();
    var url = "CheckfirstName.aspx?timeStamp=" + new Date().getTime();//在 CheckfirstName 检测用户名
    var queryString = createQueryString1();
    xmlHttp.open("POST", url, true);
   
    //相当于 委托中的 匿名方法
    xmlHttp.onreadystatechange = function()
    {
       if(xmlHttp.readyState == 4)
        {
            if(xmlHttp.status == 200)
            {        
               // alert("dd");
                parseResults1();
                //完成异步
            }
        }
     
    }
   
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
    xmlHttp.send(queryString);
}


//获取异步状态 作出相对响应---回调方法
function handleStateChange1()
{
    if(xmlHttp.readyState == 4)
    {
        if(xmlHttp.status == 200)
        {        
           // alert("dd");
            parseResults1();
        }
    }
}


//异步完成 执行方法
function parseResults1()
{
//    var responseDiv = document.getElementById("serverResponse");
//    if(responseDiv.hasChildNodes())
//    {
//        responseDiv.removeChild(responseDiv.childNodes[0]);
//    }
//    var responseText = document.createTextNode(xmlHttp.responseText);
//    responseDiv.appendChild(responseText);
   
    //获取服务端回传的数据
    var responseDiv = document.getElementById("username");
    responseDiv.innerHTML=xmlHttp.responseText;
}

Default.aspx :

首先引入 上面的js文件 <script type="text/javascript" src="JScript.js"></script>

在这个页面随便放个button (客户端控件)或 textbox (客户端控件)随便测试下就行了

在button clicke事件 或 text changge事件 中调用 doRequestUsingGET1()
或 doRequestUsingPOST1() 方法

服务端:

CheckfirstName.aspx:

 

也就是上面js文件中 的doRequestUsingPOST1 和 doRequestUsingGET1方法

var queryString = "CheckfirstName.aspx?"; //这句代码 中的CheckfirstName.aspx(也就是异步请求的服务端)

页面没什么内容 在onload 事件中写:

protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["firstName1"] != null)
        {
           string s= checkName(Request["firstName1"].ToString());

           Response.Clear();
           Response.Write("<h1>"+s+"</h1>");
           Response.End();
        }
    }

   //下面checkName 方法在这里我就简单做一下逻辑上的判断 其实应该是查询数据库... 之类的操作

   public string checkName(string name)
    {
        string uname = "";
        if (name == "123")
        {
            uname = "<h1>已经注册</h1>";
        }
        else
        {
            uname = "合法";
        }
        return uname;
    }

到这里就可以测试

   由于时间原因 没有整理好 大家将就先用下 有时间在整理一下 关于向服务器发送xml 及接收的问题

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值