json：

data.json:

{
  "code":1,
  "data":
  {
    "name": "kid",
    "age":18
  }

}

　导入json数据：

    <script type="text/javascript">

        $.ajax({

            url:'js/data.json',

            //数据不要求很安全，小型数据用get

            type:'get',

            dataType:'json'

        })

            .done(function (data) {

                if(data.code==1){

                    $('.user_welcome em').html(data.data.name);

                    $('.user_welcome').show();

                    $('.user_login_link').hide();

                }

            })

            .fail(function () {

                alert('哎呀，好像网不好~');

            });

    </script>

　　json是JavaScript Object Nation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

　　与json对象不同的是，json数据格式的属性名称需要用双引号引起来，用单引号或不用引号会导致读取数据错误。

ajax：

　　ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。

　　ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

　　局部刷新：ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只局部刷新。ajax可以自己发送http请求，不用通过地址栏，所以整个页面不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

同源策略：

　　Node.js是一个Javascript运行环境(runtime environment)

jsonp:

　　ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要jsonp技术。

jsonp的原理如下：

<script type="text/javascript" src="....../js/data.js"><script>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ajax text</title>

    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>

    <script type="text/javascript">

        $.ajax({

            url:'data.js',

            type:'get',

            dataType:'jsonp',

            jsonpCallback:'aa'

        })

            .done(function (data) {

                alert(data);

            })

            .fail(function () {

                console.log("error");

            })

    </script>

    <script type="text/javascript" src="data.js"></script>

</head>

<body>

</body>

</html>

data.js:

aa({"name":"tom"})

JS——json、ajax、jsonp的更多相关文章

  1. 简单租房子实例详解---（session、ajax、json前后台数据处理、分页）

    本次实例我们结合session.ajax.json前后台数据处理.分页技术做一个租房信息系统 一共有五个界面:包括 管理员和用户的登录界面 登录界面的后台 <?php session_start ...

  2. jQuery中的$.getJSON、$.ajax、$.get、$.post的区别

    jQuery中的$.getJSON.$.ajax.$.get.$.post的区别 使用见Flask(python)异步(ajax)返回json格式数据 ①.$.getJSON $.getJSON()是 ...

  3. javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

    运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...

  4. Extjs6设置Store、Ajax、form的请求方式（GET、POST）

    Extjs6 设置Store.Ajax.form的请求方式(GET.POST) Ajax请求和Form的submit方法设置请求方式和原来一样,使用method : 'POST'设置 // 表单提交 ...

  5. URLRedirector 解决网页上无法访问 google CDN 的问题（fonts、ajax、themes、apis等）

    URLRedirector 解决网页上无法访问 google CDN 的问题(fonts.ajax.themes.apis等) 由于某些原因,在访问国外的网站时有时候会特别慢,像 stackoverf ...

  6. asp.net、mvc、ajax、js、jquery、sql、EF、linq、netadvantage第三方控件知识点笔记

    很简单,如下: 父页面:(弹出提示框) function newwindow(obj) { var rtn = window.showModalDialog('NewPage.htm','','sta ...

  7. JavaSE学习总结（十九）—— Java Web 综合应用（JSP、Servlet、IDEA、MySQL、JUnit、AJAX、JSON）

    一.使用Servlet+JDBC+MySQL+IDEA实现商品管理 1.1.创建项目 打开IntelliJ IDEA开发工具.点击Create New Project创建一个新的Web项目 选择Jav ...

  8. Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别

    官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...

  9. Highcharts、AJAX、JSON、JQuery实现动态数据交互显示图表柱形图

    上个图给大家看下效果. 点击  查看图表 如下图展示效果 Highcharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程 ...

  10. Django--多对多表的创建、contentType、ajax、ajax传输json数据格式、ajax传输文件数据、 自定义分页器

    MTV与MVC(了解): MTV模型(Django用的就是MTV): M:模型层(models.py) T:templates C:views MVC模型: M:模型层(models.py) V:视图 ...

随机推荐

  1. Windows 任务管理器中的几个内存概念

    我们使用的大部分 PC 是基于 Intel 微处理器的 x86 和 x64 架构计算机. 因此, 我们面对的 windows 避免不了和 Intel 架构有些设计上的契合. 比如接下来要说到的内存管理 ...

  2. BZOJ2288：[POJ Challenge]生日礼物

    浅谈堆:https://www.cnblogs.com/AKMer/p/10284629.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php?id ...

  3. Swift3.0 基础学习梳理笔记(一)

    本篇是我在学完一遍基础语法知识的时候,第一遍复习,我一遍梳理一遍记录的笔记.同时分享给像我一样在学习swift 的猿友们. 本篇可能过于冗长.所以所有的参考资料都分模块的写在palyground 里, ...

  4. JavaScript之闭包（重新认识）

    最近又重新学习了闭包,发现之前没有深刻理解作用域链,学习作用域链后对闭包才可以做到真正的理解.       闭包是指有权另一个函数作用域中变量的函数.要理解闭包首先理解作用域链.       执行环境 ...

  5. LoadRunner 服务器（Linux、Windows） 性能指标度量说明

    服务器资源性能计数器 下表描述了可用的计数器: 监控器 度量 说明 CPU 监控器 Utilization 监测 CPU 利用率. 磁盘空间监控器 Disk space 监测可用空间 (MB) 和已用 ...

  6. Unity实现支持泛型的事件管理以减少使用object作为参数带来的频繁装拆箱

    如果不用C#自身的event关键字而是要自己实现一个可统一管理游戏中各种消息事件通知管理的系统模块EventManger时,通常都是把事件delegate的参数定义为object类型以适应所有的数据类 ...

  7. CSS学习系列3--CSS3中的box-shadow的使用

    在CSS中,text-shadow是给文本添加阴影效果. box-shadow则是给元素块添加周边阴影效果. box-shadow基本的语法形式如下 box-shadow: [inset] x-off ...

  8. 17. PHP+Mysql注入防护与绕过

    黑名单关键字过滤与绕过 过滤关键字and.or PHP匹配函数代码如下: preg_match('/(and|or)/i', $id) 如何Bypass,过滤注入测试语句: 1 or 1 = 1   ...

  9. Python版的数据库查询构造器、ORM及动态迁移数据表。

    Orator Orator提供一个简单和方便的数据库数据处理库. 它的灵感来源于PHP的Laravel框架,借助其思想实现了python版的查询构造器和ORM. 这是完整的文档:http://orat ...

  10. NetCore 学习笔记（DI 实例生命周期）

    Transient: 每一次GetService都会创建一个新的实例 Scoped:    在同一个Scope内只初始化一个实例,同一个请求内只会被创建一次 Singleton :整个应用程序生命周期 ...