一、JSON

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

1、javascript对象字面量

2、json格式的数据

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

json的另外一个数据格式是数组,和javascript中的数组字面量相同。

二、ajax与jsonp

ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。

1、同步和异步

现实生活中,同步指的是同时做几件事情,异步指的是做完一件事再做另外一件事,程序中的同步和异步是把现实生活中的概念对换,也就是程序中的异步指的是现实生活中的同步,程序中的同步指的是现实生活中的异步。

2、局部刷新和无刷新

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

3、同源策略

ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全的考虑。特征报错提示:

XMLHttpRequest cannot load https://www.baidu.com/. No

'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'null' is therefore not allowed access.

4、$.ajax使用方法

常用参数:

1、url 请求地址

2、type 请求方式,默认是'GET',常用的还有'POST'

3、dataType 设置返回的数据格式,常用的是'json'格式,也可以设置为'html'

4、data  设置发送给服务器的数据

5、success  设置请求成功后的回调函数

新的写法(推荐):

$.ajax({

  url:"接口",

  type:"get/post",

  dataType:"json",

  data:{"aa":1},

})

.done(function(data){

......

})

.fail:function(){

alert("服务器超时,请重试!");

}

三、jsonp

ajax只能请求同一个域名下的数据或资源,有时候跨域请求数据,就需要用到jsonp技术,jsonp可以跨域请求数据,它的原理主要是利用了script标签可以跨域链接资源的特性。

jsonp的原理如下:

<script>

  function aa(dat){

    alert(data.name);

  }

</script>

<script src="../js/data.js"></script>

页面上定义一个函数,引用一个外部js文件,外部js文件的地址可以是不同域的地址,外部js文件的内容如下:

aa({"name":"tom","age":18});

外部js文件调用页面上定义的函数,通过参数把数据传进去。

jsonp写法:

$.ajax({

  url:"接口",

  type:"get/post",

  dataType:"jsonp",

  data:{"aa":1},

})

.done(function(data){

......

})

.fail:function(){

alert("服务器超时,请重试!");

}

今天就先总结到这吧.......

ajax知识点总结的更多相关文章

  1. Ajax 知识点

    AJAX 即"Asynchronous Javascript And XML"(异步JavaScript和XML) Ajax 不是某种编程语言,只是一种在无需重新加载整个网页的情况 ...

  2. 关于Ajax知识点小节

    URL:统一资源定位符 网络的七层协议:网卡 驱动  网络层(ip)  传输层(tcp udp) 会话层( )  应用层(http.) restful表征状态转移(一种表征架构) CURD 增删改查 ...

  3. ajax知识点

    什么是AJAX? AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. ...

  4. django jquery ajax 知识点

    示例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id='d'>1</div> <div> <div id='i1' nam ...

  5. ajax知识点及正则表达式总结

    一.JSON JSON是JavaScript  Object  Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数 ...

  6. Ajax知识点复习

    1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...

  7. ajax知识点补充

    读取服务器上的数据: HTML: <!DOCTYPE HTML><html><head><meta charset="utf-8"> ...

  8. Ajax知识点整理

    一.javascript原生Ajax 1.简介 Ajax是Asynchronous JavaScript+XML(异步JavaScript和XML)的缩写. 该名称诞生于XML还是数据传输首选格式的时 ...

  9. Ajax 知识点总结

    1.AJAX的优缺点都有什么? 最大的一点是页面无刷新,用户的体验非常好.使用异步方式与服务器通信,具有更加迅速的响应能力.可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻 ...

随机推荐

  1. [python标准库]Pickle模块

    Pickle-------python对象序列化 本文主要阐述以下几点: 1.pickle模块简介 2.pickle模块提供的方法 3.注意事项 4.实例解析 1.pickle模块简介 The pic ...

  2. 论文笔记 Network In Network

    这篇论文思路简单.易实现.效果好,是一篇难得的佳作.从实现的角度理解,就是做了以下两个替换: 将线性卷积替换为多层感知机(某种程度上,线性卷积可以认为识一层感知机). 将全连接层用global ave ...

  3. JavaScript设计模式_02_策略模式

    在程序设计中,我们常常遇到这种情况,要实现某一个功能我们有很多种算法可以实现.这些算法灵活多样,而且可以随意互相替换.这种解决方案就是所谓的策略模式. /* * pre:策略模式 * 示例:公司计算奖 ...

  4. mysql之 mysql 5.6不停机主主搭建(活跃双主基于日志点复制)

    环境说明:版本 version 5.6.25-log 主库ip: 10.219.24.25从库ip:10.219.24.22os 版本: centos 6.7已安装热备软件:xtrabackup 防火 ...

  5. 转发:Ubuntu软件卸载安装的命令

    说明:由于图形化界面方法(如Add/Remove... 和Synaptic Package Manageer)比较简单,所以这里主要总结在终端通过命令行方式进行的软件包安装.卸载和删除的方法. 一.U ...

  6. jsp 文件使用 include指令 导入 jspf 分析,及导入jspf 文件后出现乱码问题

    1.为什么要导入jspf文件 在做网站开发中,因为有很多的页面的导航栏是相同的,所以我们要把导航栏提取出来,生成一个jspf文件. 然后在jsp页面中使用 include 指令 导入jspf文件,这样 ...

  7. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

  8. flask简单web应用

    推荐一个学习python的网站,个人觉得在这里面收获挺大的,希望对后来学习flask的小伙伴们有帮助.http://www.pythondoc.com/ 用flask框架实现第一个web应用 首先需要 ...

  9. react实现双向绑定

    双向绑定功能是在项目中比较常见的一个需求,传统的js实现方式是添加监听函数的方式,Vue框架实现很简单,因为它本身就是基于双向绑定实现的,接下来我将讲解一下如何使用react实现双向绑定的功能是 首先 ...

  10. org.apache.commons.lang3 的随机数生成

    apache org.apache.commons.lang3 的随机数生成工具,方便使用. String a12 = RandomStringUtils.random(4, "012345 ...