就业班_JavaEE_day21_Ajax_Jquery

一 同步和异步
    同步：需要等待；全局刷新
    异步：不需要等待；局部刷新
二 Ajax  
    异步的javascript and xml  
    js中的XMLHttpRequest  异步请求对象  返回结果现在不采用xml了，而是采用json
三 实现方式
    原生js实现
        XMLHttpRequest对象的创建，不同浏览器创建方式不同，这个不用关注。有固定的js写法。
        XMLHttpRequest对象的属性：
            readyState : 对象的状态 0-4  4 表示异步请求和响应完成
            onreadstatechange: 对象的状态发生改变时，调用的函数。
            status : 响应的状态码 200 404  500
            responseText  ：响应的文本
            responseXML  ： 响应的xml
        XMLHttpRequest对象的方法：
            open(请求的方式，请求路径，是否异步请求true为异步请求)
            send(请求参数)
            setRequestHeader("Content-Type","application/x-www-form-urlencoded")     设置请求头，解决post请求获取不到参数。
    get方式异步请求
          var xmlhttprequest = createXmlHttpRequest();
          xmlhttprequest.onreadystatuschange = function() {
            if(readystatus == 4 && status==200){
                var data = xmlhttprequest.responseText;
            }
          };
          xmlhttprequest.open("get","/day15/AjaxServlet?username=aaa",true); //get请求的参数需要在路径中写上
          xmlhttprequest.send(null); //get请求发送null
    post方式异步请求
          var xmlhttprequest = createXmlHttpRequest();
          xmlhttprequest.onreadystatuschange = function() {
            if(readystatus == 4 && status==200){
                var data = xmlhttprequest.responseText;
            }
          };
          xmlhttprequest.open("post","/day15/AjaxServlet",true); //post请求的参数写在send中
          xmlhttprequest.setRequestHeader();
          xmlhttprequest.send("name=aaa&password=123"); //post请求参数写在send中
    补充知识：
        打开tomcat的资源列表
   
    Jquery实现
        get方式异步请求
        $.get(请求路径，请求参数，回调函数，返回值类型);  
                请求参数以key-value形式 ｛"username":"zhagnshan","password":"1111"｝
                返回值类型 ： 字符串和xml  不写默认是字符串
        post方式异步请求
        $.post(请求路径，请求参数，回调函数，返回值类型);  
                请求参数以key-value形式 ｛"username":"zhagnshan","password":"1111"｝
                返回值类型 ： 字符串和xml  不写默认是字符串
        $("#form1").serialize()  该方法可以将一个form中的表单项封装成请求参数。当请求参数特别多时可以适用。
        
        $.ajax(); 该方式可以灵活定制功能。
        $.ajax({
                     type:"post",
                     url:"${pageContext.request.contextPath}/UserServlet?method=ajax",
                     data:"username="+username,   
                    beforeSend:function(){}, //发送之前执行
                      success:function(data){   //成功执行
                         if(data==1){
                              $("#userspan").html("用户名已存在");
                          }else if(data == 0){
                              $("#userspan").html("用户名可以使用");
                          }
                      }，
                     error:function(){},   //失败执行
                     complete:function(){}   //成功或者失败都执行
                 });
               
    省市联动流程
    先通过请求servlet查询省份数据list，然后转到注册页面。在注册页面对省的下拉框添加change事件。获取省的id通过AJAX的异步获取到城市的数据。并在servlet后台
    通过XStream将list转化为xml的String。  在jsp中对xmlStr进行解析，并添加到城市的select中。
   
四 JSON
     json格式  JavaScript Object Notation
     ｛"username":"zhangshan","password":123｝
     [｛"username":"zhangshan","password":123｝,｛"username":"lisi","password":456｝]
     {
        "city":[{"cid":111,"cname":"xxx"},{"cid":222,"cname":"yyy"}]
     }
    {} 表示对象   []  表示数组  json串从外向里看。
   
    转换JSON的工具
    JSONLIB
    JSONArray     将数组和list转化成json
    JSONObject   将map和object 转换成json
    JsonConfig   可以配置不包含那些属性
   
    $().each(function(i,n){ //jquery遍历集合，第二个参数n表示遍历出来的每个元素，需要注意遍历出来的是原生js对象。
    });
   
    需要注意，当ajax以json格式返回时，post和get要指定第4个参数，数据格式。

就业班_JavaEE_day21_Ajax_Jquery

一 同步和异步
    同步：需要等待；全局刷新
    异步：不需要等待；局部刷新
二 Ajax  
    异步的javascript and xml  
    js中的XMLHttpRequest  异步请求对象  返回结果现在不采用xml了，而是采用json
三 实现方式
    原生js实现
        XMLHttpRequest对象的创建，不同浏览器创建方式不同，这个不用关注。有固定的js写法。
        XMLHttpRequest对象的属性：
            readyState : 对象的状态 0-4  4 表示异步请求和响应完成
            onreadstatechange: 对象的状态发生改变时，调用的函数。
            status : 响应的状态码 200 404  500
            responseText  ：响应的文本
            responseXML  ： 响应的xml
        XMLHttpRequest对象的方法：
            open(请求的方式，请求路径，是否异步请求true为异步请求)
            send(请求参数)
            setRequestHeader("Content-Type","application/x-www-form-urlencoded")     设置请求头，解决post请求获取不到参数。
    get方式异步请求
          var xmlhttprequest = createXmlHttpRequest();
          xmlhttprequest.onreadystatuschange = function() {
            if(readystatus == 4 && status==200){
                var data = xmlhttprequest.responseText;
            }
          };
          xmlhttprequest.open("get","/day15/AjaxServlet?username=aaa",true); //get请求的参数需要在路径中写上
          xmlhttprequest.send(null); //get请求发送null
    post方式异步请求
          var xmlhttprequest = createXmlHttpRequest();
          xmlhttprequest.onreadystatuschange = function() {
            if(readystatus == 4 && status==200){
                var data = xmlhttprequest.responseText;
            }
          };
          xmlhttprequest.open("post","/day15/AjaxServlet",true); //post请求的参数写在send中
          xmlhttprequest.setRequestHeader();
          xmlhttprequest.send("name=aaa&password=123"); //post请求参数写在send中
    补充知识：
        打开tomcat的资源列表
   
    Jquery实现
        get方式异步请求
        $.get(请求路径，请求参数，回调函数，返回值类型);  
                请求参数以key-value形式 ｛"username":"zhagnshan","password":"1111"｝
                返回值类型 ： 字符串和xml  不写默认是字符串
        post方式异步请求
        $.post(请求路径，请求参数，回调函数，返回值类型);  
                请求参数以key-value形式 ｛"username":"zhagnshan","password":"1111"｝
                返回值类型 ： 字符串和xml  不写默认是字符串
        $("#form1").serialize()  该方法可以将一个form中的表单项封装成请求参数。当请求参数特别多时可以适用。
        
        $.ajax(); 该方式可以灵活定制功能。
        $.ajax({
                     type:"post",
                     url:"${pageContext.request.contextPath}/UserServlet?method=ajax",
                     data:"username="+username,   
                    beforeSend:function(){}, //发送之前执行
                      success:function(data){   //成功执行
                         if(data==1){
                              $("#userspan").html("用户名已存在");
                          }else if(data == 0){
                              $("#userspan").html("用户名可以使用");
                          }
                      }，
                     error:function(){},   //失败执行
                     complete:function(){}   //成功或者失败都执行
                 });
               
    省市联动流程
    先通过请求servlet查询省份数据list，然后转到注册页面。在注册页面对省的下拉框添加change事件。获取省的id通过AJAX的异步获取到城市的数据。并在servlet后台
    通过XStream将list转化为xml的String。  在jsp中对xmlStr进行解析，并添加到城市的select中。
   
四 JSON
     json格式  JavaScript Object Notation
     ｛"username":"zhangshan","password":123｝
     [｛"username":"zhangshan","password":123｝,｛"username":"lisi","password":456｝]
     {
        "city":[{"cid":111,"cname":"xxx"},{"cid":222,"cname":"yyy"}]
     }
    {} 表示对象   []  表示数组  json串从外向里看。
   
    转换JSON的工具
    JSONLIB
    JSONArray     将数组和list转化成json
    JSONObject   将map和object 转换成json
    JsonConfig   可以配置不包含那些属性
   
    $().each(function(i,n){ //jquery遍历集合，第二个参数n表示遍历出来的每个元素，需要注意遍历出来的是原生js对象。
    });
   
    需要注意，当ajax以json格式返回时，post和get要指定第4个参数，数据格式。