Hybrid App开发之Ajax在JQuery中的应用

前言：

今天学习一下如何通过Ajax与服务器进行交互，并且学习一下如何在JQuery中使用。

首先先了解一下什么是ajax？

AJAX即“Asynchronous，Javascript+XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX=异步JavaScript和XML（标准通用标记语言的子集）。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页面。

1、）先看下没有使用jQuery的时候，JavaScript如何通过ajax发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //url就是请求的地址
        //successFunc就是一个请求返回成功之后的一个function，有一个参数，参数就是服务器返回的报文体
        function ajax(url, method, parmars, successFunc) {
            parmars = (function (obj) { // 转成post需要的字符串.
                var str = "";
                var pos = 0;
                for (var prop in obj) {
                    str += prop + "=" + obj[prop];
                    if (pos > 0) {
                        str += "&"
                    }
                    pos++;
                }
                return str;
            })(parmars);
            var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0");
            //我这里声明1是post 0是get
            if (method === 0) {
                url = url + '?' + parmars;
            }
            //第一个参数是请求方式 第二个是请求地址 第三个参数：同步方式  or  异步方式，一般置为true，为异步；默认也为异步调用
            request.open(method === 1 ? "POST" : "GET", url, true);
            //设置请求头
            request.setRequestHeader("version", 'v1.2.0');
            request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            request.onreadystatechange = function () {
                alert(url);
                if (request.readyState === 4) {
                    if (request.status === 200) {
                        var data = JSON.parse(request.responseText);//将返回的数据放在data变量中
                        if (data.success) {
                            successFunc(data);
                        } else {
                            alert("解析错误");
                        }
                    } else {
                        alert("服务器返回错误" + request.readyState + request.status+request.responseText);
                    }
                }
            };
            if (method === 1) {
                request.send(parmars);
            } else {
                request.send();
            }
        }

        function getWeather() {
            var url = 'http://wthrcdn.etouch.cn/weather_mini';
            var parmars = {
                "citykey": 101010100
            };
            ajax(url, 0, parmars, function (xmlDataString) {
                alert(xmlDataString)
            });
        }
    </script>
</head>
<body>
<div>
    <input type="button" value="获取天气情况" id="getWeatherBtn" onclick="getWeather()">
</div>
</body>
</html>

上面就是一个常规的ajax请求，可惜实际运行中给了我当头一棒，那就是ajax跨域问题，接下来尝试这使用jsonp解决跨域问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function ajax(params) {
            params = params || {};
            params.data = params.data || {};
            var json = params.jsonp ? jsonp(params) : json(params);
            // ajax请求
            function json(params) {
                params.type = (params.type || 'GET').toUpperCase();
                params.data = formatParams(params.data);
                var xhr = null;

                // 实例化XMLHttpRequest对象
                if (window.XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else {
                    // IE6及其以下版本
                    xhr = new ActiveXObjcet('Microsoft.XMLHTTP');
                }

                // 监听事件
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        var status = xhr.status;
                        if (status >= 200 && status < 300) {
                            var response = '';
                            var type = xhr.getResponseHeader('Content-type');
                            if (type.indexOf('xml') !== -1 && xhr.responseXML) {
                                response = xhr.responseXML; //Document对象响应
                            } else if (type === 'application/json') {
                                response = JSON.parse(xhr.responseText); //JSON响应
                            } else {
                                response = xhr.responseText; //字符串响应
                            }
                            ;
                            params.reqSuccess && params.reqSuccess(response);
                        } else {
                            params.error && params.error(status);
                        }
                    }
                };

                // 连接和传输数据
                if (params.type == 'GET') {
                    xhr.open(params.type, params.url + '?' + params.data, true);
                    xhr.send(null);
                } else {
                    xhr.open(params.type, params.url, true);
                    //设置提交时的内容类型
                    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                    xhr.send(params.data);
                }
            }

            // jsonp请求
            function jsonp(params) {
                //创建script标签并加入到页面中
                var callbackName = params.jsonp;
                var head = document.getElementsByTagName('head')[0];
                // 设置传递给后台的回调参数名
                params.data['callback'] = callbackName;
                var data = formatParams(params.data);
                var script = document.createElement('script');
                head.appendChild(script);

                //创建jsonp回调函数
                window[callbackName] = function (json) {
                    head.removeChild(script);
                    clearTimeout(script.timer);
                    window[callbackName] = null;
                    params.reqSuccess && params.reqSuccess(json);
                };

                //发送请求
                script.src = params.url + '?' + data;
                //超时处理
                if (params.time) {
                    script.timer = setTimeout(function () {
                        window[callbackName] = null;
                        head.removeChild(script);
                        params.error && params.error({
                            message: '超时'
                        });
                    }, time);
                }
            };
            //格式化参数
            function formatParams(data) {
                var arr = [];
                for (var name in data) {
                    arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
                }
                // 添加一个随机数，防止缓存
                arr.push('v=' + random());
                return arr.join('&');
            }

            // 获取随机数
            function random() {
                return Math.floor(Math.random() * 10000 + 500);
            }
        }
        
        function reqWeather() {
            ajax({
                url: 'http://wthrcdn.etouch.cn/weather_mini',
                jsonp: 'jsonpCallback',
                data: {'citykey': 101010100},
                reqSuccess: function (res) {
                    alert(JSON.stringify(res))
                }
            })
        }
    </script>
</head>
<body>
<div>
    <input type="button" value="获取天气情况" onclick="reqWeather()">
</div>
</body>
</html>

2、）JQuery与Ajax结合使用

（1）get()、getJSON()请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#getWeatherBtn").click(function () {
                var url = 'http://wthrcdn.etouch.cn/weather_mini';
                var parmars = {
                    "citykey": 101010100
                };
                //get请求
                $.get(url + "?citykey=101010100", function (data) {
                    alert(JSON.stringify(data))
                });
                //get请求 返回json
                $.getJSON(url, parmars, function (data) {
                    alert(JSON.stringify(data))
                })
            });
        });
    </script>
</head>
<body>
<div>
    <input type="button" value="获取天气情况" id="getWeatherBtn">
</div>
</body>
</html>

(2)post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#getWeatherBtn").click(function () {
                url = 'http://api.k780.com:88/';
                parmars = {
                    'app': 'weather.today',
                    'weaid': 1,
                    'appkey': 10003,
                    'sign': 'b59bc3ef6191eb9f747dd4e83c99f2a4',
                    'format': 'json',
                    'jsoncallback': "data",
                    'callback': "data"
                };

                $.get(url, parmars, function (data) {
                    alert(data);
                    alert(JSON.stringify(data))
                });

                $.post(url, parmars, function (data) {
                    alert(data);
                    alert(JSON.stringify(data))
                });

            });
        });
    </script>
</head>
<body>
<div>
    <input type="button" value="获取天气情况" id="getWeatherBtn">
</div>
</body>
</html>

（3）ajax()方式请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#getWeatherBtn").click(function () {
                url = 'http://api.k780.com:88/';
                parmars = {
                    'app': 'weather.today',
                    'weaid': 1,
                    'appkey': 10003,
                    'sign': 'b59bc3ef6191eb9f747dd4e83c99f2a4',
                    'format': 'json',
                    'jsoncallback': "data",
                    'callback': "data"
                };

                $.ajax({
                    type: "get",
                    async: true,
                    url: url, //跨域请求的URL
                    dataType: "jsonp",
                    data: parmars,
                    //传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)
                    jsonp: "jsoncallback",
                    //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
                    jsonpCallback: "data",
                    //成功获取跨域服务器上的json数据后,会动态执行这个callback函数
                    success: function (data) {
                        alert(JSON.stringify(data));
                    }
                });
                $.ajax({
                    type: "post",
                    async: true,
                    url: url, //跨域请求的URL
                    dataType: "jsonp",
                    data: parmars,
                    //传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)
                    jsonp: "jsoncallback",
                    //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
                    jsonpCallback: "data",
                    //成功获取跨域服务器上的json数据后,会动态执行这个callback函数
                    success: function (data) {
                        alert(JSON.stringify(data));
                    }
                });

            });
        });
    </script>
</head>
<body>
<div>
    <input type="button" value="获取天气情况" id="getWeatherBtn">
</div>
</body>
</html>

（4） ajaxSetUp()设置全局ajax

$.ajaxSetup({
  dataType: "jsonp",
  async: true,
  jsonp: "jsoncallback",
   //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
   jsonpCallback: "data",
   });

写了一个稍微综合点的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax请求填充数据</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        #weatherTable {
            border: solid 1px;
            border-color: gray;
        }

        th {
            border: solid 1px;
            margin: 5px;
            color: black;
            font-size: 1em;
            padding: 5px;
            background-color: aliceblue;
            border-color: gray;
        }

        td {
            border: solid 1px;
            padding: 5px;
            margin: 5px;
            text-align: center;
            border-color: gray;
            width: 200px;
            height: 50px;
        }

        tr {
            text-align: center;
            border-color: gray;
        }

    </style>
    <script type="text/javascript">
        function createWeather(data) {
            var wearther = new Object();
            wearther.date = data["date"];
            wearther.high = data["high"];
            wearther.low = data["low"];
            wearther.fengxiang = data["fengxiang"]?data["fengxiang"]:data["fx"];
            wearther.fengli = data["fengli"]?data["fengli"]:data["fl"];
            wearther.type = data["type"];
            return wearther;
        }

        function getWeather() {
            var url = 'http://wthrcdn.etouch.cn/weather_mini';
            var parmars = {
                "city": '杭州'
            };
            //get请求
            $.getJSON(url, parmars, function (data) {
                var stringify = data['data'];
                var $weatherDiv = $("#weatherDiv");
                $weatherDiv.html("");
                var html = '<h3>天气预报</h3>';
                html += '城市:<span style="color: blue">' + stringify['city'] + '</span><br>';
                html += '温度:' + stringify['wendu'] + '℃<br><br>';
                var yesterdayWeather=createWeather(stringify['yesterday']);
                var yesterday='昨日：'+yesterdayWeather.date+"\t"+yesterdayWeather.high+"\t"+yesterdayWeather.low+"\t"+yesterdayWeather.fengxiang+"\t"+yesterdayWeather.fengli+"\t"+yesterdayWeather.type+'<br><br>';
                html += yesterday;
                var tebleHeader = '<tr><th>日期</th><th>最高温度</th><th>最低温度</th><th>风向</th><th>风级</th><th>天气情况</th></tr>';
                var tableConteont = '';
                var forecast = stringify['forecast'];
                for (var pos in forecast) {
                    var weather = createWeather(forecast[pos]);
                    tableConteont += '<tr>'
                        + '<td>' + weather.date + ' </td>'
                        + '<td>' + weather.high + ' </td>'
                        + '<td>' + weather.low + ' </td>'
                        + '<td>' + weather.fengxiang + ' </td>'
                        + '<td>' + weather.fengli + ' </td>'
                        + '<td>' + weather.type + ' </td>'
                    '<tr>';
                }
                var forecastTable = '<table id="weatherTable" hidden>' + tebleHeader + tableConteont + '</table>';
                html += forecastTable;
                $weatherDiv.html(html);
                $("td:nth-child(2)").css('color', 'red');
                $("td:nth-child(3)").css('color', 'darkorange');
                $("#weatherTable").fadeIn(500);
            });
        };

        $(function () {
            getWeather();
        })

    </script>
</head>
<body>
<div id="weatherDiv" align="center">

</div>

</body>
</html>

总结：

今天大致学习了JQuery的ajax使用，后续开始学习与Css3、Html5、React.js、React Native,s最终是为开发RN做准备。

posted on 2017-06-24 12:40 总李写代码阅读(553) 评论(0) 编辑收藏举报