AJAX  JSON

教学大纲
主要内容
 AJAX
 JSON

教学目标
 AJAX概念
 AJAX实现方式
 JSON概念
 JSON语法
 JSON与JAVA对象互转
 案例
 Java实现Jsonp跨域

一、AJAX 异步请求

1. 概念
   ASynchronous JavaScript And XML 异步的JavaScript 和 XML

（1）异步和同步
在客户端和服务器端相互通信的基础上：
* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。（同步）
* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。（异步）

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 （也称局部刷新）
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。(会出现白屏的情况)
而Ajax可以通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

提升用户的体验

2. 实现方式
   （1）原生的JS实现方式（了解）
   //1.创建浏览器核心对象
   var xmlhttp;
   if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp = new XMLHttpRequest();
   } else { // code for IE6, IE5
   xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
   }

            //2. 建立连接
            /*
                参数：
                    1. 请求方式：GET、POST
                        * get方式，请求参数在URL后边拼接。send方法为空参
                        * post方式，请求参数在send方法中定义
                    2. 请求的URL：
                    3. 同步或异步请求：true（异步）或 false（同步）
             */
            xmlhttp.open("GET", "ajaxServlet?username=tom" ,true);
   
            //3.发送请求
            xmlhttp.send();
   
            //4.接受并处理来自服务器的响应结果
            //获取方式 ：xmlhttp.responseText
            //什么时候获取？当服务器响应成功后再获取
            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
            /readyState 
            //存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
            //0: 请求未初始化
            //1: 服务器连接已建立
            //2: 请求已接收
            //3: 请求处理中
            //4: 请求已完成，且响应已就绪
   

客户端 —请求—》 服务器端 —响应—》客户端 的5个状态

          //status    200: "OK"
            //404: 未找到页面

//405：请求get /post 方式错误
//500：代码错误

            xmlhttp.onreadystatechange=function() {
                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                   //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }

（2）JQeury实现方式（重点掌握）

注：使用前先引入jQuery脚本库文件：
jquery-1.12.2.js

     第一种： $.ajax()
        * 语法：$.ajax({键值对});
         //使用$.ajax()发送异步请求
            $.ajax({
                url:"ajaxServlet1111" , // 请求路径
                type:"POST" , //请求方式
                //data: "username=jack&age=23",//请求参数
                data:{"username":"jack","age":23},
                success:function (data) {  //响应成功后的回调函数
                    alert(data);
                },
                error:function () {  //表示如果请求响应出现错误，会执行的回调函数
                    alert("出错啦...")
                },    
                dataType:"text"   //设置接受到的响应数据的格式
            });

	第二种：$.get()：发送get请求
        * 语法：$.get(url, [data], [callback], [type])
            * 参数：
                * url：请求路径
                * data：请求参数(可以用字符串形式,也可以用json格式)
                * callback：回调函数
                * type：响应结果的类型

	第三种： $.post()：发送post请求
        * 语法：$.post(url, [data], [callback], [type])
            * 参数：
                * url：请求路径
                * data：请求参数
                * callback：回调函数
                * type：响应结果的类型

//课堂操作：分别实现4个案例(原生ajax,jq默认ajax,get和post方式)

二、JSON

1. 概念
   JavaScript Object Notation JavaScript对象表示法

Java中对象的表示形式：
Person p = new Person();
p.setName(“张三”);
p.setAge(23);
p.setGender(“男”);

JSON对象表示形式：
var p={“name”:“张三”, “age”:23, “gender”:“男”};

JSON字符串转换成JSON对象

记：
* json现在多用于存储和交换文本信息（普便在使用）
* 用于进行数据的传输
* JSON 比 XML 更小、更快，更易解析。
2.语法
（1）基本规则
数据在名称（键）/值对中：json数据是由键值对构成的
* 键用引号（单双都行）引起来，也可以不使用引号
* 值得取值类型：
1. 数字（整数或浮点数） {“age”:18}
2. 字符串（在双引号中） {“name”:“刘三姐”}
3. 逻辑值（true 或 false） {“isNB”:true}
4. 数组（在方括号中） {“persons”:[{“name”:“zs”}, {“name”:‘ls’}]}
5. 对象（在花括号中） {“address”:{“province”:“陕西”, …}}
6. null {“flog”:null}
* 数据由逗号分隔：多个键/值对由逗号分隔
* 花括号保存对象：使用{}定义json 格式
* 方括号保存数组：[]
（2）获取数据:
1. json对象.键名
2. json对象[“键名”]
3. 数组对象[索引]
4. 遍历

//1.定义基本格式
var person = {“name”: “张三”, age: 23, ‘gender’: true};

var ps = [
{“name”: “张三”, “age”: 23, “gender”: true},
{“name”: “李四”, “age”: 24, “gender”: true},
{“name”: “王五”, “age”: 25, “gender”: false}
];

//获取person对象中所有的键和值

（3）for in 循环
for(var key in person){
    //这样的方式获取不行。因为相当于  person."name"
    //alert(key + ":" + person.key);
    alert(key+":"+person[key]);
}
    
//获取ps中的所有值
for (var i = 0; i < ps.length; i++) {
     var p = ps[i];
     for(var key in p){
         alert(key+":"+p[key]);
      }
}

3. JSON数据和Java对象的相互转换

• JSON解析器：
  * 常见的解析器：Jsonlib，Gson，fastjson，jackson

（1）JSON转为Java对象
1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
readValue(json字符串数据, Class)

（2）Java对象转换JSON
使用步骤：
1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换：
writeValue(参数1，obj):
参数1：
File：将obj对象转换为JSON字符串，并保存到指定的文件中
Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中

writeValueAsString(obj): 将对象转为json字符串

注解：
@JsonIgnore：排除属性。
@JsonFormat：属性值得格式化
@JsonFormat(pattern = “yyyy-MM-dd”)

复杂java对象转换
1. List：数组
2. Map：对象格式一致

案例

• 校验用户名是否存在
  1. 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
     1. $.get(type):将最后一个参数type指定为"json"
     2. 在服务器端设置MIME类型
        response.setContentType(“application/json;charset=utf-8”);
        3.如果很任性,get后面不指定type,服务端也不指定返回响应格式,可以用eval("("+data+")");
        2.使用Bootstrap进行表单的验证
        3.返回json数据的标准规范
        {“success”:1,“data”:{},“msg”:“此用户名太受欢迎,请更换一个”}
        Java实现Jsonp跨域

1. 什么跨域
   指的是服务器不一样[域名不同,端口号不同,请求协议(例如:http和https就是两种不同协议)]

2. JSONP定义
   JSONP是英文JSON with Padding的缩写，是一个非官方的协议。它允许在服务器端生成script tags返回至客户端，通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入，将server返回的response添加到页面实现特定功能。

3. JSONP由来
   要解释JSONP的来由，先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。 简而言之，就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互，这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。
   如何解决跨域访问呢？那就要借助浏览器的一个特性：尽管浏览器不允许页面中的脚本程序跨域读取数据，但却允许HTML引用跨域的资源，如图片，CSS和脚本程序。对于脚本程序的引用比较特殊，它被浏览器解析以后，就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件，一个简单的提示框：alert（“This is Victor！”）;。在A站点引用这个js，这个脚本就会在B站点的应用中执行，显示一个alert信息。由于站外脚本的引用是通过script tag来实现的，而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制（包括动态的创建script标签），这就可以实现通过调用站外程序对本地资源进行更改了。另外，通过

具体代码操作：
js部分
$.ajax({
url: ‘http://192.168.3.49:8080/findUserServlet’,
type: ‘post’,
dataType:‘jsonp’,
jsonp: “callback”,
data: {
“idCard”: $("#card").val()
},
success:function(data){
alert(data)
}
});

java代码
ObjectMapper mapper=new ObjectMapper();
String idCard=request.getParameter(“idCard”);
String callback=request.getParameter(“callback”);
System.out.println(“callback====”+callback);
System.out.println(“idCard====”+idCard);
Map<String,Object> map=new HashMap<String, Object>();
map.put(“name”, “hello word!”);
String json=mapper.writeValueAsString(map);
String str=callback+"("+json+")";
response.getWriter().write(str);