运行环境:WAMP/XAMPP搭建的本地服务器。
预备知识:HTML + PHP的用户交互和表单,变量传递;上篇简介的Javascript类对象和Ajax技术。
由于生成的页面太丑,自行搜索了点CSS知识。稍微美化了一丢丢丢,前端只上代码不注释。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style type="text/css"> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,pre, form, fieldset, input, textarea, p, blockquote, th, td {padding: 0; margin: 0;} fieldset, img { border: 0; } table {border-collapse: collapse; border-spacing: 0;} ol, ul {list-style: none; } address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: normal;} caption, th {text-align: left;} h1, h2, h3, h4, h5, h6 {font-weight: normal;font-size: 100%;} q:before, q:after {content: '';} abbr, acronym {border: 0;} body{font: 20px/34px "微软雅黑";background: url(bg.jpg) no-repeat;} .contact *focus:{outline: none;} .contact{width: 700px;height: auto;background: #F6F6F6 url(blue.jpg) no-repeat; background-size:1000px 100px;margin: 40px auto;padding: 10px;box-shadow: 10px 10px 5px #888888;} .contact ul{width: 700px} .contact ul li{border-bottom:2px solid #FFFFFF; padding: 12px;} .contact ul li label{width: 120px;display: inline-block;float: left;} .contact ul li input[type=text]{width: 220px;height: 20px;border: 1px solid #ABABAB;padding: 3px 8px;border-radius: 2px;} .contact ul li input:focus{border-color:#0630ba;border-radius: 2px } #ext{width: 52px;height: 27px;border: 1px solid #ABABAB;border-radius: 2px;} #search{width: 80px;height: 30px;border: 1px sol #ABABAB;border-radius: 2px;position: absolute;left: 50%;top:20%;padding-top: 6px;padding-left: 6px;font-weight: bold;background: url(blue.jpg) no-repeat;background-size: 80px 200px;box-shadow: 5px 5px 5px #888888;} #searchResult{color: #FFFFFF;word-wrap:break-word;padding-left: 370px; } </style>
下面是表单的生成,比较简单。不作解释。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"> 5 <title>域名查询系统</title> 6 </head> 7 <body> 8 <!-- <form name="form1" method="post" action="get.php"> --> 9 <tbody> 10 <div class="contact"> 11 <form action="" name="cForm" method="post"> 12 <ul> 13 <li> 14 <label>域名</label> 15 <input name="dns" type="text" id="dns" placeholder="ZY-Net"> 16 <select id="ext"> 17 <option>com</option> 18 <option>cn</option> 19 <option>tel</option> 20 <option>mobi</option> 21 <option>net</option> 22 <option>org</option> 23 <option>asia</option> 24 <option>me</option> 25 <option>com.cn</option> 26 <option>net.cn</option> 27 <option>org.cn</option> 28 <option>gov.cn</option> 29 <option>hk</option> 30 </select> 31 </li> 32 </ul> 33 </form> 34 </div> 35 <button id="search">Search</button> 36 <p id="searchResult"></p>
接下来是重头戏,Ajax主角登场。不过也没啥难理解的,上篇的迁移运用。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script type="text/javascript"> 2 document.getElementById("search").onclick=function() 3 { 4 //发送Ajax查询请求并处理 5 var request = new XMLHttpRequest(); 6 request.open("POST","get.php"); 7 var data = "dns=" + document.getElementById("dns").value + "&ext=" + document.getElementById("ext").value; 8 9 request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 10 request.send(data); 11 request.onreadystatechange = function() 12 { 13 if( request.readyState === 4 ){ 14 if( request.status === 200 ){ 15 document.getElementById("searchResult").innerHTML = request.responseText; 16 } 17 else alert("发生错误" + request.status); 18 } 19 } 20 } 21 </script>
最后就是PHP对表单的处理了,对输入的域名进行查询,显示结果,这是全新的知识。有必要加注释 = =
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"> <title>Ajax Service</title> </head> <body> <?php //POST方法得到顶级域名。简单说顶级域名就是 .com .cn之类。具体可google/baidu. $ext=$_POST['ext']; //得到二级域名. baidu.com 那么baidu就是二级域名 $dns = $_POST['dns']; //建立顶级域名数组,若所选顶级域与二级域的组合已被注册。此数组用于与二级域结合迭代查询。 $extArr = array( "com","cn","tel","mobi","net","org","asia","me","com.cn","net.cn","org.cn","gov.cn","hk","tv","biz","cc","name","info" ); //组合域名 $domain = $dns . "." . $ext; //开始查询: $couldRegister0 = false; //调用search()函数,看到这些判断条件一头雾水?看search()函数。 $result = search($domain); if( $result == 0 ){ $couldRegister0 = true; echo "--------恭喜您,可以注册--------" . "</br></br>"; } else if( $result == 1 ) echo " 很遗憾,已被注册。" . "</br></br>"; else if( $result == 2 ) echo " 参数错误!" . "</br></br>"; $couldRegister1 = false; //若所选择域名已被注册,进行迭代查询 if( !$couldRegister0 ){ //根据二级域名查询可注册的域名 foreach ($extArr as $value) { if( $value == $ext ) continue; $domain = $dns . "." . $value; $result = search($domain); if( $result == 0 ){ $couldRegister1 = true; echo $domain . "可注册。" . "</br>"; } } //若迭代后得出所有组合域名被注册 if( !$couldRegister1 ) echo "您的二级域名太抢手,没有可注册的组合域名。" . "</br>"; } //域名查询函数 function search( $domain ){ $do = "http://panda.www.net.cn/cgi-bin/check.cgi?area_domain=" . $domain; //以下库函数的调用,和陌生PHP类对象等,可详见PHP手册/PHP Manual $xml_data = file_get_contents($do); //获取所指定的url标准XML对象/数据的内容 $result_arr = (array) simplexml_load_string($xml_data); //将$xml_data转换为SimpleXMLElement(simplexml_load_string的返回值) ,并强转换为数组类型 $returncode=$result_arr['returncode']; //返回xml接口调用状态。 $key=$result_arr['key']; //表示所输入检验的域名 $original=$result_arr['original']; //检测结果 210->可注册 211->已被注册 212->参数错误 214/216->未知错误或查询异常 $status= substr($original,0,3); if($status=="210"){ return 0; }else if($status=="211"){ return 1; }else if($status=="212"){ return 2; } } ?> </body> </html>
Over, 望对你有帮助。