JQuery && Ajax和Json

Ajax和Json

一、Ajax

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。

1、原生的JS操作（了解）

function loadXMLDoc() {
        //在这里使用原生的js代码来进行Ajax操作。

        var engine = new XMLHttpRequest();  //构造ajax引擎

        //建立连接：
        engine.open("get", "http://localhost:8080/0810/demo", true);
        //发送请求
        engine.send();

        //为引擎绑定事件
        engine.onreadystatechange = function (ev) {
            //当某种事件执行时，触发的操作。
            if (engine.readyState == 4 && engine.status == 200){
                //当响应正常返回时，拿到返回结果：
                var text = engine.responseText;
                document.getElementById("h3").innerText = text;

            }
        }
    }

2、JQuery中的Ajax(必须掌握)

JQuery的ajax使用:

<div id="myDiv">
    <input type="text" id="content" name="content">
    <h3 id="h3">这里的内容会被Ajax来更改</h3>
</div>
<button type="button" id="get">$.get改变内容</button>
<button type="button" id="post">$.post改变内容</button>
<button type="button" id="ajax">$.ajax改变内容</button>

3、$.get / $.post

参数传递

    $(function () {
        //1. 给三个按钮绑定click事件
        $("#get").click(function () {
            //使用jq库，来发送 get 请求
            // 如果要向服务器发送数据。 需要采用 JS 对象的格式 （跟Java中的Map格式类似）

            var content = $("#content").val();

            var data =  {
                //对象的属性名就是类似 form 表单的name属性值。
                // 冒号对应的属性值， 就是要传递的值.
                cnt:content
            }


            $.get("${pageContext.request.contextPath}/demo",data,function (data) {
                //回调方法有一个data参数，这个参数就是服务器成功响应时返回的内容
                $("#h3").text(data);
            })
        })
        
        $("#post").click(function () {
            //使用jq库，来发送 get 请求


            var content = $("#content").val();

            var data =  {
                //对象的属性名就是类似 form 表单的name属性值。
                // 冒号对应的属性值， 就是要传递的值.
                cnt:content
            }

            $.post("${pageContext.request.contextPath}/demo",data,function (data) {
                //回调方法有一个data参数，这个参数就是服务器成功响应时返回的内容
                $("#h3").text(data);
            })
        })

4、$.ajax(万金油)

 $("#ajax").click(function () {
            var content = $("#content").val();

            //使用 $.ajax 方法能发送任意的 Ajax 请求，且能进行最精细的控制。
            // 基本上就是通过设置 setting 配置对象来操作,下面演示常用的setting值
            $.ajax({
                type: 'get',  // 请求的方式
                url: '${pageContext.request.contextPath}/demo' , //请求的地址
                data :{  //发送的数据
                    cnt: content
                },
                success: function(msg){  //成功时做的事情
                    $("#h3").text(msg);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //错误时要做的事情（特色）
                    alert(textStatus);
                }
            })

二、JSON

原来是 JS 中的一种对象表现形式。后来的话，常用于一种跨语言的传输格式。类似于XML，只是JSON更简洁，现在前后端交互过程中通常使用JSON格式来传递数据。

//json的格式：
//描述一个对象
{
    属性名:属性值,
    .......
}

//描述一个数组、集合

就可以描述任意复杂的信息：

• 比如： 描述 张三 这个 用户

<user>
	<name>张三</name>
   <age>20</age>
</user>

对应的JSON写法：

{
   name:'张三',
   age:20
}

• 在比如：描述 张三、 李四、王五 这三个用户:

<users>
	<user>
       <name>张三</name>
       <age>20</age>
   </user>
   <user>
       <name>李四</name>
       <age>18</age>
   </user>
   <user>
       <name>王五</name>
       <age>25</age>
   </user>
</users>

对应的JSON：

[
  {
       name:'张三',
   	age:20
   },
   {
       name:'李四',
   	age:18
  },
   {
       name:'王五',
  	age:25
   }
]

• 再比如： 一个用户有多个爱好：

<user>
	<name>张三</name>
   <age>20</age>
   <hobbys>
   	<hobby>读书</hobby>
       <hobby>看电影</hobby>
       <hobby>打篮球</hobby>
   </hobbys>
</user>

对应的JSON

{
   name:'张三',
   age: 20,
   hobbys:['读书',‘看电影','打篮球']
}

另外 JSON 格式解析十分方便。

• 属性访问 .属性名
• 集合访问 [索引]

var user = {
  name:'张三',
   age: 20,
   hobbys:['读书',‘看电影','打篮球']
}

//如果访问张三的第二个爱好
user.hobbys[1];

//如果访问张三的第二个爱好
user.hobbys[1];

1、JSON对象和JSON字符串

// JSON对象

var jsonObj = {
   name:"张三",
   age:20
}

//JSON字符串

var jsonStr = "{ \"name\": \"张三\" , \"age\":20 }";

咱们的服务器端（Servlet） 返回给客户端的是 满足 JSON格式的字符串。

2、JSON对象和JSON字符串的相互转换

//json对象转JSON字符串
var jsonObj = {
    name:"张三",
    age:20
}

var jsonStr = JSON.stringify(jsonObj); //JSON.stringify 方法

//json字符串转json对象
var jsonStr = "{ \"name\": \"张三\" , \"age\":20 }";

var jsonObj = JSON.parse(jsonStr);// 方式1： 调用 JSON.parse 方法
var jsonObj = eval("("+jsonStr+")"); //方式2： 调用 eval() 方法来执行一个表达式

3、服务器返回JSON字符串的问题

• 中文乱码 resp.setCharacterEncoding("utf-8");
• 【建议】如果服务器端设置了 resp.setContentType("application/json;charset=utf-8"); 前端Ajax拿到的本身就是一个JSON对象（是浏览器自动进行了转换）。
• 否则
  • 我们自己将JSON字符串转换为JSON对象（JSON.parse(data)）来使用
  • 调用ajax方法时，传递 type= json 字符串 (比如： $.get(xxx,xxx,“json”)) ，浏览器也会自动转换JSON字符串为JSON对象。

4、服务器简化JSON字符串的返回

在Java领域中，有大量的第三方的库可以进行JSON的处理。比如： Jackson 库、 GSON 库 、 fastJSON库…

以fastJSON为例说明：

官网：https://github.com/alibaba/fastjson

fastjson-1.2.73.jar