json：

data.json:

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

　导入json数据：

  1.     <script type="text/javascript">
  2.         $.ajax({
  3.             url:'js/data.json',
  4.             //数据不要求很安全，小型数据用get
  5.             type:'get',
  6.             dataType:'json'
  7.         })
  8.             .done(function (data) {
  9.                 if(data.code==1){
  10.                     $('.user_welcome em').html(data.data.name);
  11.  
  12.                     $('.user_welcome').show();
  13.                     $('.user_login_link').hide();
  14.                 }
  15.             })
  16.             .fail(function () {
  17.                 alert('哎呀，好像网不好~');
  18.             });
  19.     </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的原理如下：

  1. <script type="text/javascript" src="....../js/data.js"><script>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ajax text</title>
  6.     <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript">
  8.         $.ajax({
  9.             url:'data.js',
  10.             type:'get',
  11.             dataType:'jsonp',
  12.             jsonpCallback:'aa'
  13.         })
  14.             .done(function (data) {
  15.                 alert(data);
  16.             })
  17.             .fail(function () {
  18.                 console.log("error");
  19.             })
  20.     </script>
  21.     <script type="text/javascript" src="data.js"></script>
  22. </head>
  23. <body>
  24.  
  25. </body>
  26. </html>

data.js:

  1. 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. BZOJ1720：[Usaco2006 Jan]Corral the Cows 奶牛围栏

    我对二分的理解:https://www.cnblogs.com/AKMer/p/9737477.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem ...

  2. Python：删除字符串中的字符

    一.删除字符串两端的一种或多种字符 #strip().lstrip().rstrip()方法:(默认删除空格符) A.list.strip(字符):删除字符串两端的一种或多种字符: #例:删除字符串s ...

  3. JAVA 1.5 并发之 ReentrantLock

    在文章里我不打算具体讲Lock的实现,对此有兴趣的请点击这篇博文 http://www.blogjava.net/BucketLi/archive/2010/09/30/333471.html 我是一 ...

  4. js---倒计时的自动跳转.html

    ============================================================================== 倒计时的自动跳转.html <!DO ...

  5. Python-Redis的Set操作

    集合为不重复的列表 无序集合 sadd(name,values):在name对应的集合中添加元素 smembers(name):获取name对应的集合的所有成员 127.0.0.1:6379> ...

  6. winfrom实现控件全屏效果

    用常规方法实现全屏显示时,由于采用的三方控件导致界面顶端一直有一条半透明的类似标题栏的东西无法去除,原因一直没找到. 下面综合整理下网上两位博主的用WindowsAPI实现全屏的方法: 控件全屏显示: ...

  7. k8s 基础 k8s架构和组件

    k8s 的总架构图

  8. 创建Ajax

    Ajax的全称是Asynchronous javascript and XML = 异步传输 + JS + XML     不需要刷新页面就可以获取新的数据 创建步骤:    (1)创建XML对象也就 ...

  9. Java探索之旅(3)——选择与循环

    1.选择结构与输出 ❶Switch语句: Switch表达式必须算出 char,byte,short,int类型数值之一,总是括号括住:Value1----ValueN,对应有相同数据类型且为常量或者 ...

  10. ansible案例-安装nginx

    一.创建目录: mkidr -p playbook/{files,templates}   二.自定义index.html文件 $ vim playbook/templates/index.html. ...