第三课 ajax和Json

ajax

• Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）
• AJAX 是一种用于创建快速动态网页的技术。
• 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
• 可以在不重新加载整个网页的情况下，对网页的局部进行更新。
• 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
• 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

ajax的实现原理

1.浏览器创建核心XMLHttpRequest对象
2.浏览器发送HttpRequest请求，到服务器
3.服务器接收浏览器发送过来的HttpRequest请求。
4.服务器创建响应的数据，响应给客户端浏览器
5.浏览器接收到服务器返回的内容，可以对页面进行更新

ajax的优缺点

优点

a) 异步更新,提高效率；
b) 实现局部的刷新，可以不用修改整个页面;
c) 提高用户的体验；

缺点

a) 异步请求不适用所有的场景。异步没有启动的前后顺序。
b) 异步增加服务器的压力。
c) 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题

什么是异步

异步:客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。可以同时发起多个请求;
同步:须当一个请求执行完毕之后，才可以发起新的请求。

ajax既可以发起异步请求，也可以发起同步请求，可以自己去设置。

ajax使用场景

• 校验用户是否存在
• 省市级联
• 计算购物车数据

ajax实现方式

• js原生ajax，很少用
• jquery封装ajax。主流

jquery实现ajax

1. 使用jquery封装好的方法，操作ajax.
2. 使用起来方便，代码更少；
3. 因为使用jquery所以浏览器兼容性更强;

$.ajax

该方法是jquery实现ajax的底层方法，可以发送post请求，也可以是get请求

相关参数:

其他的参数可以看jquery ajax 的帮助文档

例如：

    //点击事件
        $("#ajaxPost").click(function() {
            //jquery  ajax
            $.ajax({
                //参数
                type : "get", //请求方式
                url : "${pageContext.request.contextPath}/Ajax2Servlet", //服务器的路径
                //data : "username=xiaohua",//参数
                dataType : "json",//返回值类型
                success : function(data) {//成功之后的回调函数
                    alert(data);
                },
                error : function(data) {
                    alert("error---:" + data);
                }
            });
        });

$.get

这种方式只能发起get请求

$.get(URL,data,function(data,status,xhr),dataType)

代码

//点击事件
        $("#ajaxGet").click(function() {
            $.get("${pageContext.request.contextPath}/Ajax2Servlet",function(data){
                alert(data.name);
            },"json");
        });

$.getJSON()

只是不用设置返回值类型，默认的是json。只有三个参数

$.post

$.post() 方法使用 HTTP POST 请求从服务器加载数据

$(selector).post(URL,data,function(data,status,xhr),dataType)

代码

//点击事件
        $("#ajaxPost").click(function() {
            $.post("${pageContext.request.contextPath}/Ajax2Servlet",function(data){
                alert(data.name);
            },"json");
        });

JSON

简介

1.JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
2.JSON 是存储和交换文本信息的语法。类似 XML。
3.JSON 比 XML 更小、更快，更易解析
4.JSON 具有自我描述性，更易理解 例如:{username:”zhangsan”,age:12,sex:”男”,address:’深圳’}
5.JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台

深圳天气测试数据：

http://v.juhe.cn/weather/indexformat=2&cityname=%E6%B7%B1%E5%9C%B3&key=ee16e4754bdbc037a346646cb63bc16f

优点

• 数据格式比较简单，易于读写=====>{username:”zhangsan”,age:12,sex:”男”,address:’深圳’}
• 易于解析，客户端JavaScript可以进行JSON数据的读取
• 支持多种语言(Java,C,C#,JavaScript,PHP,Python)

json语法

json对象

JSON 使用{}表示一个对象，该对象可以拥有多个属性。

json数组

JSON使用中括号[]表示一个数组。

对象中嵌套数组

{
    "name":"张飞",
    "age":23,
    "address":"广东深圳",
    "vip":false,
    "phone":[18812345678,13712345678]
}

数组中嵌套对象

[
  {"name":"张飞","age":23,"address":"广东深圳","vip":false},
     {"name":"刘备","age":23,"address":"广东深圳","vip":false},
     {"name":"关羽","age":23,"address":"广东深圳","vip":false},
     {"name":"赵子龙","age":23,"address":"广东深圳","vip":false}
]

json转换