XMLHttpRequest对象:

该对象是处理所有服务器通信的对象。通过XMLHttpRequest对象与服务器进行对话的是javascript技术。这不是一般的应用程序流,这恰恰是ajax的强大之处。
ajax基本上就是将javascript和XMLHttpRequest对象放在WEB表单与服务器之间,当用户填写好表单之后并不是将表单数据直接发送给服务器,而是通过javascript获取表单数据并向服务器发送请求,同时用户屏幕并不会闪烁,消失或者延迟。换句话说,javascript代码向服务器发送请求是幕后操作的,用户甚至不知道请求的发出,而且javascript向服务器发送请求时异步的,在发送请求的同时用户可以继续浏览网页,滚动,或者使用应用程序。
当发送给服务器的数据经过一系列的逻辑处理之后,返回的数据同样是由javascript代码接受,而当接收到后台返回的数据时,javascript代码可以对该数据进行进一步的操作,可以迅速的更新表单数据,让人感觉到应用程序是立即完成的,同时可以对数据进行进一步的运算,再发送另一个请求,而这一切的处理都是不需要用户干预的,这就是XMLHttpRequest对象的强大之处,他可以根据需要自行与服务器进行交互,用户甚至完全不知道幕后所发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验,但是背后又拥有互联网的全部强大力量。
创建XMLHttpRequest对象:
var httprequest = new XMLHttpRequest();
javascript的基本任务
1、获取表单数据
2、修改表单数据(更行表单数据)
3、解析HTML和XML
 
对于不同的浏览器,声明XMLHttpRequest对象的方法是有差异的,在IE中,由于可能安装的javascript版本可能不同,所以声明XMLHttpRequest对象的方法也有所不同,声明对象的方法为:
       使用Microsoft 浏览器
var xmlhttp = false;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
  xmlhttp = new ActiveXObject("Macrosoft.XMLHTTP");
}
   catch(e2)
{
  xmlhttp = false;
}
}
 
使用非microsoft浏览器:
var xmlhttp = false;
try
{
xmlhttp = new XMLHttpRequest();
}
 
支持多浏览器的声明方法:
var xmlhttp = false;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
   xmlhttp = new ActiveXObject("Macrosoft.XMLHTTP");
}
   
   catch(e2)
{
   xmlhttp = false;
}
}
 
if(!xmlhttp && typeof(XMLHttpRequest) != 'undefined')
{
xmlhttp = new XMLHttpRequest();
}
 
完整的ajax实例
<!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></title>
    <script type="text/javascript">
        //发出服务器请求
        function callserver() {
            //声明XMLHttpRequest对象
            var xmlhttp = false;
            try {
                xmlhttp = new ActiveXObject("Mxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    xmlhttp = new ActiveXObject("Macrosoft.XMLHTTP");
                }
                catch (e2) {
                    xmlhttp = false;
                }
            }
            if (!xmlhttp && typeof (XMLHttpRequest) != 'undefined') {
                xmlhttp = new XMLHttpRequest();
            }
            else {
                alert("创建XMLHttpRequest对象出错!");
            }
            //向服务器发送请求
            xmlhttp.open("post", "Getdata.ashx?ts=" + new Date(), false); //准备向服务器的Getdate.ashx发出post请求
 
            //监听onreadystatechange()事件,当 readyState 为 3 时,它也可能调用多次。
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {
                        var result = xmlhttp.responseText;
                        document.getElementById("txtbox1").value = result;
                    }
                }
            };
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <input type="text" id="txtbox1" style="width:300px;" />
    <input type="button" value="ajax提交" />
</body>
</html>
 
Getdata.ashx中处理
namespace WebApplication1.html
{
    /// <summary>
    /// Getdata 的摘要说明
    /// </summary>
    public class Getdata : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            string ts = context.Request["ts"];
            context.Response.Write(ts);
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
 
 
判断用户是否已经注册实例(jquery)
 
当文本框失去焦点判断用户名是否已经存在
 
    <asp:TextBox ID="LoginName" runat="server" CssClass="txtstyle"></asp:TextBox>
    <span id="usernamerepeat" style="color:Red;">用户名已经存在!</span>
 
jquery代码:
        <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#usernamerepeat").hide();
                var UsernameId = "<%=LoginName.ClientID %>";
                var id = "#" + UsernameId;
                $(id).blur(function () {
                    var username = $(id).val();
                    $.post("RegisterHandle.ashx", { "username": username }, function (data, status) {
                        if (status == "success") {
                            if (data == "1") {
                                $("#usernamerepeat").show();
                            }
 
                            else {
                                $("#usernamerepeat").hide();
                            }
                        }
 
                        else {
                            alert("ajax错误!");
                        }
                    });
                });
            });
        </script>
 
RegisterHandle.ashx处理代码:
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            string UserName = context.Request["username"];
 
            SqlConnection con = new SqlConnection();//声明管道
            con.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["con"].ToString();//连接数据库管道
            con.Open();//打开管道
 
            SqlCommand cmd = new SqlCommand();
 
            cmd.CommandText = "select * from Users where UserName=@UserName";//查询
            cmd.Parameters.AddWithValue("@UserName", UserName);
 
            cmd.Connection = con;//实行管道通讯
 
            SqlDataReader reader = cmd.ExecuteReader();
 
            if (reader.Read())
            {
                context.Response.Write("1");
            }
 
            else
            {
                context.Response.Write("0");
            }
        }