菜鸟福利-----以有道翻译API为例说明mui ajax的用法详解

第一步：在有道官方网站申请一个API key

举例：
API key：1207861310
keyfrom：abc1243
调用说明：
http://fanyi.youdao.com/openapi.do?keyfrom=&key=&type=data&doctype=&version=1.1&q=要翻译的文本
版本：1.1，请求方式：get，编码方式：utf-8
主要功能：中英互译，同时获得有道翻译结果和有道词典结果（可能没有）
参数说明：

• type - 返回结果的类型，固定为data
• doctype - 返回结果的数据格式，xml或json或jsonp
• version - 版本，当前最新版本为1.1
• q - 要翻译的文本，必须是UTF-8编码，字符长度不能超过200个字符，需要进行urlencode编码
• only - 可选参数，dict表示只获取词典数据，translate表示只获取翻译数据，默认为都获取

　注： 词典结果只支持中英互译，翻译结果支持英日韩法俄西到中文的翻译以及中文到英语的翻译

errorCode：

• 0 - 正常
• 20 - 要翻译的文本过长
• 30 - 无法进行有效的翻译
• 40 - 不支持的语言类型
• 50 - 无效的key
• 60 - 无词典结果，仅在获取词典结果生效
  　
  注意修改标记的四个地方，只需要修改q的值为你想要的翻译内容即可。

点击下方链接我们可以得到：
http://fanyi.youdao.com/openapi.do?keyfrom=abc1243&key=1207861310&type=data&doctype=json&version=1.1&q=翻译

可是网上多半就停留在此并没有告诉我们怎么在程序里面发出请求然后获取数据，之前找过一些例子，都是服务器端语言调用的，所以我误以为只能通过服务器端语言才能调用，结果一次在群里问了问，一个大神告诉说其实ajax就可以咯，于是之间就去找了找ajax的教程看了看，但是没怎么看懂，一大堆什么XMLHttpRequest 什么的，试了试还是各种理不清，找官方demo改了改，发现mui的ajax还是挺好懂的，格式也比较固定，对于菜鸟的我来说感觉这个才是最好的，不要先来一大堆没用的，废话少说，试试看就知道咯。

第二步：ajax跨域请求的简单实例

先来个最简单的直接点击按钮弹出返回的数据，只要这个成功了，那么改改还是很容易的。
【html部分】：

 <button type="button" id="confirm" class="mui-btn mui-btn-royal mui-btn-block">发送请求</button>

【js部分】：

<script src="js/mui.min.js"></script>  
<script>  
    //发送请求按钮的点击事件  
    document.getElementById("confirm").addEventListener('tap', function() {  
        var url = "http://fanyi.youdao.com/openapi.do?keyfrom=abc1243&key=1207861310&type=data&doctype=json&version=1.1&q=good";  
        mui.ajax(url,{  
            dataType:'json',//服务器返回json格式数据  
            type:'GET',//HTTP请求类型  
            timeout:10000,//超时时间设置为10秒；  
            success:function(data){  
                //JSON.stringify()将 JSON对象转为json字符串   
                var data = JSON.stringify(data);  
                alert(data);  
            },  
            error:function(xhr,type,errorThrown){  
                //异常处理；  
                console.log(type);  
            }  
        });  
    });  
</script>

第三步：传递参数的ajax跨域请求

上面URL中把各种请求参数写固定了，不便于我们后期做修改，现在用ajax的data属性。
首先我们增加一个搜索输入框用于输入要翻译的内容：
修改html的代码如下：（样式文件没有引入，样式也没有写出来，主要是为了写清楚思路）
【html部分】

<form name="search" method="get">  
        <div class="mui-input-row mui-search input-search">  
        <input type="search" id="search"  class="mui-input-speech mui-input-clear" placeholder="请输入内容...">  
        </div>  
        <button type="button" id="confirm" class="mui-btn mui-btn-royal mui-btn-block">发送请求</button>  
</form> 

【js部分】（修改部分的代码）

var search = document.getElementById("search");  
//发送请求按钮的点击事件  
document.getElementById("confirm").addEventListener('tap', function() {  
    var url = "http://fanyi.youdao.com/openapi.do";  
    mui.ajax(url,{  
        data:{  
            keyfrom:"abc1243",  
            key:"1207861310",  
            type:"data",  
            doctype:"json",  
            version:"1.1",  
            q:search.value  
        },  
        dataType:'json',//服务器返回json格式数据  
        type:'post',//HTTP请求类型  
        timeout:10000,//超时时间设置为10秒；  
        success:function(data){  
            //JSON.stringify()将 JSON对象转为json字符串   
            var data = JSON.stringify(data);  
            alert(data);  
        },  
        error:function(xhr,type,errorThrown){  
            //异常处理；  
            console.log(type);  
        }  
    });  
});

第四步：ajax跨域请求怎么处理获取的数据

我们刚刚只是把数据alert出来了但是并没有进行任何后期操作，比如把有用信息获取写出来。
我们是把刚刚那个变成了json字符串alert出来的，也就是说是字符串而不是对象，获取键值对必须是对对象进行操作。
那么我们首先使用eval函数把json字符串转化成JavaScript对象：

//将json字符串转化成JavaScript对象  
var obj = eval ("(" + response + ")");

然后我们就可以对obj对象进行操作了，json键值对的[] 中括号的使用如下：
JSON就是一串字符串 只不过元素会使用特定的符号标注。

• {} 双括号表示对象
• [] 中括号表示数组
• "" 双引号内是属性或值
• : 冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象)
  所以 {"name": "Michael"} 可以理解为是一个包含name为Michael的对象，而[{"name": "Michael"},{"name": "Jerry"}]就表示包含两个对象的数组。
  var LangShen = {"Name":"Langshen","AGE":"28"};
  　　这是一个json对象；{ } 大括号，表示定义一个对象，大部分情况下要有成对的属性和值，或是函数上面声明了一个名为“LangShen”的对象，多个属性或函数用,（逗号）隔开，因为是对象的属性，
  　　那么我们访问的时候会有两种方式：
  访问方式一：LangShen.Name、LangShen.AGE
  　　访问方式二：LangShen["Name"]、LangShen["AGE"]
  　　就是这么一个小小的方式，会有什么区别呢？
  　　在实际应用中，第一种方式的.Name实际是作为一个对象被调用，而LangShen["Name"]里的name却可以是一个字符串。
  有道翻译API获取实例：

我只是写出了基本思路，无非就是把对于内容写在对应的位置。

document.getElementById("translation").innerHTML=obj.translation;   
document.getElementById("us-phonetic").innerHTML=obj.basic["us-phonetic"];  
document.getElementById("phonetic").innerHTML=obj.basic["phonetic"];  
document.getElementById("uk-phonetic").innerHTML=obj.basic["uk-phonetic"];  
document.getElementById("explains").innerHTML=obj.basic["explains"];  
document.getElementById("query").innerHTML=obj.query;  
//遍历读取键值对写入  
for(var str in obj.web){  
     var keyid=document.getElementsByName("webkey")[str].id;  
     var Valueid=document.getElementsByName("webvalue")[str].id;  
     document.getElementById(keyid).innerHTML=obj.web[str]["key"];  
     document.getElementById(Valueid).innerHTML=obj.web[str]["value"];  
}   

如果需要在普通页面使用，可以使用jsonp：

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  
    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">native-JavaScript</h1>  
        </header>  
        <div class="mui-content mui-content-padded">  
            <div class="mui-input-row">  
                <label>输入关键词：</label>  
                <input id="input" type="text" placeholder="普通输入框">  
            </div>  
            <button id="btn" type="button" class="mui-btn mui-btn-blue mui-btn-block">翻译</button>  
            <div id="output"></div>  
        </div>  

        <script type="text/javascript">  
            var inputEl = document.querySelector("#input");  
            document.querySelector('#btn').addEventListener('click',function () {  
                var url = "http://fanyi.youdao.com/openapi.do";  
                var data = {  
                    "keyfrom": "abc1243",  
                    "key": "1207861310",  
                    "type": "data",  
                    "doctype": "jsonp",  
                    "version": "1.1",  
                    "q": inputEl.value,  
                    "callback": "jsonpcallback"  
                }  

                var buffer = [];  
                for (var key in data) {  
                    buffer.push(key + '=' + encodeURIComponent(data[key]));  
                }  
                var fullpath = url + '?' + buffer.join('&');  
                CreateScript(fullpath);     
            })  

            function CreateScript(src){  
                var el = document.createElement('script');  
                el.src = src;  
                el.async = true;  
                el.defer = true;  
                document.body.appendChild(el);  
            }  

            function jsonpcallback(rs) {  
                console.log(JSON.stringify(rs));  
                document.getElementById("output").innerHTML = JSON.stringify(rs);  
            }  
        </script>  
    </body>  

</html>