Ajax异步交互

1.ajax技术
    Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
        Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
        Ajax 是一种用于创建快速动态网页的技术。
        Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
        
    jquery 导包  jquery0.0.min.js
    $.ajax({
        url:"",
        type:"get",
        data:"向服务器发送的数据",
        dataType:"服务器返回数据的数据类型",
        success:function(data){ //服务器返回的数据
        }
    })
   //前后台交互
 

   用户名：<input type="text" id="txt" name="xxx">
    <script src="js/jquery-3.2.1.js"></script>
    <script>
      $("#txt").blur(function(){
          $.ajax({
              url:"TestServlet",
              type:"get",
              data:{"uname":$("#txt").val()},
              success:function(recvdata){
                  alert(recvdata)
              }
          })
      })
    </script>

    
    ===TestServlet
    
 

   @WebServlet("/TestServlet")
        public class TestServlet extends HttpServlet {
            private static final long serialVersionUID = 1L;
               
           
            protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                //1.接收前台传来的参数
                String uanem=request.getParameter("uname");
                //2.服务器返回信息
                response.setContentType("text/html;charset=utf-8");
                PrintWriter out=response.getWriter();
                out.println(uanem+"我是服务器发来的信息！OK");//此处一定要用print(),不能用println()
            }
    

2.JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
    它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
    简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
    易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
    
    是js中对象和数组的组成的数据结构
     
     var obj1={"username":"张三",email:"zhang@qq.com"}
     var obj2={"username":"李四",email:"li@qq.com"}
     var arr=[obj1,obj2]
     //json表述
     var users={"user":[{"username":"张三",email:"zhang@qq.com"},{"username":"李四",email:"li@qq.com"}],
                "manger":[]}
    //省市区县村
    var addr={
        "省":["黑龙江省","吉林省","辽宁省".......],
        "市":[{"黑龙江省":["哈尔滨",'牡丹江'...]},{"吉林省":[市，，，，]]},]
        "区":.....
    }
    
    ==前后台交互对象
    （因为客户端可以解析json，所以服务器返回对象必须转成json才能正常显示）
    可以借助json jar包进行处理
     1）导包
        commons-beanutils-1.8.2.jar
        commons-collections-3.2.1.jar
        commons-lang-2.5.jar
        commons-logging-1.1.1.jar
        ezmorph-1.0.6.jar
        json-lib-2.4-jdk15.jar
    2）将对象转成json格式
       JSONObject jsonObj=JSONObject.fromObject(user);
      //演示 
   

 用户名：<input type="text" id="txt" name="xxx">
                <ul id="userMenu">
                </ul>
                <script src="js/jquery-3.2.1.js"></script>
                <script>
                  $("#txt").blur(function(){
                      $.ajax({
                          url:"TestJsonServlet",
                          cache:false,
                          type:"get",
                          data:{"uname":$("#txt").val()},
                          dataType:"json",
                          success:function(recvdata){
                              $("#userMenu").append("<li>"+recvdata.username+"</li>")
                          }
                      })
                  })
                </script>

                
    

@WebServlet("/TestJsonServlet")
        public class TestJsonServlet extends HttpServlet {

            protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                
                UserInfo user=new UserInfo();
                 user.setUserid(100);
                 user.setUsername("张胜男");
                 user.setPassword("12345");
                 user.setRole("普通会员");
                 
                
                 response.setContentType("text/html;charset=utf-8");
                 JSONObject jsonObj=JSONObject.fromObject(user); //将对象转成Json格式
                 response.getWriter().print(jsonObj.toString());*/
                 
                 //String user="{\"id\":100,\"username\":\"张胜男\",\"password\":\"12345\"}" ;
                 //response.getWriter().print(user); 
            }

    ==前后台交互对象列表
      使用 JSONArray将列表转成json格式
      JSONArray jsonarr=JSONArray.fromObject(list);//将列表转成json格式
    //演示
  

 @WebServlet("/TestJsonServlet2")
    public class TestJsonServlet extends HttpServlet {

        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
             List<UserInfo>  list=new ArrayList();
            
            UserInfo user=new UserInfo();
             user.setUserid(100);
             user.setUsername("张胜男");
             user.setPassword("12345");
             user.setRole("普通会员");
             
             UserInfo user2=new UserInfo();
             user2.setUserid(102);
             user2.setUsername("李四");
             user2.setPassword("12345");
             user2.setRole("VIP");
            
             list.add(user);
             list.add(user2);
             list.add(user);
             
             response.setContentType("text/html;charset=utf-8");
             JSONArray jsonarr=JSONArray.fromObject(list);//将列表转成json格式
             response.getWriter().print(jsonarr);
             
             
        }     

    

    用户名：<input type="text" id="txt" name="xxx">
        <ul id="userMenu">
        </ul>
        <script src="js/jquery-3.2.1.js"></script>
        <script>
          $("#txt").blur(function(){
              $.ajax({
                  url:"TestJsonServlet2",
                  cache:false,
                  type:"get",
                  data:{"uname":$("#txt").val()},
                  dataType:"json",
                  success:function(recvdata){
                     // $("#userMenu").append("<li>"+recvdata.username+"</li>")
                     $.each(recvdata,function(k,user){
                         $("#userMenu").append("<li>"+user.userid+":"+user.username+","+user.role+"</li>")
                     })
                  }
              })
          })
        </script>

3.ajax 的运行原理
//XMLHttpRequest对象 用于前后台数据交换

   

 <input type="text" id="txt">
    <input type="button" id="btn" value="ajax测试">
    <script>
     //点击按钮，异步调用servlet  ---ajax
    var obj=document.getElementById("btn");
    var xmlhttp;
     obj.onclick=function(){
        
        //XMLHttpRequest对象 用于前后台数据交换  浏览器都支持   ie浏览器new ActiveXObject("Microsoft.XMLHTTP")
        if(window.XMLHttpRequest){//非ie
            xmlhttp=new XMLHttpRequest();
        }else{
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //回调函数
        if(xmlhttp){
            xmlhttp.onreadystatechange=f1;//准备  状态改变就会触发函数  1,2,3，4
            //post请求
            //xmlhttp.open("post","TestServlet",true);//异步访问后台servlet
            //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8")
            //xmlhttp.send("uname="+document.getElementById("txt").value)  //如果不需要向服务器发数据
            //get请求
            xmlhttp.open("get","TestServlet"+"?uname="+document.getElementById("txt").value,true);//异步访问后台servlet
            xmlhttp.send(null)
        }else{
            alert("XMLHttpRequest对象不存在")
        }
     }
     
     //回调函数作用：接收服务器的响应信息
     function f1(){
        // alert("状态码"+xmlhttp.readyState)// 1 open()被调用了,2 send()被调用了 未接收到服务器的响应 ,3 响应头部接收到了，4响应信息全部接收到了
         //alert("响应码"+xmlhttp.status)
         if(xmlhttp.readyState==4&&xmlhttp.status==200){
             alert("响应信息："+xmlhttp.responseText)
         }
     }
    </script>