ajax技术制作得在线歌词搜索功能

http://www.efish.cn/n14132.html

最新制作完成的在线歌词搜索功能，利用ajax技术，无刷新显示歌词，只需要输入你要查找的歌曲名或歌词。界面还不是很好看，完善中......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
3

<head>
4

<title>无标题文档</title>
6

</head>
7

<body>
9

<!--
11

body {
12

background-color: #FFFFFF;
13

font-size: 85%;
14

font-family: Verdana;
15

margin-top : 10px;
16

margin-left : 10px;
17

}
18

a:link{color:#3737c8}
19

a:active {color: #f00;}
20

a:visited {color:#639;}
21

-->
22

</style>
23

var http_request = false;
25

function send_request(url) {//初始化、指定处理函数、发送请求的函数
26

http_request = false;
27

//开始初始化XMLHttpRequest对象
28

if(window.XMLHttpRequest) { //Mozilla 浏览器
29

http_request = new XMLHttpRequest();
30

if (http_request.overrideMimeType) {//设置MiME类别
31

http_request.overrideMimeType('text/xml');
32

}
33

}
34

else if (window.ActiveXObject) { // IE浏览器
35

try {
36

http_request = new ActiveXObject("Msxml2.XMLHTTP");
37

} catch (e) {
38

try {
39

http_request = new ActiveXObject("Microsoft.XMLHTTP");
40

} catch (e) {}
41

}
42

}
43

if (!http_request) { // 异常，创建对象实例失败
44

window.alert("不能创建XMLHttpRequest对象实例.");
45

return false;
46

}
47

http_request.onreadystatechange = processRequest;
48

// 确定发送请求的方式和URL以及是否同步执行下段代码
49

http_request.open("GET", url, true);
50

http_request.send(null);
51

}
52

// 处理返回信息的函数
53

function processRequest() {
54

if (http_request.readyState == 4) { // 判断对象状态
55

if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
56

//alert(http_request.responseText);
57

document.getElementById("result").innerHTML = http_request.responseText;
58

} else { //页面不正常
59

alert("您所请求的页面有异常。");
60

}
61

}
62

}
63

function dosearch() {
64

var f = document.form1;
65

var geci = f.geci.value;
66

if(geci=="") {
67

window.alert("请输入你要查询的歌词");
68

f.geci.focus();
69

return false;
70

}
71

else {
72

document.getElementById("result").innerHTML="正在查询，请稍候

";
73

send_request('http://www.efish.cn/getgeci.aspx?m='+escape(geci));
74

}
75

}
76

function submitForm() {
77

if(window.event.keyCode==13) {
78

dosearch();
79

}
80

}
81

</script>
82

<p></p><p></p>
83

<form id="form1" name="form1" method="post" action="">
84

<center><span style="font-size:18px; color:#FF0000">十万歌词在线免费查询</span></center>
85

<p></p>
86

请输入歌曲名：
87

<input name="geci" type="text" id="geci" value="东风破" size="60" height="30" maxlength="50" onKeyDown="submitForm()" />
88

<input type="button" name="search" value="查询歌词" onClick="dosearch()"><br />
89

<span id="result"></span>
90

</form>
91

</body>
92

</html>
93

posted on 2006-09-21 15:46 网鱼阅读(642) 评论(2) 编辑收藏

Feedback

#1楼  2007-10-21 03:04 sa[未注册用户]

... 疲倦的时候想着你就擦亮我的梦想我会永远爱着 ... 　回复　引用　

注册用户登录后才能发表评论，请登录或注册，返回博客园首页。

首页博问闪存新闻园子招聘知识库

最新IT新闻:
· 伊朗封杀Gmail和Facebook等互联网服务
· 分析称专利之争让谷歌苹果两败俱伤
· Android平台发现新型手机病毒Rootsmart
· HTC首款Android4.0手机大曝光
· 这是不是你期待的 iPad 3？
» 更多新闻...

» 更多知识库文章...

China-pub 2011秋季教材巡展
China-Pub 计算机绝版图书按需印刷服务

自由空间无限畅想