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){ //服务器返回的数据
        }
    })
   //前后台交互
 

   用户名：
    
    

    
    ===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:"[email protected]"}
     var obj2={"username":"李四",email:"[email protected]"}
     var arr=[obj1,obj2]
     //json表述
     var users={"user":[{"username":"张三",email:"[email protected]"},{"username":"李四",email:"[email protected]"}],
                "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);
      //演示 
   

 用户名：
                

                
                
                

                
    

@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  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);
             
             
        }     

    

    用户名：
        

        
        
        

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