what is ajax ?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

例子1-跨域请求

跨域请求的要求请看下面：

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

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

服务器端的要求：

  1. 返回的数据必须是这样的格式：函数名("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

}

8 HTML&JS等前端知识系列之Ajax的例子的更多相关文章

  1. 9 HTML&JS等前端知识系列之Ajax post请求带有token向Django请求

    我们 在母板上写入这段代码: <script type="text/javascript"> // 个人定义大函数,不是重点,可以忽略 $(document).read ...

  2. 3 HTML&JS等前端知识系列之javascript的基础

    preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...

  3. 8 HTML&JS等前端知识系列之jquery的自定义方法

    preface 有时候我们在前端写jquery的时候,会自己自定义些方法,这样可以不需要重复造轮子.先说说2种自定义方法的区别: 不跟在选择器后面的 跟在选择器后面的. 那下面说说如何自定义jquer ...

  4. 5 HTML&JS等前端知识系列之jquery基础

    preface jquery其实就是对javascript的再次封装,方便我们开发者调用,下载地址是:http://jquery.com/download/ ,下面就说说常用使用方法 选择器 基本选择 ...

  5. 4 HTML&JS等前端知识系列之Dom的基础

    preface 主要聊聊dom的编程,包含下面的内容: what's the dom dom选择器 innerText 替换或写入文本 value 获取input,select,textarea的值 ...

  6. 7 HTML&JS等前端知识系列之jquery的事件绑定

    preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...

  7. 大前端技术系列：TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  8. JS前端知识模块大全

    公司前端:小胖提供,表示感谢 1. 基础 HTML, CSS, JS 文档 W3CSCHOOL: http://www.w3schools.com/ MDN: https://developer.mo ...

  9. 前端知识复习： JS选中变色

    前端知识复习:JS选中变色 上篇文章 :前端知识复习:Html DIV 图文混排(文字放在图片下边) Js选中图片效果 <!DOCTYPE html> <html xmlns=&qu ...

随机推荐

  1. ORACLE清理、截断监听日志文件（listener.log）

    在ORACLE数据库中,如果不对监听日志文件(listener.log)进行截断,那么监听日志文件(listener.log)会变得越来越大,想必不少人听说过关于"LISTENER.LOG日 ...

  2. .NET应用架构设计—工作单元模式（摆脱过程式代码的重要思想，代替DDD实现轻量级业务）

    阅读目录: 1.背景介绍 2.过程式代码的真正困境 3.工作单元模式的简单示例 4.总结 1.背景介绍 一直都在谈论面向对象开发,但是开发企业应用系统时,使用面向对象开发最大的问题就是在于,多个对象之 ...

  3. mysql-7 数据检索（5）

    联结(join) SQL最强大的功能之一就是能在数据检索查询的执行中联结(join)表.联结就是利用SQL的SELECT能执行的最重要的操作. 例子:此例子包含两个表,一个表是vendors , ve ...

  4. SQL Server DAC——专用管理员连接

    今天打开数据库刚要连接时,看到“连接到服务器”窗口,突发的想到:要是SQL Server 不再响应正常的连接请求,又想使用数据库时,我们该怎么办?      其实我们还能通过“SQL Server D ...

  5. 使用Sqlserver更新锁防止数据脏读

    有时候我们需要控制某条记录在程序读取后就不再进行更新,直到事务执行完释放后才可以.这时候我们就可以将所有要操作当前记录的查询加上更新锁,以防止查询后被其它事务修改.这种操作只锁定表中某行而不会锁定整个 ...

  6. Oracle体系结构详解

    对于一门技术的学习,尤其是像Oracle database这种知识体系极其庞杂的技术来讲,从宏观上了解其体系结构是至关重要的.同时,个人认为,未必是专业DBA人员才需要了解其体系结构(固然对于数据库专 ...

  7. 轻松搞懂WebService工作原理

    用更简单的方式给大家谈谈WebService,让你更快更容易理解,希望对初学者有所帮助. WebService是基于网络的.分布式的模块化组件. 我们直接来看WebService的一个简易工作流程: ...

  8. Windows 10 装机回忆录

    Frank.Han 标记: Windows,快捷键,安装 2015年10月我便更新了Win10系统,一直用着很顺手,比起Win8.x,他更像Win7的嫡系版本. 屏蔽掉系统自带的平板服务(小娜.地理位 ...

  9. 3.开发Java消息驱动bean实例代码

    java消息服务(JMS)是用于访问企业消息系统的开发商中立的API.企业消息系统可以协助应用软件通过网络进行消息交互.应用程序A发送一条消息到消息服务器的某个目的地(Destination),然后消 ...

  10. C程序运行计时

    在标准的C/C++中最小的时间单位是毫秒ms,下面代码中clock_t是long: 每经过1ms clock()的值就增加1:常量CLOCKS_PER_SEC,它用来表示一秒钟会有多少个时钟计时单元 ...