ajax技术制作得在线歌词搜索功能-优快云博客

本文介绍了一个简单的在线歌词查询系统实现方案，使用JavaScript进行AJAX调用以获取远程服务器上的歌词数据，并展示了完整的HTML和JavaScript代码。

<!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

转载于:https://www.cnblogs.com/ymyglhb/archive/2008/08/11/1265206.html