1. 服务器端的simsimi.php,参见http://www.52its.net/articles/407.html,在其开头还需加上一句,如下
- <?php
- /**
- *
- *作者:@Belin_love
- *来源:http://52its.sinaapp.com/
- *日期:2012.11.27
- *
- **/
- //function simsimi($keyword)
- //{
- //做成API接口的话,请发起GET请求,返回Josn
- //只自己用的话,封装成一个函数,返回JSON字段中的response
- if(isset($_GET['key'])){
- $keyword = $_GET['key'];
- $keyword=rawurlencode($keyword);<span style="white-space:pre"> </span>//添加这句话,解决输入空格引起的的错误
- $url = "http://www.simsimi.com/talk.htm?lc=ch";
- //这个curl是因为官方每次请求都有唯一的COOKIE,我们必须先把COOKIE拿出来,不然会一直返回“HI”
- $ch = curl_init();
- curl_setopt($ch, CURLOPT_URL, $url);
- curl_setopt($ch, CURLOPT_HEADER, 1);
- curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
- $content = curl_exec($ch);
- curl_close($ch);
- list($header, $body) = explode("\r\n\r\n", $content);
- preg_match("/set\-cookie:([^\r\n]*)/i", $header, $matches);
- //curl_setopt($ch, CURLOPT_COOKIE, $cookie);
- $cookie = $matches[1];
- $urll = 'http://www.simsimi.com/func/req?msg=' .$keyword. '&lc=ch';
- // 这个CURL就是模拟发起请求咯,直接返回的就是JSON
- $ch = curl_init();
- curl_setopt($ch, CURLOPT_URL, $urll);
- curl_setopt($ch, CURLOPT_HEADER, 0);
- curl_setopt($ch, CURLOPT_REFERER, "http://www.simsimi.com/talk.htm?lc=ch");
- curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
- curl_setopt($ch, CURLOPT_COOKIE, $cookie);
- $content = curl_exec($ch);
- curl_close($ch);
- //输出json
- //print_r($content);
- $reply = '你说的话太高深啦,我还听不懂,你可以教教我吗?[兔子]<a href="http://www.simsimi.com/teach.htm" target="_blank">点这里教我吧~~</a>';
- $json = json_decode($content, 1);
- if (isset($json['response'])) {
- $reply = $json['response'];
- }
- echo $reply;
- }
- //}
- ?>
所加的句子使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>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
- <script type="text/javascript">
- function ajaxSimsimi(str){
- var xmlhttp;
- if (str.length==0){
- document.getElementById("txtHint").innerHTML="";
- return;
- }
- if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
- xmlhttp=new XMLHttpRequest();
- } else {// code for IE6, IE5
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- xmlhttp.onreadystatechange=function(){ //XMLHttpRequest对象的有效返回判别
- if (xmlhttp.readyState==4 && xmlhttp.status==200) {
- document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
- }
- }
- xmlhttp.open("GET","simsimi.php?key="+str,true);
- xmlhttp.send();
- }
- </script>
- </head>
- <body>
- <h3>请在输入框中键入消息并回车:</h3>
- <form name="talk" action="simsimi.php" method="GET">
- 求调戏:
- <input type="text" class="textbox" name="key" onkeypress="if(event.keyCode==13){
- ajaxSimsimi(encodeURIComponent(this.value));this.select();return false;}
- "/>
- <!--在文本框内检测敲回车后即执行ajax。先将文本框中的字符串通过url编码(即UTF-8传输)再传给ajax函数,并调用php接口从而返回response的字符串-->
- <input type="button" value="确定" onclick="ajaxSimsimi(encodeURI(talk.key.value))"/>
- </form>
- <p>小贱鸡: <span id="txtHint">大爷,来调戏我啊~~~</span></p>
- </body>
- </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以阻止默认的提交表单行为。