第十九章 Ajax

1. Ajax简介

        Ajax是进行网站请求的一种技术，属于js的内容，被jQuery发展；Ajax：异步JavaScript 和XML，可以在不重载整个网页的情况下，Ajax通过后台加载数据，并在网页上进行显示。

普通的请求方式：

        浏览器发出请求，经过servlet处理后再通过转发或者重定向的方式返回个客户端，客户端需要重新加载/重新渲染页面；

Ajax的方式：

        浏览器通过XmlHttpRequest对象发起请求，servlet只需要返回数据内容，不需要返回html页面，客户端通过Ajax对象接收返回的数据，通过js将数据显示到页面上，整个网页不需要重新加载。

异步：

        客户端发出请求之后可以继续其他的操作，不需要等待服务器响应；

同步：

        客户端发出请求之后必须等服务器响应之后才能继续操作。 

2. Ajax和普通请求的区别

普通请求：

      ①地址栏通过url发送普通请求；

      ②通过超链接发送普通请求；

      ③通过表单提交普通请求；

普通请求的响应内容：

        服务器返回的是完整的html页面，所以浏览器需要重新加载整个页面，页面会刷新；

普通请求是同步处理方式，一个时间点，只能做一个处理。

Ajax请求(异步请求):

        发送方式：

                通过js对象XmlHttpRequest对象发起Ajax异步请求，可以发送post/get请求；

        请求的响应内容:

                浏览器对Ajax请求只需要返回数据内容，不需要返回html页面，客户端通过Ajax对象接收服务器返回的数据，用js的方式，将数据呈现到页面上；

        Ajax请求是异步处理方式，同一时间段内，可以作多个处理；

        Ajax请求是页面局部刷新。

    var xhr;
    function getTime(){
      //创建Ajax对象
      xhr = new XMLHttpRequest();
      //设置状态变化的回调函数
      xhr.onreadystatechange = function (){
        if(xhr.readyState==4&&xhr.status == 200){
          var myDiv = document.getElementById("mydiv")
          myDiv.innerHTML = xhr.responseText;
        }
      }
      //设置发送方式和请求地址 URL
      xhr.open("GET","${pageContext.request.contextPath}/AjaxServlet");
      //发送请求
      xhr.send();
    }

readyState的取值

取值	说明
0	未初始化状态，此时创建了XMLHttpRequest对象但没有初始化
1	准备发送状态，此时已经调用了XmlHttpRequest对象的open()方法，已经准备好将Http请求发送到服务器端
2	已经发送状态，已经通过XmlHttpRequest对象的send()方法将请求发送到服务器端，但是没有收到响应
3	正在接收状态，此时已经接收到Http响应的头部信息，但是消息体部分还没有完全接收到
4	完全响应状态，此时已经完成了HttpResponse响应的接收

 3. JSON

3.1 JSON学习回顾

         json是一种数据交换格式，采用  键值对  的文本格式来存储和表示数据，在系统交换数据的过程中常常被使用，是一种理想的数据交换语言。

//js对象:
    var stu = {
            name : "张三",
            sex  : "男",
            id   : 1001     
        }
//json对象
    var stu = {
            "name" : "张三",
            "sex"  : "男",
            "id"   : 1001     
        }

//Json对象的字符串
var stu2 = '{"name":"张三","sex":"男"}';

//json字符串转为json对象
var stu3 = JSON.parse(stu2);

//json对象转json字符串
var str = JSON.stringify(stu3)

3.2 Java中JSON转换工具

        fastjson,GSON,jackson，导入相应的jar包。

        Map map = new HashMap();
        map.put("id",1000);
        map.put("name","张三");
        map.put("sex","男");

        System.out.println(map);
        //Json字符串
        System.out.println(JSONObject.toJSONString(map));
        //json对象
        JSONObject jsonArray = new JSONObject(map);
        System.out.println(jsonArray.get("id"));

4. JQuery中Ajax的使用

4.1 $.get()

      $("#btn1").click(function (){
        $.get(
          "${pageContext.request.contextPath}/AjaxServlet",
                {name:"张三",sex:"男"},
                function (res) {
                  console.log(res);
                  var str = "姓名:"+res.name+" 性别:"+res.sex+" 学号:"+res.id;
                  $("#mydiv").append("<p>"+str+"</p>");
                },
                "json"
        );
      })

 4.2 $.post()

$("#btn2").click(function (){
        $.post(
                "${pageContext.request.contextPath}/AjaxServlet",
                {name:"张三",sex:"男"},
                function (res) {
                  console.log(res);
                  var str = "姓名:"+res.name+" 性别:"+res.sex+" 学号:"+res.id;
                  $("#mydiv").append("<p>"+str+"</p>");
                },
                "json"
        );
      })

4.3 $.ajax()

$("#btn3").click(function (){
        $.ajax({
          url:"${pageContext.request.contextPath}/AjaxServlet",
          data:{},
          type:"post",
          dataType:"json",
          success:function (res){
            var str = "姓名:"+res.name+" 性别:"+res.sex+" 学号:"+res.id;
            $("#mydiv").append("<p>1"+str+"</p>")
          },
          error:function (xhr,msg) {
            alert(msg);
            console.log(xhr)
          }
        })
      })