zoukankan      html  css  js  c++  java
  • ajax技术制作得在线歌词搜索功能

    1<!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>无标题文档</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) {//初始化、指定处理函数、发送请求的函数
    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
  • 相关阅读:
    element ui 权限 全选和半选
    div 内容垂直居中
    ajax 传递list2
    mysql学习03-sql执行加载顺序
    mysql学习02-mysql存储引擎(InnoDB,MyISAM)
    mysql学习01-mysql架构
    没有项目的源码,在eclipse下进行tomcat的远程调试,小计一下。
    win10系统,使用SangforHelperTool诊断工具进行修复时,无法安装虚拟网卡。
    postman在有登录认证的情况下进行接口测试!!!
    MongoDB4.0及以上的版本安装时无法启动服务。
  • 原文地址:https://www.cnblogs.com/ymyglhb/p/1265206.html
Copyright © 2011-2022 走看看