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

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

举例：
API key：1207861310
keyfrom：abc1243
调用说明：
http://fanyi.youdao.com/openapi.do?keyfrom=<keyfrom>&key=<key>&type=data&doctype=<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 search-button">发送请求</button>

【js部分】：

<script src="/static/css/default/img/default.jpg" data-original="js/mui.min.js"></script>
<script>
    (function($) {
        //定义请求方式
        var methodEl = 'get';    //可以选get,post
        //定义预期服务器范围的数据类型
        var dataTypeEl = 'json'; //可以选json,xml，html
        //成功响应的回调函数
        var success = function(response) {
            var dataType = dataTypeEl;
            if (dataType === 'json') {
                response = JSON.stringify(response);//JSON.stringify()将 JSON对象转为json字符串
            } else if (dataType === 'xml') {
                response = new XMLSerializer().serializeToString(response).replace(/</g, "&lt;").replace(/>/g, "&gt;");
            }       
         /*--------------------------------------------------*/
            //得到数据之后的操作
            alert(response);
        /*--------------------------------------------------*/
        };     
        var ajax = function() {
            //url地址
            var url = "http://fanyi.youdao.com/openapi.do?keyfrom=abc1243&key=1207861310&type=data&doctype=json&version=1.1&q=good";
            //请求方式为post；
            var type = methodEl;
            //预期服务器范围的数据类型
            var dataType = dataTypeEl;
            //发送数据
            var data = {};//这个先暂时空着，后面再继续看
            //发送请求
            if (type === 'get') {
                if (dataType === 'json') {
                    $.getJSON(url, data, success);
                } else {
                    $.get(url, data, success, dataType);
                }
                } else if (type === 'post') {
                    $.post(url, data, success, dataType);
            }  
        };
        //发送请求按钮的点击事件
        document.getElementById("confirm").addEventListener('tap', function() {
            ajax();
        });       
    })(mui);
</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 search-button">发送请求</button>
</form> 

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

        var searchEl = document.getElementById("search");
        var ajax = function() {
            //请求的地址
            var url = 'http://fanyi.youdao.com/openapi.do';
            //请求方式为post；
            var type = methodEl;
            //预期服务器范围的数据类型
            var dataType = dataTypeEl;
            //发送数据(data数据就是url里面？后面的内容)
            var data = {
                keyfrom: "abc1243",
                key: "1207861310",
                type: "data",
                doctype:"json",
                version:"1.1",
                q: searchEl.value //发送搜索值
            };
            //发送请求
            if (type === 'get') {
                if (dataType === 'json') {
                    $.getJSON(url, data, success);
                } else {
                    $.get(url, data, success, dataType);
                }
                } else if (type === 'post') {
                    $.post(url, data, success, dataType);
            }        
        };

第四步：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"];
    }   

通过这个例子我对ajax的基本思路有了相对清晰的理解了，作为一个菜鸟第一次写这种文章，实属不易，有错误的地方还希望大神批评指正。总结一下帮助自己理解得更深刻，也让新手可以得到一点启示。慢慢的不得不习惯了看官方源码，建议新手还是沉下心去研究源码，有些写得还不错，也希望官方可以出个完整的教程，不要说你不懂我就不要用我啊这类很伤人的话，不管菜鸟还是极客我觉得都应该被同等对待。