码迷,mamicode.com
首页 > Web开发 > 详细

分享一个自己做的ajax请求页面

时间:2015-02-08 09:06:45      阅读:377      评论:0      收藏:0      [点我收藏+]

标签:html5   ui   css   ajax   

为机器人做html ui,用了Amaze UI的代码 感觉里面的按钮和文本框样式棒极了,拿来和大家分享。

<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <title>Robot</title>
  <link rel="stylesheet" href="assets/css/amazeui.min.css">
  <script src="assets/js/jquery.min.js"></script>
</head>
<body>
<div class="am-g">
  <h2 style="text-align:center;">ROBOTv2.0</h2>
  <div class="am-u-md-8 am-u-sm-centered">
    <form class="am-form">
      <fieldset class="am-form-set">
        <input type="text" id="txt1" onkeyup="showHint(this.value)" placeholder="咱俩聊聊。。"/>
        <p>Ans: <span id="txtHint"></span></p> 
      </fieldset>
      
      <button class="am-btn am-btn-primary am-btn-block" onclick="loadXMLDoc(aaaa)">Clean</button>
    </form>
  </div>
</div>
<script>
var xmlHttp
function showHint(str)
{
  if (str.length==0)
    { 
    document.getElementById("txtHint").innerHTML="";
    return;id
    }
  xmlHttp=GetXmlHttpObject()
  if (xmlHttp==null)
    {
    alert ("不支持ajax!");
    return;
    }
  var url="robot.php";
  url=url+"?info="+str;
  url=url+"&sid="+Math.random();
  xmlHttp.onreadystatechange=stateChanged;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
return xmlHttp;
}
</script>
</body>
</html>

效果如图:

技术分享

分享一个自己做的ajax请求页面

标签:html5   ui   css   ajax   

原文地址:http://blog.csdn.net/qq754406613/article/details/43612753

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!