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的语法规则十分简单，总结起来有：

规则如下:

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

JSON有两种结构：

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

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

注意：JSON的key是字符串，JSON的value是Object

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：请求服务器端地址

---

前台向后台发送请求：

1、超链接 <a href=""></a>

2、form表单

3、location.href = ""

4、ajax