8 HTML&JS等前端知识系列之Ajax的例子

what is ajax ?

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

例子1-跨域请求

跨域请求的要求请看下面：
你的web页面的js代码必须满足以下2点要求：

发送格式必须是jsonp。
函数名：告诉对方用什么函数名来返回数据，通过jsonCallback来设置。

服务器端的要求：

返回的数据必须是这样的格式：函数名("OK")，比如list(jsonp)，这个函数名是双方协商的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax跨域</title>
</head>
<body>
    <input value="获取节目" type="button" onclick="ajaxrequest()">
    <div id="content"></div>
    <script src="jquery-2.2.3.js"></script>
    <script type="text/javascript">
    function ajaxrequest() {
        $.ajax({
        url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403",  // 定义要和哪个url交互数据

        type:'GET',        // 定义使用什么方法向服务器发送请求
        dataTyep:"jsonp",           // jsonp是说我请求数据的时候会告诉服务器，返回数据的时候要使用我给你的函数名去包裹数据
        jsonp:'callback',      // 对方根据这个键来取值，请看下面
        jsonCallback:'list',    // 服务器返回数据的时候使用，告诉我们的ajax去用什么函数名解析数据
        // callback + list就等于 (callback:list) 这样的键值对。这样对方直接根据callback来取值了。
        sucess: function (data) {     // 执行成功调用这个方法，方法内容自定义
            $.each(date.date,function(i){
            var item = data.data[i];
            console.log(item);
            var str = "<p>" + item.week +"</p>>";
                })
            },
        error: function (data) {   // 执行失败调用这个方法,方法内容自定义
            alert("have some error!!")
            }
        })
    }
    </script>
</body>
</html>

例子2-本域的ajax例子

// 完整的ajax例子
function get_status_usage(){
    disk_data = [];
    $.ajax({
        url: "{% url 'get_status_data'%}",
        type: 'POST',
        dataType: 'json',
        data: {'host_id':$('#host_id').text()},
        success: function(callback){   // 自定义函数内容了，我这里的你可以忽略。
            console.log(callback);
            callback_copy = callback
            if( callback.disk_usage_a_hour){
            for(disk in callback.disk_usage_a_hour){
            disk_data.push(callback.disk_usage_a_hour[disk])
                   }
             }
            console.log('disk_data',disk_data);
            return disk_data
        }, // end sucess func
        error: function(err_info){
            alert('error:',err_info)
            } 
    });  // end ajax
}