Using AJAX technology to make online lyrics search function

Source: Internet
Author: User
Tags object query return window

<! 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 <meta http-equiv = "Content-Type" content = "text / html; charset = gb2312" />
 5 <title> Untitled Document </ title>
 6 </ head>
 7
 8 <body>
 9 <style type = "text / css">
10 <!-
11body {
12background-color: #FFFFFF;
13 font-size: 85%;
14 font-family: Verdana;
15 margin-top: 10px;
16 margin-left: 10px;
17}
18a: link {color: # 3737c8}
19a: active {color: # f00;}
20a: visited {color: # 639;}
21->
22 </ style>
23 <script language = "javascript">
24 var http_request = false;
25 function send_request (url) {// Initialization, designated processing function, function for sending requests
26 http_request = false;
27 // Start initializing XMLHttpRequest object
28 if (window.XMLHttpRequest) {// Mozilla browser
29 http_request = new XMLHttpRequest ();
30 if (http_request.overrideMimeType) {// Set MiME category
31 http_request.overrideMimeType ('text / xml');
32}
33}
34 else if (window.ActiveXObject) {// IE browser
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) {// Exception, object creation failed
44 window.alert ("Cannot create an XMLHttpRequest object instance.");
45 return false;
46}
47 http_request.onreadystatechange = processRequest;
48 // Determine the method and URL of the request and whether to execute the next code synchronously
49 http_request.open ("GET", url, true);
50 http_request.send (null);
51}
52 // Functions that return information
53 function processRequest () {
54 if (http_request.readyState == 4) {// determine the state of the object
55 if (http_request.status == 200) {// The message has been successfully returned, and processing of the message is started
56 //alert(http_request.responseText);
57 document.getElementById ("result"). InnerHTML = http_request.responseText;
58} else {// Page is not normal
59 alert ("The page you requested is abnormal.");
60}
61}
62}
63 function dosearch () {
64 var f = document.form1;
65 var geci = f.geci.value;
66 if (geci == "") {
67 window.alert ("Please enter the lyrics you want to query");
68 f.geci.focus ();
69 return false;
70}
71 else {
72 document.getElementById ("result"). InnerHTML = "Query, please wait";
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"> One hundred thousand lyrics online free query </ span> </ center>
85 <p> </ p>
86 Please enter song name:
87 <input name = "geci" type = "text" id = "geci" value = "东风破" size = "60" height = "30" maxlength = "50" onKeyDown = "submitForm ()" />
88 <input type = "button" name = "search" value = "query lyrics" onClick = "dosearch ()"> <br />
89 <span id = "result"> </ span>
90 </ form>
91 </ body>
92 </ html>

The author is requested to contact this site and note your name in time. Contact email: edu # chinaz.com (change # to @).


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.