手写JS 实现AJAX功能~~~~

看来你是新手，去51aspx.com DOWN个DEMO看看吧

register.html
<!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>
    <title>Register</title>
<script type="text/javascript">
//声明一个全局变量,用来保存XMLHttpRequest对象的引用(未初始化)
var xmlHttp = false;

//创建XMLHttpRequest对象函数
function GetXMLHttpRequest()
{
    //如果是IE浏览器,这里不考虑其他浏览器了
    else if(window.ActiveXObject)
    {
    try
    {
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
    try
    {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e2)
    {
    xmlHttp = false;
    }
    }
    }
    return xmlHttp;
}

//当用户名文本框失去输入焦点时响应
function checkUserName()
{
// 检查文本框是否有输入
var txtUserName = document.getElementById('txtUserName');
if (txtUserName.value == "")
return;                xmlHttp = GetXMLHttpRequest();
                var postString = "UserName=" + txtUserName.value;
// 构造将XMLHttpRequest对象将请求的服务器端的URL字符串
var url = "CheckUserNamePost.aspx";
// 建立与服务器端的连接
xmlHttp.open("Post", url, false);
//如果Open方法定义为POST，可以定义表单方式上传
                xmlHttp.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded" )
// 设置回调函数
xmlHttp.onreadystatechange = callBack_CheckUserName;
// 发送请求
xmlHttp.send(postString);
}

    //处理响应
function callBack_CheckUserName()
{
    var lblMessage = document.getElementById("lblMessage");
// 4代表服务器端执行完毕并已经成功返回
if (4 == xmlHttp.readyState)
{
    if(200 == xmlHttp.status)
    {
    //通过responseText属性得到服务器端实际返回的文本
    var isValid = xmlHttp.responseText;

    //根据isValid的值决定lblNameMessage的显示内容
    lblMessage.innerHTML = (isValid.toLowerCase() == "true") ? "用户名可用" : "用户名已被注册";
}
}
else
{
    lblMessage.innerHTML = "数据查询中...";
}
}
</script>
</HEAD>
<body>
<form method="post" action="">
    <div>
        用户名:
    <input type="text" id="txtUserName" name="txtUserName" onblur="return checkUserName();"/>
    <span id="lblMessage"></span><br>
        密    码:
        <input type="password" id="txtPassword" name="txtPassword" /><br>
        <input type="submit" id="btnRegister" name="btnRegister" value="注册" />
    </div>
</form>
</body>
</html>CheckUserNamePost.aspx.cs
public partial class CheckUserNamePost : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();
        // 得到用户选择的用户名
        string username = Request.Form["UserName"];        // 模拟验证实际应用中应查询数据库
        bool isValid = false;
        if (String.Compare(username, "amandag", true) != 0)
        {
            isValid = true;
        }        // 发送验证结果
        Response.ContentType = "text/html";
        Response.Write(isValid.ToString());
        Response.Flush();
        Response.Close();
    }
}

简单例子<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="test1.WebForm3" %><!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 type="text/javascript" language ="javascript" >
        var xmlHttp;
        function createXMLHttpRequest()
        {
            if(window.ActiveXObject)
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if(window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }
        function addNumber()
        {
            createXMLHttpRequest();
            var url= "WebForm3.aspx?Name="+document.getElementById('name').value;

            xmlHttp.open('GET',url,true);
            xmlHttp.onreadystatechange=showResult;
            xmlHttp.send(null);
        }         function showResult()
        {
            if(xmlHttp.readyState==4)
            {
                if(xmlHttp.status==200)
                {
                    alert(xmlHttp.responseText);
                    document.getElementById('result').innerHTML =xmlHttp.responseText;
                }
            }
        }
     </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <input id="name" type ="text" onchange ="addNumber();"  />
      <div id="result"  > </div> 
       <br />
       <input id="pwd" type ="text" />
    </div>
    </form>
</body>
</html>
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 WebForm3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            send();
        }        public void send()
        {
            if (Request["Name"] != null)
            {
                string result = GetName();
                Response.Write(result);
                Response.End();
            }
        }        public string GetName()
        {
            string Name = Request["Name"].ToString();
            if (Name == "test")//测试
            {
                return "对不起，已有用户名，请重新试试";
            }
            else
            {
                return "恭喜你，此名称可用！";
            }
        }     }
}

下面的代码能实现数字时钟的功能，不过这只是告诉你简单的ajax用POST请求的过程和方法，实际上做数字时钟用下面的太麻烦也太浪费资源。
  <script language="javascript" type="text/javascript">
    var xmlhttp;

    function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
//alert("IE");
}
else if(window.XMLHttpRequst)
{
xmlhttp=new XMLHttpRequest();
}
}function startRequest()
{
createXMLHttpRequest();
xmlhttp.onreadystatechange=handleStateChange;
xmlhttp.open("POST","Default3.aspx",true);//这个页面返回当前的时间日期，你把地址改成你要请求的地址就OK了
xmlhttp.send(null);
}function handleStateChange()
{
var h=document.getElementById("sp1");
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{

h.innerHTML=xmlhttp.responseText;
}
else if(xmlhttp.status==404)
{
h.innerHTML="<br>找不到请求的服务器资源！";
}
}
else if(xmlhttp.readyState==0)
{
h.innerHTML="<br>未初始化！";
}
else if(xmlhttp.readyState==1)
{
h.innerHTML="<br>正在加载^^^^^！";
}
else if(xmlhttp.readyState==2)
{
h.innerHTML="<br>已经加载完成！";
}
else if(xmlhttp.readyState==3)
{
h.innerHTML="<br>正在和服务器交互";
}

}

    //这个函数每秒钟调用一次请求，以便每秒钟都更新时间。
    function testService()
    {
        setInterval("startRequest();",1000);

    }


    </script>

cc318.com/aspnet/ 这个上有很多源码,你可以去下一个来研究一下.其实很简单.

整个jquery把，框架不大，到挺适用。jqueryvar res;
$.get("url?xxx=xx",function{value}{res=value}); //get方式提交
$.post("url",{xxx:"xx"},function(value){res=value}); //post方式，参数以{xxx:"xx"} json方式提交
推荐你是用jquery，呵呵，因为你页面上除了ajax以外，总免不了其他的特效，jquery这个轻量级的js框架，使用起来还是很方便的说

调试易

手写JS 实现AJAX功能~~~~

解决方案 »