json

学习目标

  • 能够知道json的格式

1. json的介绍

json是JavaScript Object Notation的首字母缩写，翻译过来就是javascript对象表示法，这里说的json就是类似于javascript对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

2. json的格式

json有两种格式：

  1. 对象格式
  2. 数组格式

对象格式:

对象格式的json数据，使用一对大括号({})，大括号里面放入key:value形式的键值对，多个键值对使用逗号分隔。

对象格式的json数据:

{
    "name":"tom",
    "age":18
}

格式说明:

json中的(key)属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

数组格式:

数组格式的json数据，使用一对中括号([])，中括号里面的数据使用逗号分隔。

数组格式的json数据:

["tom",18,"programmer"]

实际开发的json格式比较复杂,例如:

{
    "name":"jack",
    "age":29,
    "hobby":["reading","travel","photography"]
    "school":{
        "name":"Merrimack College",
        "location":"North Andover, MA"
    }
}

3. json数据转换成JavaScript对象

json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象。

示例代码:

var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);

// 操作属性
alert(oPerson.name);
alert(oPerson.age);

4. 小结

  • json就是一个javascript对象表示法，json本质上是一个字符串。
  • json有两种格式：1. 对象格式, 2. 数组格式

ajax

学习目标

  • 能够知道ajax的作用

1. ajax的介绍

ajax是Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让javascript发送异步的http请求，与后台通信进行数据的获取，ajax最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。

这里提示一下大家, 在html页面使用ajax需要在web服务器环境下运行,一般向自己的web服务器发送ajax请求。

2. ajax的使用

jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。

示例代码:

<script>
    $.ajax({
    // 1.url 请求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 请求方式，默认是'GET'，常用的还有'POST'
    type:'GET',
    // 3.dataType 设置返回的数据格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 设置发送给服务器的数据, 没有参数不需要设置

    // 5.success 设置请求成功后的回调函数
    success:function (response) {
        console.log(response);    
    },
    // 6.error 设置请求失败后的回调函数
    error:function () {
        alert("请求失败,请稍后再试!");
    },
    // 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写
    async:true
});
</script>

ajax方法的参数说明:

  1. url 请求地址
  2. type 请求方式，默认是'GET'，常用的还有'POST'
  3. dataType 设置返回的数据格式，常用的是'json'格式
  4. data 设置发送给服务器的数据，没有参数不需要设置
  5. success 设置请求成功后的回调函数
  6. error 设置请求失败后的回调函数
  7. async 设置是否异步，默认值是'true'，表示异步，一般不用写

  8. 同步和异步说明

    • 同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。
    • 异步是多个ajax同时请求，不需要等待其它ajax请求完成， 好比线程异步。

ajax的简写方式:

$.ajax按照请求方式可以简写成​$.get或者$.post方式

ajax简写方式的示例代码:

 <script>
    $(function(){
        /*
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
        */ 
        $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
            console.log(dat);
            console.log(status);
            alert(dat);
        }).error(function(){
            alert("网络异常");
        });

        /*
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
        */ 
        $.post("test.php", {"func": "getNameAndTime"}, function(data){
            alert(data.name); 
            console.log(data.time); 
        }, "json").error(function(){
            alert("网络异常");
        }); 
    });


</script>

$.get和​$.post方法的参数说明:

  • $.get(url,data,success(data, status, xhr),dataType).error(func)
  • $.post(url,data,success(data, status, xhr),dataType).error(func)
  1. url 请求地址
  2. data 设置发送给服务器的数据，没有参数不需要设置

  3. success 设置请求成功后的回调函数

    • data 请求的结果数据
    • status 请求的状态信息, 比如: "success"
    • xhr 底层发送http请求XMLHttpRequest对象

  4. dataType 设置返回的数据格式

    • "xml"
    • "html"
    • "text"
    • "json"

  5. error 表示错误异常处理

    • func 错误异常回调函数

3. 小结

  • ajax 是发送http请求获取后台服务器数据的技术
  • ajax的简写方式可以使用$.get和​$.post方法来完成