JavaScript/Ajax/jQuery相关知识记录


=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>
参考链接:

=END=


《“JavaScript/Ajax/jQuery相关知识记录”》 有 8 条评论

  1. JavaScript中的字符串判等
    https://stackoverflow.com/questions/3586775/what-is-the-correct-way-to-check-for-string-equality-in-javascript
    `
    使用 === 而不是 ==
    `

    JavaScript中如何遍历json对象
    https://stackoverflow.com/questions/722668/traverse-all-the-nodes-of-a-json-object-tree-with-javascript
    `
    function traverse(o,func) {
    for (var i in o) {
    console.log([i, o[i]]);
    if (o[i] !== null && typeof(o[i])==”object”) {
    //going one step down in the object tree!!
    traverse(o[i],func);
    }
    }
    }
    `

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注