ajax+jquery+JSON笔记

ajax (asynchronous javascript and xml -- 基于javascript和xml的异同步通讯技术)
    特征： 异步通讯  异步的请求-响应模式
    
 1.传统的web模式：同步的请求-响应模式
    1) 客户端浏览器通过当前页面的表单，向服务器发送请求；
        发送请求之后，当web服务器反馈新的页面到达时，浏览器废弃当前页面；
    2) 这导致客户端在等待响应页面到来之前将不能进行下一步操作，这种等待服务响应到来之后，
        客户端才能执行进一步操作的请求-响应模式,是同步的请求-响应模式

2.ajax模式:异步请求-响应模式
    1) 什么是ajax?
       asynchronous javascript and xml的首字母提取,形成了ajax：基于javascript和xml的异步通讯技术.

2) ajax对象
        是利用XMLHttpRequest构造函数创建的javascript对象。
        ① 现代浏览器都会定义一个名称为XMLHttpRequest的function,并允许用户利用这个function创建对象.
            该对象可以向web服务器单独发送请求,并实施响应处理.因此XMLHttpRequest类型的对象
            又叫ajax对象或称为xhr对象.
        ② ajax对象与服务器交互时,使用的还是http协议.通讯数据可以是:
            普通文本数据、xml格式数据 或 json格式的数据。

3.异步请求-响应模式的特点：
    1) html页面可以通过ajax对象,单独完成和web服务器的通讯工作，同时自身与服务器的通讯能力仍然保持。
    2) 依靠ajax对象和web服务器通讯，不必废弃当前页面，
        ajax对象获得服务器的响应之后，可以对当前页面实施局部更新。
 
#tips:  
  ① 传统的servlet jsp是同步的请求-响应模式；而ajax是异步的请求响应模式。
  ② 先有同步请求响应模式 后有异步请求响应模式。
  ③ 当请求到达tomcat时 服务器会给每个请求开一个线程。
  ④ javascript执行单位是函数，java执行单位是类和对象
  ⑤ 事件
     onclick: 点击触发;
     onblur : 失去焦点时触发 -- 光标离开文本框;
  ⑥ <span>在span后面开辟一片区域</span>
 
 4.同步的请求响应模式：
    1> 表单提交
    2> 超链接
    3> 地址栏输入
   同步请求响应模式的弊端：      
    只要服务器的反馈 没有到达浏览器 ，浏览器就停止在提交页面静止不动。
    不做特殊处理情况下(请求转发优化处理) 当响应到达浏览器，浏览器会呈现一个新的页面来加载反馈信息。
    需要等待响应信息到达之后才可以进行下一步。
    用户体验度不高，等待服务器反馈回路的信息到达浏览器，才能进入下一步。
   
 5.异步请求响应模式：
      优点:不需要等待服务器响应到达就可以进行下一步。
 
 
 6.ajax对象
    1> ajax对象不是java对象，是javascript对象
    2> 通过构造函数XMLHttpRequest()创建XMLHttpRequest对象，也就是ajax对象。
        XMLHttpRequest是已经定义了的 内置的构造函数
        XMLHttpRequest 是javascript的内置函数，用来创建对象 ，
        XMLHttpRequest 功能函数 一般浏览器都会提供该构造方法
        如果浏览器很老 譬如ie6之前的浏览器 可以通过借助操作平台，调用windows提供的方法ActiveXObject()来创建ajax构造
     
  7.ajax对象包含的方法
    1>建立连接方法
       open("请求方式", "请求地址"+value, true);
          ① 参数一：请求方式 get/post
          ② 参数二：请求地址，如果是get请求方式传参需要在后面再加一个参数值 例："path?username="+uservalue，明码提交。
                              如果是post请求就不需要。私密提交。
                                post请求步骤：
                                    ①> 设置请求报头，向服务器汇报所提交的是普通文本字符串还是文件。
                                        ajaxObj.setRequestHeader("Content-Type", "...");
                                               <①>文本字符串:application/x-www-form-urlencoded
                                               <②>文件:multipart/form-data
                                    ②> send(参数);
                                        ajaxObj.send("username="+uservalue);
          ③ 参数三：true 表示是异步请求响应模式；
                    false表示不是异步请求响应模式。
        该方法的作用是：通过ajax对象建立和web服务器的连接并准备请求(ajax会单起一个线程)
                        可以在浏览器中单起一个链接 对服务器发起一个新的线程请求，
    2>发送请求方法
       send();
          ① 如果是get请求 ：send(null);
          ② 如果是post请求 ：send(参数);
       
    3>当服务器给浏览器反馈响应时，由ajax对象接收反馈
    
        
  8.ajax的属性
    1> status属性 ： 服务器反馈回来的响应头信息，是反馈回的状态码; (正常状态码200 异常时500)
    2> responseText属性 ：服务器反馈回来的响应信息，具体的响应数据结果，存储反馈回来的信息的属性;
    3> readyState属性 ：就绪状态
        readyState属性是ajax对象的就绪状态.在ajax对象的生命周期中,ajax对象的就绪状态有5种情形:
         ① readyState=0,表示ajax对象刚刚诞生但还未初始化,还没有建立连接;
         ② readyState=1,表示ajax对象与web服务器建立了连接;
         ③ readyState=2,表示请求发送之后接收到响应数据(接收了整个完整的响应信息,status属性已经得到设置);
         ④ readyState=3,表示ajax对象开始解析响应数据(表明ajax对象开始把指针指向响应正文,还没有解析完数据);
         ⑤ readyState=4,表示ajax对象解析响应数据完毕! (此时就可以对ajax进行下一步操作)
            (当ajax就绪状态readyState的数值发生改变时,就说是发生了一个事件，就可以执行其绑定的函数)
      
  9.ajax的事件
      1> onreadystatechange
          该事件发生时，它所绑定的方法会执行。
          当ajax对象的就绪状态(readyState)发生变化时,表明readystatechange事件发生,会触发匿名函数的执行;

10.Ajax对象即能提交异步请求和又能实施响应处理:
      1)Ajax对象可以在一个独立的线程中,单独和web服
        务器建立连接,并发送请求;
      2)ajax对象利用自己的属性存储响应结果,通过
        javascript编程处理响应结果,并针对当前页面实施
        局部更新.
   
  ---------------------------------------------------------------------------------------------------------------------------------
 
  #在javascript中创建对象的方法示例
     //创建构造函数，通过构造函数可以创建一个对象，然后可以调用其属性及方法
        <script type="text/javascript">    
         //定义一个构造函数    为了创建js的对象
         function Person(name, age){
             this.name = name;
             this.age = age;  //定义javascript的属性
             this.show = function(){ //定义javascript的方法， 变量引用函数的首地址 就可以用show代表该方法
                 alert(this.name + "\t" + this.age);
             }
         }
         //定义功能函数
         function fn(){
             //创建js对象  js对象的属性不分公有私有，都是私有
             var person = new Person("wangda",18); //调用上方定义的构造函数
             //输出属性
             alert(person.name + "\t" + person.age);
             //调用方法
             person.show();
         }
     </script>
     
 -----------------------------------------------------------------------------------------------------------------    
  #ajax对象的获得示例   
 
   <script type="text/javascript">    
        //创建ajax对象
         function getXMLHttpRequest(){
             var xhr;
             if(typeof XMLHttpRequest != "undefined"){  // 表明浏览器中定义了XMLHttpRequest构造函数
                 //创建ajax对象
                 xhr = new XMLHttpRequest();
             }else{
                 //如果当前浏览器没有定义 创建ajax对象的构造函数 就借助于windows平台
                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }
             return xhr;
         }
         
         //测试函数
         function fn(){
             var ajaxObj = getXMLHttpRequest();
             alert(ajaxObj);  // [object XMLHttpRequest] javascript对对象的表现[object 对象类型]
         }    
     </script>  
     
 ----------------------------------------------------------------------------------------------------------------    
  #ajax对象创建以及使用方法示例
 
  <script type="text/javascript">
         //创建ajax对象
         function getXMLHttpRequest(){
             var xhr;
             if(typeof XMLHttpRequest != "undefined"){  // 表明浏览器中定义了XMLHttpRequest构造函数
                 //创建ajax对象
                 xhr = new XMLHttpRequest();
             }else{
                 //如果当前浏览器没有定义 创建ajax对象的构造函数 就借助于windows平台
                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }
             return xhr;
         }
         
         //创建失去焦点函数， 失去焦点时执行的函数
         function check_username(){
             // 第一步： 获得ajax对象(创建了ajax对象)
             var ajaxObj = getXMLHttpRequest();
             // 第二步：通过ajax对象建立和web服务器的连接并准备请求(ajax会单起一个线程)
             //获得用户名表单项的dom对象
             var unameObj = document.getElementById("uname");
             var unameValue = unameObj.value;
             ajaxObj.open("get", "servlet/ActionServlet?username="+unameValue, true);
             // 第三步： 发送请求
             ajaxObj.send(null);
             
             // 第四步：实施响应数据的处理
             var spanObj = document.getElementById("unameMsg");// 当想把一个标签变成对象时，给它一个id，然后通过该语句将其封装为对象
             ajaxObj.onreadystatechange = function(){  //给onreadystatechange事件绑定匿名函数
                 alert("readyState= "+ajaxObj.readyState+"\n"+  
                         "status= "+ajaxObj.status+"\n"+
                         "responseText= "+ajaxObj.responseText);
                                 
                 if(ajaxObj.readyState == 4){
                     if(ajaxObj.status == 200){
                         spanObj.innerHTML = ajaxObj.responseText; //spanObj.innnerHTML代表span标签体 ，动态显示span标签内容                       
                    }else{
                         spanObj.innerHTML = "服务器端异常...";
                     }
                 }else{
                     spanObj.innerHTML = "ajax对象正在处理响应数据...";
                 }
                 
             }
         }
     
     </script>
     
 -----------------------------------------------------------------------------------------    
 # 动态生成下拉框    
 function change(v){
          alert("1");
          // 1>创建ajax对象
          var xhr = getXMLHttpRequest();
          // 2>建立连接
          xhr.open("post", "SelectCity.do", true);
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          // 3>发送请求
          xhr.send("selectname=" + v);
          
          // 4>处理响应数据
          xhr.onreadystatechange = function(){
              alert("1");
              var errorMsgObj = document.getElementById("errorMsg");
              errorMsgObj.innerHTML="";//清空原有列表
              if(xhr.readyState == 4){
                  if(xhr.status == 200){
                      var txt = xhr.responseText;
                      var jsObj = JSON.parse(txt);
                      var s2Obj = document.getElementById("s2");
                      s2Obj.innerHTML = "";//清空原有列表项
                      for(var index in jsObj){
                          var op = new Option(jsObj[index].cityName, jsObj[index].cityValue);
                          s2Obj.options[index] = op;
                      }
                      
                  }else{
                      errorMsgObj.innerHTML="服务器错误";
                  }
              }else{
                  errorMsgObj.innerHTML="正在读取数据。。。";
              }
          }
      }
      
 -------------------------------------------------------------------------------
servlet通配符配置   
   '*.do'  
    ' /* '

requestURI : /项目名/资源名
URL        : http://localhost:8888/项目名/资源名

ajax应用功能：
页面的局部刷新，ajax功能的校验
 
     
jpg格式图片 可伸缩    
    
    
 jQuery
    jQuery框架是javascript技术的封装，js的框架之一。
       其他的部分的框架:
           1>客户对页面有特殊要求使用ExtJS框架(专业的重型的)。
           2>dojo框架
           3>prototype框架(轻型)
   
    1.jQuery框架原理：
        #利用css选择器，通过选择器定位到具体位置，将该位置dom对象封装成jquery对象
      1) 将DOM对象封装为jQuery对象。存到自己内部的Array数组中。
            封装：
            $("参数")  -- 代表jquery对象
                html标签->dom对象->$对象
                var domObj = document.getElementById("#id");
                var $Obj = $(domObj);  // $的核心函数
            如何封装：
                
      
    2.jQuery函数
        1> 核心函数：       
            $(function(){
                
            });        
                jQuery("选择器");  --别名： $("选择器");     （别名：jQuery = $）            
    
    3.jQuery的方法
        1> get();
            取得其中一个匹配的元素。 num表示取得第几个匹配的元素。这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。
        2> html();
            无参html()，输出标签体的内容。
            有参html(参数)，用参数内容替换标签体内容。
        3> text();
            只输出文本，不输出标签(忽略标签)   
        
        设置样式：
        4> css();
           设置样式方法。专门添加style样式(行样式)。
           设置符合样式时使用JSON格式。
            例：$("#id").css("font-size", "20px");
        5> attr(参数);
            属性方法。
            ① 显示属性值，
            ② 对元素动态的添加新的属性。
        6> addClass(参数);
            动态的添加属性。
        7> removeClass();
            动态的删除属性。
        8> toggleClass(参数);
            切换样式方法。第一次点击添加样式，第二次点击删除。
        9> boolean | hasClass(参数);
            判断是否有该样式属性
        
        1> $ | children();
            获得一组子元素封装成一个$对象
        2> next();
             紧邻的下一个元素。
        3> siblings();
             同级别元素，兄弟姐妹。
        4> find(参数);
             元素查找。
            
        1> append();
             内部追加，添加到后面。参数可以是jQuery对象也可以是html标签
        2> prepend();
             内部添加，前加。
        3> after();
             元素外部添加，在元素之后添加。
        4> before();
             元素外部添加，在元素之前添加。
       
 
        $参数是多变的： dom对象 标签元素 标签选择器。。。。。    
      
    4.jQuery的事件方法
   
    5.jQuery框架的执行结构(*****):
        $(function(){
           
        });
        
        jquery不使用事件触发机制，定义了事件方法。事件方法是必须有事件发生才执行。
        匿名函数或者命名函数作为事件方法的参数。
        事件方法的参数是函数：
          ① 匿名函数，需要传整个函数，包括函数主体。
          ② 命名函数，将函数名传递进去。
               
        1>ready()方法是jquery的执行结构。
                ready事件方法: （代替了onload事件，当浏览器加载完html页面后自动执行）
                    $(document).ready(function(){
                        .....
                    });
                    
                ready()方法的简化方法：
                    $(function(){
                        .....
                    });
        
        2>jquery事件执行方法示例:
            // jquery执行结构，当浏览器加载完html页面后自动执行
            $(function(){
                
               $().click(function(){
                // click事件方法代码，当click事件发生执行
                    ....                
               });
               
            });
        
       #tips:
           //第一次点击执行第一个匿名函数，第二次点击执行第二个匿名函数。
           $("a").toggle(function(){...}, function(){...});   
    
    
    优势：代码和标签分离。
 
 
   6.对无序列表的操作：
        效果：     
        1> empty();
            把标签体置空。
        2> remove();
            把标签删除。
        3>  mouseover: 鼠标覆盖  mouseout:鼠标离开

$(function(){
                 $("ul li").mouseover(function(){  //父子选择器 这样指每一个<li>列表; mouseover: 鼠标覆盖事件
                     $(this).addClass("")          // this是当前dom对象; addClass添加类选择器
                 })                    
              });  
            
          
   7.无序列表的遍历
        （只有each方法有index参数）
        $obj.each(function(index){
            if(index == 0){
                //this指当前dom对象
                $(this).next().val();
            }
        });
    
    #tips：
      ① $("input:text:eq(0)").val()   
          解释:下标是0; 类型是text的元素,input也可以不写; .val()获得用户输入值  
      ② $(":text")    
          解释：类型是text的所有元素封装成的jquery对象
    
    自动填写表单
         $("需要填写的dom").val("需要填写的字符");
         例： $(":text").val("name");
    获取列表项的值
         $(":text").val();
    
 
      2)自定义的动画效果
           $().animate(运动的终点位置 终点坐标是JSON格式, 用时数值);
                eg: $().animate({}, 3000);  // 设置position:relative;之后 指：相对于初始位置
                    $().animate();
    
    
    8.简化ajax技术(*****)  （jquery函数可以直接用，方法必须需要别人来调用它）
      1)核心函数：$.ajax()         （其他函数方法最终底层调用该核心方法）     
        1>  XMLHttpRequest | jQuery.ajax([options]);
            options代表选项对象,是设置具体请求和响应的参数,用json格式定义。
          
            
      2)函数：$.get()
        1>  XMLHttpRequest | jQuery.get(url, [data], [callback], [type]);    
            ① url:请求地址
            ② data:请求参数
            ③ callback:回调,即响应到达才会调用该方法。
            ④ type:返回响应的类型
                url,[data],[callback],[type]  : String,Map,Function,String
      
      3)函数：$.post()
        1>  XMLHttpRequest | jQuery.post(url, [data], [callback], [type]);
            参数 同上。
      
      4)方法：load()   jQuery对象的load方法
         1> jQuery | load(url, [data], [callback]);
             ① url:请求地址
             ② data:请求参数,发送至服务器的 key/value 数据。在jQuery 1.3 中也可以接受一个字符串了。
             ③ callback:载入成功时回调函数。回调,即响应到达才会调用该方法。
             load方法要求的返回响应的类型是普通文本。
                url, [data], [callback] :   String,Map/String,Callback
    
   
    
   # tips:  
      ①dom、java、jQuery区别：
         dom对象可以直接使用属性。s.name;
         java从来不使用属性，通过调用方法。s.getName();
         jQuery对象也是通过使用方法。jQuery对象更加接近java对象。
      ② css 三大选择器：
            1>id选择器： #id
            2>类选择器： .class
            3>元素选择器 （*代表页面的所有元素）
            >复合选择器 (三大选择器组合使用)
      ③ xml标签体包含空白
      ④ <b></b>加重加粗标签
      ⑤ #u1 li:eq(1)  :  父子选择器 #u1标签下的下标为1的<li>标签
            <ul id="u1">
                <li></li>          ：下标为0
                <li></li>          ：下标为1
            </ul>
      ⑥ css样式属性：
        display:none;  css样式属性，初始时不显示    
        opacity:0.2;   不透明度,1/5不透明,4/5透明
        position:relative;  相对定位,即以后可能会运动，以后的运动相对于初始的位置。如果该元素有子元素，子元素的位置是相对于该元素
      
      
jQuery的重点：      
 1>jQuery的四个核心方法
 2>动画效果
 3>执行结构
 4>选择器

JSON
  定义javabean对象的作用是封装数据,定义了一个数据传输的规范。
JSON对象定义格式：{"属性名称":属性值, "属性名称":属性值, "属性名称":属性值}

1 JSON对象的类型：
    1> 单个对象
        {"属性名称":属性值, "属性名称":属性值, "属性名称":属性值}
    2> 数组对象(集合对象)
        格式： [{}, {}, {}]
            [{"属性名称":属性值, "属性名称":属性值, "属性名称":属性值},
             {"属性名称":属性值, "属性名称":属性值, "属性名称":属性值},
             {"属性名称":属性值, "属性名称":属性值, "属性名称":属性值}]
             
        2 http协议下
           1)在服务器端：
               1>获得大量复杂数据，封装到一组java对象中。
               2>把一组java对象转化成JSON对象是的字符串格式，发给浏览器。
                  即: 一组java对象 --> JSON对象
           2)在浏览器端：
               1>把JSON字符串对象首先转成javascript对象
                 即:   JSON对象    --> JavaScript对象
                 
    3. 一组java对象 --> JSON对象 第三方工具类
        1>  针对单个对象(class JSONObject)             
        2>  针对一组对象(class JSONArray)
        
    4 JSON对象--> JavaScript对象    
        JSON.parse(json格式字符串);    --  新浏览器
    
    js调试工具插件：firebug

-------------------------------------------------------------------------------------------------------

#  java对象 --> JSON对象

// 1> 单个java对象的JSON格式
    private static void singleObjectTran() {
        // ①定义一个选项对象
        Option op = new Option("海淀", "hd");
        // ②转换
        JSONObject jsonObj = JSONObject.fromObject(op);
        // ③输出
        System.out.println(jsonObj.toString()); // {"cityName":"海淀","cityValue":"hd"}
    }

// 2> 一组java对象的JSON格式
    private static void arrayObjectTran() {
        // ①定义一组选项对象
        Option op1 = new Option("海淀","hd");
        Option op2 = new Option("东城","dc");
        Option op3 = new Option("西城","xc");
        // ②添加到list集合中
        List<Option> olist = new ArrayList<Option>();
        olist.add(op1);
        olist.add(op2);
        olist.add(op3);
        // ③转换
        JSONArray jsonArray = JSONArray.fromObject(olist);
        // ④输出
        System.out.println(jsonArray.toString());    
 -------------------------------------------------------------------------------------------------------  
    
 #   JSON对象--> JavaScript对象
    
     <script type="text/javascript">
        function fn1(){
            var str='{"cityName":"岳阳", "cityValue":"yy", "cityAge":800}';
            //转换: 单个对象的json格式字符串  --> javascript对象  
            var jsObj = JSON.parse(str);
            
            alert(jsObj.cityName+"--"+jsObj.cityValue+"--"+jsObj.cityAge);
        
        }
        
         function fn2(){
            var str2='[{"cityName":"海淀", "cityValue":"hd"}, {"cityName":"东城", "cityValue":"dc"}, {"cityName":"西城", "cityValue":"xc"}]';
            //转换：一组对象的json格式字符串  --> javascript对象（数组对象）
            var jsObj2 = JSON.parse(str2);
            alert("jsObj2 is Array? " + (jsObj2 instanceof Array));   //true
            
            // 动态生成下拉框
            var selectObj = document.getElementById("select");
            selectObj.innerHTML = "";
            for(var index in jsObj2){ //for循环的增强结构
                //alert(jsObj2[index].cityName +"--"+jsObj2[index].cityValue);
                
                //形成下拉框选项
                var op = new Option(jsObj2[index].cityName, jsObj2[index].cityValue);
                // 把下拉框选项添加到下拉框中
                selectObj.options[index] = op;
            }
        }
    </script>   
--------------------------------------------------------------------------------------------------
Q；web服务器给浏览器发送数据？
    首选：JSON
    次选：XML   、
    
--------------------------------------------------------------------------------------------------
异步jquery<例>：

$.ajax({
            type: "POST",          //请求方式
            async:true,            // 异步
            cache:false,            //缓存
            url: basePath + 'pc/queryOutTimeCount.do',        //请求地址
            dataType : "json",                    //数据类型
            success:function(data){            //如果请求成功响应，得到返回的数据，data封装queryOutTimeCount.do return的数据 <此处为int>
                if(data != 0){
                    $("#pcExprieControl").html("");
                    $("#pcExprieControl").html("存在"+data+"个已过期主机，请及时处理！");
                    $("#pcExprieControl").show();
                }else{
                    $("pcExprieControl").hide();
                }
            },
            error : function(xhr, status, errMsg) {
                com.message("error","主机监控失败！");                    
            }
        });