JavaWeb学习笔记-Ajax异步请求

1.什么是Ajax?

传统请求: 基于超级链接 地址栏 form表单 地址栏 location.href 发起的请求全部是传统请求

​ 特点: 请求之后,刷新整张页面，需要服务器响应完毕客户端才可以继续运行
缺点: 由于刷新了整张页面,用户操作被中断,造成大量网络流量的极大浪费。

异步请求: 基于ajax发起的请求都是异步请求

特点: 多个请求并行发生,请求之间互不影响,请求之后页面不动,刷新页面的局部，无需服务器响应客户端继续运行

2.基于原生JS的Ajax请求（不常用）

<script>
     function Ajax() {
       var xmlHttpRequest=new XMLHttpRequest(); //Ajax内置对象
         //第一个参数是提交方式，第二个url地址，第三个true为异步false为同步
        xmlHttpRequest.open("GET","http://localhost:8888/test_war_exploded/hello",true);

        xmlHttpRequest.send();//发送异步请求
         /*当readystate改变时触发事件
            属性readystate
            readystate=0时 表示请求未初始化
            readystate=1时 表示服务器已连接
            readystate=2时 表示请求已接收
            readystate=3时 表示请求处理中
            readystate=4时 表示请求处理完成，且响应就绪
            属性status
            status=200时 表示ok
            status=404时 表示未找到页面
          */

        xmlHttpRequest.onreadystatechange=function () {
             if (xmlHttpRequest.readyState==4 &&xmlHttpRequest.status==200)
             {
                 document.getElementById("div").innerHTML=xmlHttpRequest.responseText;
             }
        }
     }
 </script>

3. Jquery封装Ajax

<script>
      $(function () {

       $("#btn").click(function () {
             $.ajax({
                 url:"http://localhost:8888/test_war_exploded/hello", 
                 type:"GET", //提交类型 GET 或 POST
                 dataType:"json", //返回的的数据类型 text ,xml, json
                 //后端返回的数据需要符合datatype格式，否则回调函数不执行
                 success:function (data) {
                     $("#div").html(data.name+" "+data.age+" "+data.balance);

                 }
             })


       });
      });
 </script>

Jquery也提供了对GET和POST异步请求的封装

 /*
              第一个参数url，第二个参数发送的数据（可省略），第三个参数回调函数（回调函数只有服务器有响应的时候才会调用），第四个返回类型
              */
               $.get("http://localhost:8888/test_war_exploded/hello",function (data) {
                   $("#div").html(data.name+" "+data.age);
               },"json");
          });

同理还有$.JSON()方法

4.serialize序列化

$("#form").serialize()

Servlet

 System.out.println(request.getParameter("user"));
 System.out.println(request.getParameter("password"));

序列化数据存储格式为 user=value&password=value