=Start=

缘由：

前段时间把收集到的日志处理并入库了，现在需要写一些前端页面用于展示收集到的数据，用于向上汇报、内部展示，在此过程中碰到了很多问题，多半是因为对js不够熟悉导致的，所以现在大体记录一下，方便以后碰到类似问题的时候有个参考。

正文：

什么是AJAX？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种与服务器交换数据的技术，可以在不重新加载整个页面的情况下更新网页的一部分。

什么是jQuery？

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。提示：如果没有 jQuery，AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

jQuery的 get()/post()/ajax() 方法的选取

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。ajax() 方法通过 HTTP 请求加载远程数据，该方法是 jQuery 底层 AJAX 实现。

一般情况下可以用 $.get, $.post 等实现AJAX功能。大多数情况下你无需直接操作$.ajax()函数，除非你需要操作不常用的选项，以获得更多的灵活性。

jQuery的 ajax() 方法

下面以一个实际的例子来说明jQuery的ajax()方法的使用：

var today = new Date();
var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
var lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
// today.toISOString().substring(0, 10);  //以 2016-11-19 格式获取当天的日期
// lastWeek.toISOString().substring(0, 10);  //以 2016-11-12 格式获取7天前的日期
// lastMonth.toISOString().substring(0, 10);  //以 2016-10-19 格式获取上个月的日期

function updateChart() {
    // {"aaData": [[21851, 20161022], [14951, 20161023]]}
    var ajax_options_linechart = {
        // type: 'GET',
        type: 'POST',
        url: '/bash/api_stat',
        data: {'type': 1, 'start': lastWeek.toISOString().substring(0, 10), 'end': today.toISOString().substring(0, 10)},
        dataType: 'json',
        success: function (_data) {
            var date_array = [];    // 20160904, ...
            var nums_array = [];    // 21504, ...
            for (var i = 0; i < _data.aaData.length; i++) {
                date_array.push(_data.aaData[i][1]);
                nums_array.push(_data.aaData[i][0]);
            }
            var linechart_opts = {
                xAxis: {
                    data: date_array,
                },
                series: [{
                    data: nums_array,
                }],
            };
            linechart.setOption(linechart_opts);
        },
        error: function() {
            // ...
        }
    };
    $.ajax(ajax_options_linechart);
}

function updateTiming(){
    updateChart();
    setTimeout(updateTiming, 20000);    // 每20秒发起一个请求
}
updateTiming();

参数（常用）

url：发送请求的地址（根据开头是否为「/」来决定是绝对地址还是相对地址）。
type：发送请求的方法（默认为「GET」）。
data：发送到服务器的数据。会自动转换为请求字符串格式。
dataType：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。

回调函数（常用）

error：在请求出错时调用。
success：当请求成功后调用。

发送数据到服务器（data 选项）

默认情况下，Ajax 请求使用 GET 方法。如果要使用 POST 方法，可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。

data 选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 false 来回避。如果我们希望发送一个 XML 对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变 contentType 选项的值，用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded 。

数据类型（dataType 选项）

$.ajax() 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML，那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型，比如 HTML，则数据就以文本形式来对待。

通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML，还可以指定 html、json、jsonp、script 或者 text。其中，text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或 responseHTML 属性传递给 success 回调函数。

注意：我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。

==

对于不同的dataType，在ajax()方法中会对传回的数据做不同的处理：

<script>
function submitSearchForm()
{
    var data = jQuery('#form').serialize();
    var ajax_options = {
        timeout: '10000',
        type: 'POST',
        dataType: 'html',
        data: data,
        url:'/search',
        beforeSend:function () {
        },
        complete:function () {
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) {
        },
        success:function (response, textStatus) {
            var data = JSON.parse(response);  //因为dataType设置的是html，所以需要对返回的json数据进行解析才能使用
            // console.log(data.aaData);
            jQuery('#editable').DataTable({
                "bDestroy": true,
                "scrollX": true,
                "aaData": data.aaData,
            });
        },
    };
    $.ajax(ajax_options);
    return false;
}
</script>

&

<script>
function submitSearchForm()
{
    var data = jQuery('#form').serialize();
    var ajax_options = {
        timeout: '10000',
        type: 'POST',
        dataType: 'json',
        data: data,
        url:'/search',
        beforeSend:function () {
        },
        complete:function () {
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) {
        },
        success:function (response, textStatus) {
            // var data = JSON.parse(response);
            console.log(response.aaData);  //因为dataType设置的是json，所以这里可以直接用
            jQuery('#editable').DataTable({
                "bDestroy": true,
                "scrollX": true,
                "aaData": response.aaData,
            });
        },
    };
    $.ajax(ajax_options);
    return false;
}
</script>

参考链接：

• jQuery – AJAX 简介
• jQuery – AJAX get() 和 post() 方法
• jQuery ajax – ajax() 方法
• jQuery Ajax 操作函数
• jQuery学习之jQuery Ajax用法详解
• jQuery Ajax 全解析

=END=