Ajax

1、什么是 ajax?
      不刷新页面。可以跟服务器通信的方式。
            
2、实现 Ajax 主要方式是  XMLHttpRequest 对象，[了解]

3、Ajax 传输数据的 3 种方式：
    * xml :      笨重，解析困难，但 XML 是通用的数据交换格式。
    * HTML:  不需要解析可以直接放到文档中，适合仅更新一部分区域。
                   不便传输，且 HTML 代码需要拼接完成。
    * JSON： 小巧，有面向对象特征，且有很多第三方的 jar 包
                     可以把 Java 对象或集合转为 JSON 字符串。
           
4、使用 jQuery 完成 Ajax 操作

   *   jQuery 对 Ajax 操作进行了封装,在 jQuery 中
       最底层的方法  $.ajax(),
       第二层是 load(), $.get() 和 $.post(),
       第三层是 $.getScript() 和 $.getJSON();

    *  load 方法：可以用于 HTML 文档的元素节点，把结果直接加为对应节点的子元素。
       通常而言，load 方法加载后的数据是一个 HTML 片段。
      例：
      $(function(){
         $("a").click(function(){
             var url = this.href+" h2 a";//通过选择器只显示选择的部分
             var args = {"time":new Date()};
             $("#details").load(url,args);
             return false;
         });
     });    
    
     <a href="../files/andy.html">andy</a>
     <div id="details"></div>   
    
     // files/andy.html
     <h2><a href="mailto:andy@clearleft.com">Andy.Budd</a></h2>
     <a href="http://andyvudd.com/">http://andybudd.com/</a>    
 

    * $.get,&post,$.getJSON  (更加灵活)
      例：
      $(function(){
              $("a").click(function(){
                  var url =this.href;
                  var args = {"time": new Date()};
                  /*
                       url:    Ajax 请求的目标 URL
                       args: 传递的参数 JSON 格式
                       function:  回调函数：当响应结束时，回调函数被触发，响应结果在 data 中
                   */
                  $.getJSON(url,args,function(data){
                      var name =data.person.name;
                      var email = data.person.email;
                      var website = data.person.website;
                     
                      $("#details").empty()
                      .append("<h2><a href='mailto:"+email+ "'>"+ name +"</a></h2>")
                      .append("<a href='"+website+ "'>"+ website +"</a>");
                  });
                  return false;
              });
          });
         
          <a href="../files/andy2.js">Andy2</a>
         <div id="details"></div>
         
          //andy2.js
          {"person": {
               "name":"Andy Budd",
               "website":"http://andybudd.com/",
               "email":"andy@clearleft.com"
                      }
         }
        
      注：请求 JSON 数据的三种方式
      $.get(url,args,function(data){},"JSON");
      $.post(url,args,function(data){},"JSON");
      $.getJSON(url,args,function(data){});

转载于:https://my.oschina.net/u/3387637/blog/912810