Js实现异步刷新(原创)

看了ajax的一些资料，稍微学到了一点东西，于是写出来与大家分享，由于读的资料比较少和自己的看法可能不全面，再加上自己的拙笔，如果不小心写错，还请大家

谅解

一.ajax理论叙述

ajax并不是一个新技术，它只是几项技术的巧妙组合，让它们协同发挥作用，从而达到异步刷新的效果，实际上就是不用刷新页面就能实现与服务器的交互。这一特点

要归功与XMLHTTP组件和XMLHttpRequest对象.

异步更新原理:用XMLHTTP发送请求得到服务器端应答数据，在不重新载入整个页面的情况下，用js操作Dom最终更新页面

ajax历史介绍：最早应用于XMLHTTP的是微软，IE(IE5,IE6)通过允许开发人员在web页面内部使用XMLHTTP Active组件扩展自身的功能，这样以来，开发人员就可以

不用从当前页面导航而直接向服务器传输数据或者从服务器上获得数据。Mozilla,Konqueror,Opera等的回应是：创建它自己的继承XML代理类--XMLHttpRequest,对于大

多数情况XMLHttpRequest对象和XMLHTTP组件很相似(方法和属性也类似,只是有一小部分属性不支持) .

二.示例

页面StartXmlHttpRequestChuanZhi.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StartXmlHttpRequestChuanZhi.aspx.cs" Inherits="XmlHttpRequestTest.StartXmlHttpRequestChuanZhi" %>

<!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">
    var userName;
    var passWord;
    var xmlHttpRequest;
    //XmlHttpRequest对象
    function createXmlHttpRequest(){
        if(window.ActiveXObject){ //如果是IE
            return new ActiveXObject("Microsoft.XMLHTTP");
        }else if(window.XMLHttpRequest){ //非IE浏览器
            return new XMLHttpRequest();
        }
    }
    function onLogin(){
        var url = "http://localhost:1638/LoginService.aspx?username=123&password=456";
        //1.创建XMLHttpRequest组建
        xmlHttpRequest = createXmlHttpRequest();

        //2.设置回调函数
        xmlHttpRequest.onreadystatechange = HuiDiaoFun;

        //3.初始化XMLHttpRequest组建
        xmlHttpRequest.open("post",url,true);

        //4.发送请求
        xmlHttpRequest.send(null);
    }
    //回调函数
    function HuiDiaoFun(){
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            var b = xmlHttpRequest.responseText;
            if (b == "true") {
                alert("请求数据成功!");
            }
            else {
                alert("请求数据失败!");
            }
        }
    }
    </script>
</head>
<body >
    <form id="form1" runat="server">
    <div>
            <input id="btnRequest" type="button" value="请求数据" οnclick="onLogin()"/></div>
    </form>
</body>
</html>

页面LoginService.aspx

前台:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LoginService.aspx.cs" Inherits="XmlHttpRequestTest.LoginService" %>

后台:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace XmlHttpRequestTest
{
    public partial class LoginService : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string username = Request.QueryString["username"].ToString();
            string password = Request.QueryString["password"].ToString();
            if (username.Trim() == "123" && password.Trim() == "456")
            {
                Response.Write("true");
            }
            else
            {
                Response.Write("false");
            }
        }
    }
}