原生的 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");
}
分享到:
相关推荐
场景: vue-router 路由钩子 beforeRouteEnter 可以用来在初始进入页面前,http 异步获取数据 mockData ,预先判断是进入 A 页、还是 B 页,还是留在本页;而如果留在本页的话,还需要在 mounted 根据 mockData 来...
实例205 高亮显示数据行并实现双击数据行 弹出新窗口 325 实例206 学生成绩不及格设置单元格突出显示 为红色 326 实例207 根据多个字段内容设置不同数据行的 背景色 327 实例208 自定义分页并结合下拉列表实现页次 ...
本文实例分析了Ajax异步提交数据返回值的换行问题。分享给大家供大家参考,具体如下: 前面分析介绍了《Javascript基于AJAX回调函数传递参数》及《IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别》,学习了...
本文实例讲述了Android开发之HttpClient异步请求数据的方法。分享给大家供大家参考,具体如下: 前面一篇Android开发笔记之:AsyncTask的应用较为详细的讲述了Asynctask的原理与应用,这里来结合使用一下HttpClient与...
用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果。
本文实例为大家讲解了jquery zTree树插件的基本使用方法,具体内容如下 一、节点模糊搜索功能:搜索成功后,自动高亮显示并定位、展开搜索到的节点。 二、节点异步加载:1、点击展开时加载数据;2、选中节点时加载...
在.NET中使用AJAX技术来做服务器端和客户端交互,用JSON做为在异步应用程序中发送和接收信息的数据格式。
实例076 将数据库数据显示到树视图中 100 实例077 用TreeView控件制作导航界面 102 实例078 用TreeView控件遍历磁盘目录 102 实例079 修改TreeView控件中的节点 105 实例080 将XML文件节点绑定到TreeView控件中 ...
实例076 将数据库数据显示到树视图中 100 实例077 用TreeView控件制作导航界面 102 实例078 用TreeView控件遍历磁盘目录 102 实例079 修改TreeView控件中的节点 105 实例080 将XML文件节点绑定到TreeView控件中 ...
实例076 将数据库数据显示到树视图中 100 实例077 用TreeView控件制作导航界面 102 实例078 用TreeView控件遍历磁盘目录 102 实例079 修改TreeView控件中的节点 105 实例080 将XML文件节点绑定到TreeView控件中 ...
实例076 将数据库数据显示到树视图中 100 实例077 用TreeView控件制作导航界面 102 实例078 用TreeView控件遍历磁盘目录 102 实例079 修改TreeView控件中的节点 105 实例080 将XML文件节点绑定到TreeView控件中 ...