Ajax、json学习笔记

本学习笔记参考传智播客冯威老师的Ajax视频记录。

一、Ajax

  (1)  同步和异步

            同步: 发送方发送数据后，等待接收方返回响应后才发下一个数据包的方式。

            异步: 发送方发送数据后，不等待接收方返回响应，接着发送下个数据包的方式。

  (2)  什么是Ajax

         Ajax被认为是(AsynchronousJavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

        即一种不用刷新整个页面便可以与服务器通讯的办法。

        

 (3) Ajax一些案例

      1)  google suggest

           

    2) goole Maps

        

 (4) Ajax原理

       1） 核心对象  XmlHttpRequest

        该对象在InternetExplorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

     AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。

     用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。

     AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

    使用AJAX，可以为JSP、开发人员、终端用户带来可见的便捷。

 (5)Ajax包含的技术

    AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

  •服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。

  •XML (eXtensible Markup Language，可扩展标记语言)是一种描述数据的格式。AJAX程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML是其中的一种选择

  •XHTML（eXtended Hypertext Markup Language,使用扩展超媒体标记语言）和 CSS（Cascading Style Sheet,级联样式单）标准化呈现；

  •DOM（Document Object Model,文档对象模型）实现动态显示和交互；

  •使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取

  •使用JavaScript绑定和处理所有数据

 

 (6) Ajax 缺陷 

     AJAX不是完美的技术。也存在缺陷：

    1   AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。

     2  AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。

    3   对流媒体的支持没有FLASH、Java Applet好。

    4   一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

 

(7)XMLHttpRequest对象

      XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

     XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准.

     创建XMLHttpRequest对象（由于非标准所以实现方法不统一）

    Internet Explorer把XMLHttpRequest实现为一个ActiveX对象

    其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。

    XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

 

    相关代码参考:

1. 接收文本
2.     <script type="text/javascript">
       var xmlHttp;//Ajax核心对象名称
       var createXMLHttpRequest = function(){
      
            if(window.XMLHttpRequest){
           
                 xmlHttp = new XMLHttpRequest();//非IE内核
            }else{
           
                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE内核
            }
       }
       var showMsgCallback = function(){
      
           if(xmlHttp.readyState == 4){//数据返回完毕
          
              if(xmlHttp.status == 200){//接收返回内容
             
                   var text = xmlHttp.responseText;
                   document.getElementById("msg").innerHTML = text;
              }
           }
       }
       var showMsg = function(){
      
           createXMLHttpRequest();
           xmlHttp.open("POST","content.html");
           //设置请求完成之后的处理回调函数
           xmlHttp.onreadystatechange = showMsgCallback;
           xmlHttp.send(null);//发送请求，不带任何参数
       }
     </script>
3. 接收xml

4. var xmlHttp;
   var createXMLHttp = function() {

    if (window.XMLHttpRequest) {

     xmlHttp = new XMLHttpRequest();
    } else {

     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
   }

   window.onload = function(){
    
     createXMLHttp();
    
     xmlHttp.onreadystatechange = function(){
      
      if(xmlHttp.readyState == 4){
       
       if(xmlHttp.status == 200 || xmlHttp.status == 304){
        
         var xmlDoc = xmlHttp.responseXML;
         //获取省的元素
                    var provinceElements = xmlDoc.getElementsByTagName("province");
                   // alert(provinceElements.length);
                  
                   for(var i = 0;i < provinceElements.length;i ++){
                    
                    var provinceElement = provinceElements[i];
                    
                    var attrname = provinceElement.getAttribute("name");
                    var optionElement = document.createElement("option");
                    optionElement.setAttribute("value",attrname);
                    
                    var textElement = document.createTextNode(attrname);
                    optionElement.appendChild(textElement);
                   /*
                 *   <select id="province" name="province">
                     *   <option value="">请选择</option>
                     *  </select>
               */
                  
                   var p = document.getElementById("province");
                   p.appendChild(optionElement);
                  
                   }
                   /*
                    * <select id="id" name="city">
                     <option value="">请选择......</option>
                      </select>
                  */
                 
   //               获取城市
                  var cityElements =  xmlDoc.getElementsByTagName("city"); 
   //               alert(cityElements.length);
                  for(var j = 0;j < cityElements.length;j ++){
                   
                      var cityElement = cityElements[j];
                      var attrname = cityElement.getAttribute("name");
                      var optionElement = document.createElement("option");
                      optionElement.setAttribute("value",attrname);
                      var textElement = document.createTextNode(attrname);
                      optionElement.appendChild(textElement);
                      var p = document.getElementById("id");
                      p.appendChild(optionElement);
                     
                     
                  }
       }
      }
     }
    
     xmlHttp.open("post","/MyFirstWeb/servlet/XmlFileServlet",true)
     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     xmlHttp.send(null);
    
    
    
   }

          xml文件可以来自数据库，这是我们就可以使用工具将数据库取出的xml数据转换成xml格式的文档。如dom，jdom，dom4j。其中涉及的Servlet类再次省略。其他的方法和属性，可以参考Ajax API文档，再次只上常用的代码。

 

二 json

    1、JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

    2、JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。

   3、规则如下:

      1）映射用冒号（“：”）表示。名称:值

      2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2

      3）映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}

      4） 并列数据的集合（数组）用方括号(“[]”)表示。

        [

          {名称1:值,名称2:值2},

          {名称1:值,名称2:值2}

        ]

      5)元素值可具有的类型：string, number, object, array, true, false, null

 

   4、代码:

            (1) 基本格式写法:

       // 实例一：单个对象
/*     var person = {"name":'张三',"age":'21',"add":'昆明'};
       alert(person.name);
       alert(person.age);
       alert(person.add);
  */    
      
  //  实例二：多个对象，用数组[]，对象之间用逗号隔开，访问时下标从0开始  
  /*
       var person = [
      
                   {"name":'张三',"age":'21',"add":'昆明'},
                   {"name":'李四',"age":'20',"add":'上海'},
                   {"name":'王五',"age":'40',"add":'南京'},
                   {"name":'赵敏',"age":'25',"add":'广州'},
                   {"name":'李亮',"age":'31',"add":'北京'},
       ]
       alert(person[0].add);
       alert(person[2].name);
       alert(person[4].age);
  */
  //实例三：嵌套
  /*
     var person = {  "params":
                    [ 
                      {"name":'张三',"age":'21',"add":'昆明'},
                      {"name":'李四',"age":'20',"add":'上海'},
                      {"name":'王五',"age":'40',"add":'南京'},
                      {"name":'赵敏',"age":'25',"add":'广州'},
                      {"name":'李亮',"age":'31',"add":'北京'},
                    ]
                  }
                 
    alert(person.params[3].add);
  */               
   /*  var person = {  "params1":
                    [ 
                      {"name":'张三',"age":'21',"add":'昆明'},
                      {"name":'李四',"age":'20',"add":'上海'},
                      {"name":'王五',"age":'40',"add":'南京'},
                      {"name":'赵敏',"age":'25',"add":'广州'},
                      {"name":'李亮',"age":'31',"add":'北京'},
                    ],
                    "params2":
                    [ 
                      {"name":'黎明',"age":'24',"add":'昆明'},
                      {"name":'科比',"age":'26',"add":'普洱'},
                      {"name":'韦德',"age":'41',"add":'景洪'},
                      {"name":'李兴',"age":'28',"add":'天津'},
                      {"name":'赵红',"age":'39',"add":'宁波'},
                    ],
                   "params3":
                    [ 
                      {"name":'黄玉',"age":'17',"add":'深圳'},
                      {"name":'李阳',"age":'28',"add":'海口'},
                      {"name":'小红',"age":'31',"add":'北海'},
                      {"name":'小名',"age":'29',"add":'南宁'},
                      {"name":'宝宝',"age":'36',"add":'辽宁'},
                    ]
                  }
                 
              alert(person.params3[2].name);   
     */
    
     //实例四：综合
     var person = {
    
            "name":"张无忌",
            "tel":{
                 "tel":"0879-2156430",
                 "call":"152881xx715"
            },
            "address":[
           
                 {"home":"北京","code":'11124'},
                 {"com":"南京","code":'11125'}
            ]
     }  
    
     alert(person.address[1].com);     
    </script>

 

     (2) json 与  Ajax 

        代码: 

          Html页面:

<script type="text/javascript">
 
   var xmlHttp;
   var createXMLHttp = function() {

    if (window.XMLHttpRequest) {

     xmlHttp = new XMLHttpRequest();
     } else {

     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
    }
     window.onload = function(){
    
          createXMLHttp();
          document.getElementById("ok").onclick = function(){
         
           xmlHttp.onreadystatechange = function(){
          
               if(xmlHttp.readyState == 4){
    
           if(xmlHttp.status == 200 || xmlHttp.status == 304){
        
              var data = xmlHttp.responseText;
             // alert(data);
             
              var dataObj = eval("("+ data +")");//函数eval()会把字符串当做它的参数，然后这个字符串会被javaScript代码来执行。
             // alert(dataObj)
              alert(dataObj.pid +""+dataObj.pname );
              /*
              for(var k = 0;k < dataObj.length;k ++){
             
                    alert(dataObj[k].pid + "\t" + dataObj[k].pname);
              }
              */
           }
          }
      }        
           xmlHttp.open("post","/MyFirstWeb/servlet/JsonServlet?timeStamp="+new Date(),true);
           xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
           xmlHttp.send(null); 
          }
     }
  </script>
  </head>
 
  <body>
    <select id="province" name="privince">
      <option value="">请选择.....</option>
    </select>
    <input type="button" value="提交" name="ok" id="ok"/>
  </body>

          Servlet

           

public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

  request.setCharacterEncoding("UTF-8");
  response.setContentType("text/html;charset=UTF-8");
  PrintWriter out = response.getWriter();
  /*String privence = "[{'pid':1,'pname':'云南省'},{'pid':2,'pname':'四川'},{'pid':3,'pname':'贵州'}]";
  out.print(privence);*/
  
//  在实际开发中，后台数据一般以list集合给出
  /*
  List<Province> list = new ArrayList<Province>();
  Province p1 = new Province(1,"云南省");
  Province p2 = new Province(2,"湖南省");
  Province p3 = new Province(3,"湖北省");
  Province p4 = new Province(4,"江苏省");
  Province p5 = new Province(5,"河南省");
  list.add(p1);
  list.add(p2);
  list.add(p3);
  list.add(p4);
  list.add(p5);
  
  JsonConfig config = new JsonConfig();//屏蔽某些字段，比如，屏蔽pid
  config.setExcludes(new String []{"pid"});
  
  JSONArray jsonarray = JSONArray.fromObject(list,config);
  out.print(jsonarray.toString());
  */
//一个对象转化为json格式
  
  Province p6 = new Province(7,"海南");
  
  JSONObject jsonobj = JSONObject.fromObject(p6);
  out.print(jsonobj.toString());
  
 }