学习用js, ajax, php做一个简单的小黄鸡页面(调用simsimi API)

1. 服务器端的simsimi.php,参见http://www.52its.net/articles/407.html,在其开头还需加上一句,如下

[php]  view plain copy
  1. <?php     
  2. /** 
  3.  *   
  4.  *作者:@Belin_love   
  5.  *来源:http://52its.sinaapp.com/   
  6.  *日期:2012.11.27   
  7.  *   
  8.  **/    
  9.     
  10. //function simsimi($keyword)     
  11. //{     
  12. //做成API接口的话,请发起GET请求,返回Josn     
  13. //只自己用的话,封装成一个函数,返回JSON字段中的response     
  14.     
  15. if(isset($_GET['key'])){         
  16.     $keyword = $_GET['key'];     
  17.     $keyword=rawurlencode($keyword);<span style="white-space:pre">  </span>//添加这句话,解决输入空格引起的的错误  
  18.     $url = "http://www.simsimi.com/talk.htm?lc=ch";     
  19.   
  20.     //这个curl是因为官方每次请求都有唯一的COOKIE,我们必须先把COOKIE拿出来,不然会一直返回“HI”     
  21.     $ch = curl_init();     
  22.     curl_setopt($ch, CURLOPT_URL, $url);     
  23.     curl_setopt($ch, CURLOPT_HEADER, 1);     
  24.     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);     
  25.     $content = curl_exec($ch);     
  26.     curl_close($ch);     
  27.     list($header$body) = explode("\r\n\r\n"$content);     
  28.     preg_match("/set\-cookie:([^\r\n]*)/i"$header$matches);     
  29.     //curl_setopt($ch, CURLOPT_COOKIE, $cookie);     
  30.     $cookie = $matches[1];     
  31.       
  32.     $urll = 'http://www.simsimi.com/func/req?msg=' .$keyword'&lc=ch';     
  33.        
  34.     // 这个CURL就是模拟发起请求咯,直接返回的就是JSON     
  35.     $ch = curl_init();     
  36.     curl_setopt($ch, CURLOPT_URL, $urll);     
  37.     curl_setopt($ch, CURLOPT_HEADER, 0);     
  38.     curl_setopt($ch, CURLOPT_REFERER, "http://www.simsimi.com/talk.htm?lc=ch");     
  39.     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);     
  40.     curl_setopt($ch, CURLOPT_COOKIE, $cookie);     
  41.     $content = curl_exec($ch);     
  42.     curl_close($ch);     
  43.   
  44.     //输出json     
  45.     //print_r($content);     
  46.     $reply = '你说的话太高深啦,我还听不懂,你可以教教我吗?[兔子]<a href="http://www.simsimi.com/teach.htm" target="_blank">点这里教我吧~~</a>';     
  47.     $json = json_decode($content, 1);    
  48.     if (isset($json['response'])) {    
  49.         $reply = $json['response'];    
  50.     }    
  51.     echo $reply;    
  52. }  
  53. //}  
  54. ?>  

所加的句子使get获得的参数经过url编码(主要是让空格被编码,因为simsimi的API中msg字段不能直接处理含空格的字符串)。这样即完成一个API的调用。详情请跟踪http://www.simsimi.com/talk.htm的network请求!


2. 服务器上的html页面(如果作为本地文件使用,chrome不允许跨域访问,即file://与http://访问失败,可以chrome.exe --allow-file-access-from-files方式重新打开chrome;而IE8允许ActiveX之后可以)

[html]  view plain copy
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
  4. <script type="text/javascript">  
  5. function ajaxSimsimi(str){  
  6. var xmlhttp;  
  7. if (str.length==0){   
  8.   document.getElementById("txtHint").innerHTML="";  
  9.   return;  
  10.   }  
  11. if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari  
  12.   xmlhttp=new XMLHttpRequest();  
  13.   } else {// code for IE6, IE5  
  14.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
  15.   }  
  16. xmlhttp.onreadystatechange=function(){    //XMLHttpRequest对象的有效返回判别  
  17.   if (xmlhttp.readyState==4 && xmlhttp.status==200) {  
  18.     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;  
  19.     }  
  20.   }  
  21. xmlhttp.open("GET","simsimi.php?key="+str,true);  
  22. xmlhttp.send();  
  23. }  
  24. </script>  
  25. </head>  
  26.   
  27. <body>  
  28. <h3>请在输入框中键入消息并回车:</h3>  
  29. <form name="talk" action="simsimi.php"  method="GET">   
  30. 求调戏:  
  31. <input type="text" class="textbox" name="key" onkeypress="if(event.keyCode==13){  
  32. ajaxSimsimi(encodeURIComponent(this.value));this.select();return false;}  
  33. "/>  
  34. <!--在文本框内检测敲回车后即执行ajax。先将文本框中的字符串通过url编码(即UTF-8传输)再传给ajax函数,并调用php接口从而返回response的字符串-->  
  35. <input type="button" value="确定" onclick="ajaxSimsimi(encodeURI(talk.key.value))"/>  
  36. </form>  
  37. <p>小贱鸡: <span id="txtHint">大爷,来调戏我啊~~~</span></p>   
  38.   
  39. </body>  
  40. </html>  

效果图:


3. 注意事项:

        3个编码问题:文件自身的编码,编码信息标记内容(meta),url或表单传输的编码(js: encodeURI; php: [raw]urlencode)。文件自身编码会影响文本中字符串传递的方式,以上两文件中php建议使用UTF-8,html可以使用ANSI/GBK。当客户端向服务器提交内容时,需注意两方对编码的处理问题,要求一致。一般在表单提交时先直接用encodeURI对内容编码。此文中服务器返回内容的编码似乎不产生影响。参见http://tuzwu.iteye.com/blog/648214

        ajax动态技术,参见w3school

        文本框中输入回车后即执行。但在表单的文本框中,键入回车后触发事件代码需返回false以阻止默认的提交表单行为。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值