Ajax和Json

1、什么是Ajax?　

　　Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换，

　　Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

　　简单来说：Ajax就是异步加载,局部刷新

2、JQuery的ajax：底层封装了JS的ajax代码，做了浏览器的兼容性。

　　程序员仅需要调用简单的JQ的AJAX方法，就可以实现复杂的AJAX功能。

少量代码，实现复杂功能
浏览器兼容性好，一处编写，处处执行

3、应用场景

　　注册重名验证

　　自动补全等

4、同步和异步的区别

　　同步方式发送请求

　　　　发送一个请求，需要等待响应返回，然后才能够发送下一个请求。

　　　　如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。

　　异步方式发送请求

　　　　发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

5、第一种方式

$(function(){
    $("#username").blur(function(){
        //发送请求,进行验证,验证用户名是否存在
        //1.创建xmlhttpRequest对象
        var request = new XMLHttpRequest();
        //2.获取连接
        
        //参数:1.请求方式2.请求的路径是否以异步方式提交
         
        request.open("post","login1",true);
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        //3.发送请求
        request.send("username="+this.value);
        //4.获取响应的文本
        //监听readystate值的改变你事件
        request.onreadystatechange = function(){
            //当readyState为4时,表示请求结束
            if(request.readyState == 4){
                //获取响应的文本
                var msg = request.responseText;
                if(msg == "恭喜你，该用户名可以使用"){
                    $("#span1").css("color","green").html(msg);
                }else{
                    $("#span1").css("color","red").html(msg);
                }
            }
        }
    });
});

　　第二种方式　　.ajax()

$(function(){
    //ajax中各个参数之间用，隔开
    $("#username").blur(function(){
        $.ajax({
            type:"get",            //请求类型
            url:"login1",        //请求路径
            data:"username="+this.value,    //请求参数
            dataType:"text",        //预期返回的数据类型
            success:function(res){            //请求成功时的回调函数，参数为返回的文本内容
                if(res == "恭喜你，该用户名可以使用"){
                    $("#span1").css("color","green").html(res);
                }else{
                    $("#span1").css("color","red").html(res);
                }
            }
        
        });
        
    });
});

　　第三种方式

$(function(){
    $("#username").blur(function(){

        $.post("login1?mark=check",
            {username:this.value},
            function(res){
                if(res == "恭喜你，该用户名可以使用"){
                    $("#span1").css("color","green").html(res);
                    $("#sub").prop("disabled",false);
                }else{
                    $("#span1").css("color","red").html(res);
                    $("#sub").prop("disabled",true);
                }
            },
            "text"
        );
        
    });
})

　　发请求时使用：post的四个参数详解

　　url : 请求路径。向某个路径发送请求。字符串【必填字段】

　　data : 发送请求时的参数列表。【可以忽略】

　　　　格式1：{k1: "v1",k2: "v2",k3: "v3"…….. }

　　　　例如：{username: "张三",password: "123",sex: "man" }

　　　　最终拼接成：username=张三&password=123&sex=man

　　　　格式2：{"k1": "v1","k2": "v2","k3": "v3"…….. }

　　　　例如：{"username": "张三","password": "123","sex": "man" }

　　　　最终拼接成：username=张三&password=123&sex=man

　　　　目前，使用ajax提交数据时，后台仍然可用getParameter(),getParameterValues(),getParameterMap()

　　　　但是获取的参数名一定要和 data中key名对应，和表单输入项name属性无关

　　callback : 响应成功的回调函数。【可以忽略】

　　　　ajax局部刷新发生在回调函数中。

　　　　该回调函数仅在响应成功并且响应状态码200时，才会调用

　　　　格式：

　　　　　　function(data){

　　　　　　　　//data 响应体文本

　　　　　　}

　　type : 设置响应体的类型。（要求，服务器不设置响应体类型）【可以忽略】

　　　　　　xml, html, script, json, text, _default

　　　　type默认值：html代码

　　　　type常用值：html,json

JSON的简介

　　JSON是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，就是说不同的编程语言JSON数据是一致的。　

JSON的语法格式

JSON要求一个特殊的格式:

以”{”开始,以”}”结束.
对象中的属性名和属性值使用”:”分割,
多个属性之间,使用”,”风格
使用[]表示一个对象的数组.

JSON的工具包

　　Jackson fastjson(阿里) gson(谷歌)

　　都可以将对象和json格式的字符串进行相互的转化.

　这里使用的是fastjson

　　对象转为字符串:

　　　　JSON.toJSONString(Object obj);

　　字符串转为对象:

　　　　JSON.parseObject(String,Class);