异步显示数据实例

原生的 Javascript

    <script src="js/ajax.js" type="text/javascript"></script>
    <script type="text/javascript">
        function fun(){
            var reqUrl = "ashx/GetData.ashx";
            if(GetObj("oDiv").innerHTML.length == 0){
                oHttp.Get(reqUrl, "loadding", showinfo);
           }
        }
        function showinfo(context){
            if(context != "0"){
                var reqObj = eval(context);
                var tbRow = "";
                for(var i = 0; i < reqObj.length; i++){
                    tbRow += "<tr><td>"+reqObj[i].dealerid+"</td><td>"+reqObj[i].dealername+"</td></tr>";
                }
                GetObj("oDiv").innerHTML = "<table>"+tbRow+"<table>";
            }
            else{
                GetObj("oDiv").innerHTML = "<span style=\"color:#F00;\">暂无数据</span>";
            }
        }
    </script>

/**
 *  Ajax.js 
 * @author DylanChan
 */
var oHttp = 
{
	XMLHttpRequest:function()
	{
		try
		{
		    //创建XMLHttpRequest对象
			var request = new XMLHttpRequest();
			return request;
		}
		catch(ex)
		{
			var arrXMLHttpRequest = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
			for(var i = 0; i < arrXMLHttpRequest.length; i++)
			{
				try
				{
					var request = new ActiveXObject(arrXMLHttpRequest[i]);
					return request;
				}
				catch(oError)
				{}
			}
		}
		throw new Error("MSXML Is Not Installed On Your System!");
	},
	Get:function(requestURL, loadDiv, fnCallBack)
	{
	    //获取XMLHttpRequest对象
		var oRequest = oHttp.XMLHttpRequest();
		if(oRequest)
		{
		    //oRequest.open():创建新的Http请求，并指定此请求的提交方法，URL，以及验证信息
		    //get:用“Get”方式发送数据，只能256K
		    //requestURL:请求的URL，可以为绝对地址，或相对地址
		    //true：指定此请求方式为异步方式
		    oRequest.open("get", requestURL, true);
		    document.getElementById(loadDiv).innerHTML = "<img src=\"img/loadding.gif\" alt=\"loadding...\" style=\"width:39px; height:39px;\" />";
		    oRequest.onreadystatechange = function()
		    {
		        //0 － XMLHttpRequest对象还没有完成初始化,还没有调用send()方法
                //1 － XMLHttpRequest对象开始发送请求（载入）已调用send()方法，正在发送请求
                //2 － XMLHttpRequest对象的请求发送完成（载入完成）send()方法执行完成，已经接收到全部响应内容
                //3 － XMLHttpRequest对象开始读取服务器的响应（交互）正在解析响应内容
                //4 － XMLHttpRequest对象读取服务器响应结束（完成）响应内容解析完成，可以在客户端调用了
			    if(oRequest.readyState == 4)
			    {
				    if(oRequest.status == 200)
				    {
				        if(fnCallBack)
				        {
				            document.getElementById(loadDiv).style.display = "none";
					        fnCallBack(oRequest.responseText);
				        }
				    }
			    }
		    }
		    oRequest.send(null);
		}
	}
}

Jquery.Ajax 版

    <script type="text/javascript">
        function fun(){
            var reqUrl = "ashx/GetData.ashx";
            var reqUrl = "ashx/GetData.ashx";
            var oDiv = $("#oDiv");
            var userinfo = $("<table id=\"otb\"></table>");
            var oTable = $("#otb");
            if(oTable.length == 0){
                 oDiv.append(userinfo);
                $.ajax({
                    url : reqUrl,
                    dataType : "json",
                    beforeSend : function(){
                        //加载动态的loadding图片
                        GetObj("loadding").innerHTML = "<img src=\"img/loadding.gif\" alt=\"loadding...\" style=\"width:39px; height:39px;\" />";
                    },
                    success : function(data){
                        $(data).each(function(){
                            var tbRow = $("<tr><td>"+this.dealerid+"</td><td>"+this.dealername+"</td></tr>");
                            $("#otb").append(tbRow);
                        });
                    },
                    complete : function(){
                        //数据加载完成后隐藏 loadding 层
                        GetObj("loadding").style.display = "none";
                    }
                });
            }
        }
    </script>

Jquery.getJSON 版

<script type="text/javascript">
        function fun(){
            var reqUrl = "ashx/GetData.ashx";
            var oDiv = $("#oDiv");
            var userinfo = $("<table id=\"otb\"></table>");
            var oTable = $("#otb");
            if(oTable.length == 0){
                oDiv.append(userinfo);
                $.getJSON(reqUrl, function(json){
                    $(json).each(function(){
                        var tbRow = $("<tr><td>"+this.dealerid+"</td><td>"+this.dealername+"</td></tr>");
                        $("#otb").append(tbRow);
                    });
                });
            }
        }
    </script>

<input type="button" onclick="fun()" value="查询" /><div id="loadding"></div>
<div id="oDiv"></div>

Ashx文件

        string sql = "select dealerid, dealername from dealers";
        System.Data.DataTable dt = DAL.DBConnection.GetDataSet(sql);
        System.Text.StringBuilder sHtml = new System.Text.StringBuilder();
        if (dt != null && dt.Rows.Count > 0)
        {
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                if (i != dt.Rows.Count - 1)
                {
                    sHtml.Append("{\"dealerid\":\"" + dt.Rows[i]["dealerid"].ToString() + "\", \"dealername\":\"" + dt.Rows[i]["dealername"].ToString() + "\"},");
                }
                else
                {
                    sHtml.Append("{\"dealerid\":\"" + dt.Rows[i]["dealerid"].ToString() + "\", \"dealername\":\"" + dt.Rows[i]["dealername"].ToString() + "\"}");
                }
            }
            context.Response.Write("[" + sHtml.ToString() + "]");
        }
        else
        {
            context.Response.Write("0");
        }