Json和AJax

JSON数据格式(重要)JavaScript Object Notation缩写 

定义:是一种轻量级的数据交换格式 

特点: 

1、易于程序员阅读和编写。

2、易于计算机解析和生成。

3、其实是javascript的子集:原生javascript支持JSON

<script type="text/javascript">

   var student = {

        name:'gao',

        age: 23,

        print : function() {

         console.log("name" + this.name + ", age: " + this.age);

        }

   }

   console.log(student.name);

    student.print()

</script>

json是一种与语言无关的数据交换的格式,作用:

1、使用ajax进行前后台数据交换

2、移动端与服务端的数据交换

JSON的语法规则:

JSON的语法规则十分简单,可称得上“优雅完美”,总结起来有:

JSON有两种结构:

1、对象格式:{"key1":obj1, "key2":obj2, "key3":obj3...}

2、数组/集合格式: [obj1,obj2,obj3...]

注意:JSON的key是字符串,JSON的value是Object

规则如下:

1)映射用冒号(“:”)表示。名称:值

2)并列的数据之间用逗号(“,”)分隔。名称1:值1,名称2:值2

3) 映射的集合(对象)用大括号(“{}”)表示。{名称1:值1,名称2:值2}

4) 并列数据的集合(数组)用方括号(“[]”)表示。

     [

        {名称1:值,名称2:值2},

        {名称1:值,名称2:值2}

     ]

5  元素值可具有的类型:string, number, object, array, true, false, null

1、对象(Object)用大括号({})表示

Student:

{

    "id" : 12,

    "name" : "java1711",

    "age" : 20,

    "gender" : "男"

}

2、数组(Array)用方括号([])表示:

List<Student>:   [{},{}]

[

    {

       "id" : 12,

        "name" : "java1711",

        "age" : 20,

        "gender" : "男"

    }

    ,

    {

       "id" : 13,

        "name" : "java1712",

        "age" : 21,

        "gender" : "女"

    }

]

JSON和XML:

JSON常备拿来与XML做比较,因为JSON的诞生本来就或多或少要有取代XML的意思。

相比XML,JSON的优势如下:

1、没有结束标签,长度更短,读写更快。

2、能够直接被JavaScript解析器解析。

3、可以使用数组。

JSON:

{

        "id" : 12,

         "name" : "gao",

         "age"  :   30,

         "gender" : "男",

         "interests" : ["篮球", "爬山", "旅游"]

}

XML:

<root>

    <id>12</id>

    <name>gao</name>

    <age>30</age>

    <gender>男</gender>

    <interest>篮球</interest>

    <interest>爬山</interest>

    <interest>旅游</interest>

</root>

JSON可以直接使用数组,但是XML没有直接定义数组,

如果数组很长,我们的代码中就要添加大量的没有实际意义的开始和结束标签,这对于网络传输是不利的。

XML主要是用在配置文件。



什么是ajax  

Ajax: asynchronous  javascript  and  xml (异步js和xml)

其是可以与服务器进行(异步/同步)交互的技术之一。

ajax的语言载体是javascript。

最大特点:异步请求,不刷新整个页面,只刷新局部也叫局部刷新。

什么是同步,什么是异步

同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态

异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死

易懂的理解:

异步请求:你传输吧,我去做我的事了,你传输完了告诉我一声。

同步请求:你现在传输,我要亲眼看着你传输完成,才去做别的事。

Ajax的运行原理

页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,

在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,

从而执行自定义的js逻辑代码完成某种页面功能。


Jquery的Ajax技术(重点)

jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操    作方法更简洁,功能更强大,与ajax操作相关的jquery方法有如下几种,但开发中    经常使用的有三种

1)$.get(url, [data], [callback], [type])  后面三个是可选的可以没有

2)$.post(url, [data], [callback], [type])

其中:

url:代表请求的服务器端地址

data:代表请求服务器端的数据(可以是key=value形式也可以是json格式)

callback:表示服务器端成功响应所触发的函数

type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换)

常用的返回类型:text、json、html等

3)$.ajax( { option1:value1,option2:value2... } ); 

常用的option有如下:

async:是否异步,默认是true代表异步。(get/post方式只能异步,不能配置)

data:发送到服务器的参数,建议使用json格式

dataType:服务器端返回的数据类型,常用text和json

success:成功响应执行的函数,对应的类型是function类型

type:请求方式,POST/GET

url:请求服务器端地址

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值