MUI Ajax

短命女 2023-07-19 13:30 25阅读 0赞

mui框架基于htm5plus的XMLHttpRequest，封装了常用的Ajax函数，支持GET、POST请求方式
    支持返回json、xml、html、text、script数据类型
    mui提供了mui.ajax方法，并在mui.ajax方法基础上，进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法

mui.ajax( url[, settings])
    url
    Type: String
    请求发送的目标地址
    settings
    Type: PlainObject
    key/value格式的json对象，用来配置ajax请求参数，支持的完整参数参考如下mui.ajax([settings])方法

mui.ajax([settings])
    settings
    Type: PlainObject
    key/value格式的json对象，用来配置ajax请求参数，支持的详细参数如下：
    async
    Type: Boolean
    发送同步请求
    crossDomain    *5+ only
    Type: Boolean
    强制使用5+跨域
    data
    Type: PlainObject||String
    发送到服务器的业务数据
    dataType
    Type: String
    预期服务器返回的数据类型；如果不指定，mui将自动根据HTTP包的MIME头信息自动判断；支持设置的dataType可选值：
    "xml": 返回XML文档
    "html": 返回纯文本HTML信息；
    "script": 返回纯文本JavaScript代码
    "json": 返回JSON数据
    "text": 返回纯文本字符串
    error
    Type: Functon（XMLHttpRequest xhr,String type,String errorThrown）
    请求失败时触发的回调函数，该函数接收三个参数：
    xhr：xhr实例对象
    type：错误描述，可取值："timeout", "error", "abort", "parsererror"、"null"
    errorThrown：可捕获的异常对象
    success
    Type: Functon（Anything data,String textStatus,XMLHttpRequest xhr）
    请求成功时触发的回调函数，该函数接收三个参数：
    data：服务器返回的响应数据，类型可以是json对象、xml对象、字符串等；
    textStatus：状态描述，默认值为'success'
    xhr：xhr实例对象
    timeout
    Type: Number
    请求超时时间（毫秒），默认值为0，表示永不超时；若超过设置的超时时间(非0的情况)，依然未收到服务器响应，则触发error回调
    type
    Type: String
    请求方式，目前仅支持'GET'和'POST'，默认为'GET'方式
    headers
    Type: Json
    指定HTTP请求的Header
    headers:{'Content-Type':'application/json'}                  
    processData
    Type: Boolean
    为了匹配默认的content-type（"application/x-www-form-urlencoded"），
    mui默认会将data参数中传入的非字符串类型的数据转变为key1=value&key2=value2格式的查询串；
    如果业务需要，希望发送其它格式的数据（比如Document对象），可以设置processData为false

通过post方式向某服务器发送鉴权登录的代码片段

mui.ajax('http://server-name/login.php',{
        data:{
            username:'username',
            password:'password'
        },
        dataType:'json',//服务器返回json格式数据
        type:'post',//HTTP请求类型
        timeout:10000,//超时时间设置为10秒；
        headers:{'Content-Type':'application/json'},                  
        success:function(data){
            //服务器返回响应，根据响应结果，分析是否登录成功；
            ...
        },
        error:function(xhr,type,errorThrown){
            //异常处理；
            console.log(type);
        }
    });

mui.post()方法是对mui.ajax()的一个简化方法
    直接使用POST请求方式向服务器发送数据、且不处理timeout和异常
    （若需处理异常及超时，请使用mui.ajax()方法），使用方法: mui.post(url[,data][,success][,dataType])
    代码换成mui.post()后，代码更为简洁:

mui.post('http://server-name/login.php',{
            username:'username',
            password:'password'
        },function(data){
            //服务器返回响应，根据响应结果，分析是否登录成功；
            ...
        },'json'
    );

mui.get()方法和mui.post()方法类似
    只不过是直接使用GET请求方式向服务器发送数据、且不处理timeout和异常
    （若需处理异常及超时，请使用mui.ajax()方法），使用方法:
    mui.get(url[,data][,success][,dataType])，
    获得某服务器新闻列表的代码片段，服务器以json格式返回数据列表

mui.get('http://server-name/list.php',{category:'news'},function(data){
            //获得服务器响应
            ...
        },'json'
    );

mui.get()方法和如下mui.ajax()方法效果是一致的:

mui.ajax('http://server-name/list.php',{
        data:{
            category:'news'
        },
        dataType:'json',//服务器返回json格式数据
        type:'get',//HTTP请求类型
        success:function(data){
            //获得服务器响应
            ...
        }
    });

mui.getJSON()方法是在mui.get()方法基础上的更进一步简化
    限定返回json格式的数据，其它参数和mui.get()方法一致，使用方法: mui.get(url[,data][,success])
    获得新闻列表的代码换成mui.getJSON()方法后，更为简洁

mui.getJSON('http://server-name/list.php',{category:'news'},function(data){
            //获得服务器响应
            ...
        }
    );

具体实例代码:

`     //1、调试需要在真机环境进行操作；    //2、mui本身是支持跨域访问的（无需纠结跨域问题）；     //3、请求API地址不能使用localhost 或者127.0.0.1之类的ip，只能使用实际的IP才能访问。     var reqRootUrl = "http://192.168.1.217";       mui.ajax({          url: reqRootUrl + '/api/UserLogin/QueryAccount',          data: {            AccountName: "***",              Pwd: "***",             Company: "***"         },          dataType: 'json',        type: 'post',        timeout: 30000, //超时时间设置为30秒；         headers: {                'Content-Type': 'application/json',         //"Authorization": "BasicAuth " + _ticket//传递基于“Basic基础认证”令牌         },          beforeSend: function () {              plus.nativeUI.showWaiting("正在请求数据...");//开启加载提示          },          complete: function () {              plus.nativeUI.closeWaiting();//关于加载提示         },          success: function (data) {             //处理成功逻辑             mui.openWindow({                  url: 'defaule.html',                  id: 'defaule.html',                  extras: {                      Ticket: data.Ticket//页面传递参数                 },                 waiting: {                      autoShow: true, //自动显示等待框，默认为true                      title: '正在登录...' //等待对话框上显示的提示内容                  }              });          },          error: function (xhr, type, errorThrown) {              plus.nativeUI.closeWaiting();              var _error = "";              switch (type) {                  case "timeout":                      _error = "服务器响应超时";                      break;                 default:                      _error = "异常信息:" + xhr.responseText;                      break;              }              mui.toast(_error);          }      }); `

第一步：有道官方网站申请一个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的值为你想要的翻译内容即可

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

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

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

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet"/>
        <script type="text/javascript" charset="utf-8">
              mui.init();
        </script>
    </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">MUI ajax</h1>
    </header>    
    <div class="mui-content mui-content-padded">
        <div class="mui-input-row">
            <label>输入关键词:</label>
            <input type="text"  id="input" 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>

<div class="mui-content mui-content-padded">
        <div class="mui-input-row">
            <label>输入关键词:</label>
            <input type="text"  id="input" placeholder="输入框"/>
        </div>
        <button id="btn" type="button" class="mui-btn mui-btn-blue mui-btn-block">翻译</button>
       <div id="output">
       </div>
    </div>