AJAX实现图灵机器人聊天

首先，搜索图灵机器人，在图灵机器人注册一个账号，然后新建一个机器人，获得一个key就可以了，这样就可以聊天了。

关键是你在图灵机器人新建生成的key：

key=9257afd24a374c69b91eeb687d463763
这段代码是复制的，从你新建那里得到。

另外我用的是版本一：（post的第一个参数url）

http://www.tuling123.com/openapi/api

当然你可以用图灵的第二个版本的API也是可以的。

图片我这里用了三张：一张背景图，两张头像图片。

你们可以换成自己想要的图片即可。

文件呢，主要是两个：一个是myajax的js文件，另外一个是html文件。

    
    
    




    

    

    

        
        

    
    

        
        


    
    
    
    Send
    

这里着，我自己封装了一个MYAJAX的js文件，导入一下就可以。这个主要是post和get方法的实现。

//一个ajax对象
var ajax = {
    get:function (url,successCallBack,failCallBack) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET",url,true);
        xhr.onreadystatechange = function () {
            //xhr.readyState 的值有0 1 2 3 4
            if(xhr.readyState == 4){
                //判断xhr.status的响应码
                if(xhr.status == 200 || xhr.status == 304){
                    //判断successCallBack 是否传递了一个函数
                    if(typeof successCallBack == "function"){
                        //将xhr.responseText的信息交给用户回调函数处理
                        successCallBack(xhr.responseText,xhr);
                    }else if(typeof failCallBack == "function"){
                        //将xhr.responseText的信息交给用户回调函数处理
                        failCallBack(xhr.responseText,xhr);
                    }
                }

            }};
        xhr.send(null);
    },
    post:function (url,data,successCallBack,failCallBack) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST",url,true);
        xhr.onreadystatechange = function () {
            //xhr.readyState 的值有0 1 2 3 4
            if(xhr.readyState == 4){
                //判断xhr.status的响应码
                if(xhr.status == 200 || xhr.status == 304){
                    //判断successCallBack 是否传递了一个函数
                    if(typeof successCallBack == "function"){
                        //将xhr.responseText的信息交给用户回调函数处理
                        successCallBack(xhr.responseText,xhr);
                    }else if(typeof failCallBack == "function"){
                        //将xhr.responseText的信息交给用户回调函数处理
                        failCallBack(xhr.responseText,xhr);
                    }
                }

            }};
        //设置请求头,这行代码,一定要在open之后, send之前调用.
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }
};

效果图：