Ajax初体验(一)

Ajax(Asynchronous JavaScript and XML),按我的理解,就是异步执行的JavaScript and XML,它的核心是XMLHttpRequest,是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。它带给用户的体验就是页面无刷新。最简单的应用象Gmail中，发信时输入对方邮件地址时，出现的友好提示。

Ajax的网站：
http://www.schwarz-interactive.de/
ajax的google上的中文讨论组:
http://groups.google.com/group/AjaxCn
E文的：
http://groups.google.com/group/ajaxpro

接下来我做这样一个程序，在一个文本框中输入字符，文本框下边就提示最和它匹配的内容。效果类似Gmail的输入邮件地址时，下边出现的提示。在这儿，提示内容提取Sql server 2000的Northwind库customers表Country字段的内容。在数据未加载完成前，显示Loading...这样的提示。

1.先下载http://www.schwarz-interactive.de/download/5.11.4.2.zip
解压后有AjaxPro.dll，AjaxPro.2.dll文件，AjaxPro.2.dll应该是for .net 2.0的。
我用的是vs2003.net所以用AjaxPro.dll。
2.把AjaxPro.dll复制到web应用程序的bin目录，在项目中添加对AjaxPro.dll的引用
3.web.config的<system.web>节中加入：
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
</httpHandlers>
意思是将ajaxpro路径下的文件扩展名为.ashx的文件的HTTP POST和HTTP GET请求映射到类AjaxPro.AjaxHandlerFactory，该类在文件AjaxPro.dll中的程序集AjaxPro中。httpHandlers元素说明详见msdn>>

4.添加一个web窗体test.aspx，切换到cs文件,添加引用:

using System;

using System.Data;

using System.Data.SqlClient;

using AjaxPro;

5.Page_Load中注册:

private void Page_Load(object sender, System.EventArgs e)
    {
                 Utility.RegisterTypeForAjax(typeof(test));
    }

此处test是Page_Load所在类的完整的命名空间(namespace test)。

6.从Sql server 2000的Northwind库里面customers表中提出Country字段的内容。
代码如下：

[AjaxMethod]

public string getData( string inputString )

{

System.Threading.Thread.Sleep(1000); //进程睡眠(延时)1秒

string temp = "";

if (inputString != "")

{

string sqlStr = "SELECT Country FROM Customers where Country like '%" +inputString+"%'";

SqlConnection conn = new SqlConnection(@"server=.;database=NorthWind;User ID=sa;password=123;Persist Security Info=true;");

SqlCommand cmd = new SqlCommand(sqlStr,conn);

conn.Open();

SqlDataReader myReader = cmd.ExecuteReader();

try

{

while (myReader.Read())

{

temp += myReader.GetString(0).ToLower().Replace(inputString.ToLower(),"<font color=red>"+inputString+"</font>")+"<br>" ; //把匹配的内容替换为红色显示

}

finally

{

myReader.Close();

conn.Close();

}

return temp;

}

注意：在该方法前要加 [AjaxMethod]，还有
System.Threading.Thread.Sleep(1000);
为了看到loading的效果，我有意让进程延时1秒。

7. 进入test.aspx的html编辑视图，<form>中加入如下代码：

<div id="loadinfo" style="visibility:hidden;position:absolute;left:168px;top:19px;background-color:Red;color:White;font-family: Verdana;font-size: 12px;">Loading

</div>

8.在test.aspx的<head>区加入以下代码：

test.test.onLoading = function(b)

{

var l = document.getElementById("loadinfo");

l.style.visibility = b ? "visible" : "hidden";

}

function doTest2()

{

test.test.getData(document.getElementById("txtInput").value, doTest2_callback);

}

function doTest2_callback(res)

{

var p = res.value;

var layer1 = document.getElementById("Layer1");

layer1.style.visibility = (p == "") ? "hidden" : "visible";

document.getElementById("Layer1").innerHTML = p;

}

</script>

其中test.test.onLoading是namespace.class.onLoading的格式，onLoading是ajax内定这么写的。参数b是一个bool值,当请求的类正在执行时，结果为true，否则为false。用一个三元表达式控制loading层(id为loadinfo)的显示和隐藏。
test.test.getData中,getData应该与后台代码中取数据的类名一致，但是注意一点，结果的返回用doTest2_callback函数的参数res按收。
在doTest2_callback(res)中，把获得的数据显示到Layer1层。这儿，当返回的内容为空时，Layer1层不显示。

9.完成后的完整代码 Ajaxtest.rar

10，编译运行程序。输入内容看一下效果。

转载于:https://www.cnblogs.com/yao/archive/2006/01/13/316629.html

Ajax初体验(一)相关推荐

SpringMVC学习10之AJAX初体验和了解
Ajax了解 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网 ...
ES6 Generator 初体验
2019独角兽企业重金招聘Python工程师标准>>> ES6 Generator 初体验听说 ES6 的 Generator 是一个很神奇的函数,所以去了解了一下. 因为它不同于 ...
在JS 中使用 fetch 初体验
在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest ...
node.js 初体验
node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...
js实战代码系列—周杰伦给你报时间+网页页签制作模板+jQuery初体验
等到下次需要用的时候,可以回来找模板用哈哈哈哈! 刚碰jQuery,今天是个好日子,明天继续学jQuery,明天也是个好日子. https://blog.csdn.net/hanhanwanghaha ...
Vue快速上手笔记1 - 使用初体验
Vue快速上手笔记1 - 使用初体验博主:李俊才邮箱:291148484@163.com 若本文中存在的错误请告知博主更正希望对大家有所帮助专题目录:https://blog.csdn.net ...
python--爬虫入门（七）urllib库初体验以及中文编码问题的探讨
python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...
[LBS学习笔记 1]高德数据可视化初体验
高德数据可视化初体验背景换了新工作,虽然还是java开发,但是之前搞做在线教育的,现在做地图相关的事.因此,花了些时间学了空间索引相关的内容,后期会写关于空间索引相关的内容,这期写地理数据可视化相 ...
小猪的Python学习之旅 —— 13.文字识别库pytesseract初体验
小猪的Python学习之旅 -- 13.文字识别库pytesseract初体验标签:Python 引言度过了短暂的春节假期,又要开始继续搬砖了,因为还处于节后综合征,各种散漫,不想看任何代码相关 ...

Ajax初体验(一)

Ajax初体验(一)相关推荐

最新文章

热门文章