Study JQuery《6、Ajax》

一、基本概念
 Ajax：Asynchronous JavaScript and XML，异步JavaScript和XML。
二、Ajax应用
 1、传统异步
  //XMlHttpRequest
  $("#send").click(function(){
   var xmlHttpReq = null;
   if(window.ActiveObject){
    xmlHttpReq = new ActiveObject("Microsoft.XMLHTTP");
   }else if(window.XMLHttpRequest){
    xmlHttpReq = new XMLHttpRequest();
   }
   xmlHttpReq.open("GET","test.html",true);
   xmlHttpReq.onreadystatechange = reqCallBack;
   xmlHttpReq.send();
   function reqCallBack(){
    if(xmlHttpReq.readyState == 4){
     $("#resText").html(xmlHttpReq.responseText);
    }
   }
   
  });
 2、load方法
  // load(url,[data],[callback])
  //无data参数为get，有data参数为post
  $("#send1").click(function(){
   $("#resText").load("test.html .param",function(responseText,textStatus,XMLHttpRequest){
    alert(responseText + ";" + textStatus);
   });
  });
 3、$.get()与$.post()方法
  /**
   * get(url,[data],[callback],[type])
   * post(url,[data],[callback],[type])
   * type:xml/html/script/json/text/_default
   */
  $("#send2").click(function(){
   $.get("getHtml.jsp",{
     userName:"zang",
     content:"ball"
    },function(data,textStatus){
     $("#resText").html(data);
     //alert(data + ";" + textStatus);
   });
   $.post("getHtml.jsp",{
    userName:"zang",
    content:"ball"
   },function(data,textStatus){
    $("#resText").append(data);
    //alert(data + ";" + textStatus);
   });
  });
  // xml
  $("#send3").click(function(){
   $.get("getXml.jsp",{
     userName:"zang",
     content:"ball"
    },function(data,textStatus){
     var username = $(data).find("comment").attr("userName"); 
     var content = $(data).find("comment content").text(); 
     var txtHtml = "<div class='comment'><h1>" + username;
     txtHtml += "</h1><p class='param'>" + content+"</p></div>"; 
     $("#resText").html(txtHtml);
   }); 
   $.post("getXml.jsp",{
    userName:"zang",
    content:"ball"
   },function(data,textStatus){
    var username = $(data).find("comment").attr("userName"); 
    var content = $(data).find("comment content").text(); 
    var txtHtml = "<div class='comment'><h1>" + username;
    txtHtml += "</h1><p class='param'>" + content+"</p></div>"; 
    $("#resText").append(txtHtml);
   });
  });
  // Json
  $("#send4").click(function(){
   $.get("getJson.jsp",{
     userName:"zang",
     content:"ball"
    },function(data,textStatus){
     var username = data.userName; 
     var content = data.content;
     var txtHtml = "<div class='comment'><h1>" + username;
     txtHtml += "</h1><p class='param'>" + content+"</p></div>"; 
     $("#resText").html(txtHtml);
   });
   $.post("getJson.jsp",{
    userName:"zang",
    content:"ball"
   },function(data,textStatus){
    var username = data.userName; 
    var content = data.content;
    var txtHtml = "<div class='comment'><h1>" + username;
    txtHtml += "</h1><p class='param'>" + content+"</p></div>"; 
    $("#resText").append(txtHtml);
   });
  });
 注：以下都是全局方法
 4、$.getScript()与$.getJSON()方法
  /*
   * getScript(url,callback)
   * getJSON(url,callback)
   */
  $("#send5").click(function(){
   $.getScript("getScript.js",function(){
    $("#resText").html("test getScript callback!");
   });
   $.getJSON("getJson.json",function(data){
    $("#resText").append("getJson:" + data.userName + ";" + data.content);
   });
  });
 5、$.ajax()方法
  /**
   * ajax()
   * ajaxStart 不常用
   * ajaxStop 不常用
   */
  $("#send6").click(function(){
   $("#loading").ajaxStart(function(){
    $(this).show();
   });
   $("#loading").ajaxStop(function(){
    $(this).hide();
   });
   $.ajax({
    type:"GET",
    url:"getXml.jsp",
    dataType:"html",
    //global:false,
    success:function(data){
     $("#resText").html("ajax!");
    }
   });
  });
 6、序列化元素serialize()
  $("#send1").click(function(){
   $.get("getJson.jsp",$("#form1").serialize(),function(){
    var username = data.userName; 
    var content = data.content;
    var txtHtml = "<div class='comment'><h1>" + username;
    txtHtml += "</h1><p class='param'>" + content+"</p></div>"; 
    $("#resText").html(txtHtml);
   });
  });

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

getJson.jsp

<%@page import="java.io.*"%>
<%
 PrintWriter fs = response.getWriter();
 response.setContentType("application/json"); 
 String username = (String) request.getParameter("userName"); 
 String content = request.getParameter("content");
 String result = "{\"userName\":\""+username+"\",\"content\":\""+content+"\"}";
 fs.println(result); 
 fs.flush(); 
 fs.close();
%>

getXml.jsp

<%@page import="java.io.*"%>
<%
 PrintWriter fs = response.getWriter();
 response.setContentType("text/xml;charset=UTF-8"); 
 String username = (String) request.getParameter("userName"); 
 String content = request.getParameter("content");
 Thread.sleep(1000);
 StringBuilder xml = new StringBuilder(); 
 xml.append("<?xml version='1.0' encoding='UTF-8'?>"); 
 xml.append("<comments>"); 
 xml.append("<comment userName='" + username + "'>");
 xml.append("<content>" + content + "</content>"); 
 xml.append("</comment>"); 
 xml.append("</comments>");         
 String info = xml.toString();
 fs.println(info); 
 fs.flush(); 
 fs.close();
%>
getHtml.jsp

<%@page import="java.io.*"%>
<%
 PrintWriter fs = response.getWriter();
 response.setContentType("text/html;charset=UTF-8"); 
 String info = "";        
 String username = (String) request.getParameter("userName"); 
 String content = request.getParameter("content");
 info = "<div class='comment'><h1>" + username + "</h1><p class='para'>" + content + "</p></div>"; 
 fs.println(info); 
 fs.flush(); 
 fs.close();
%>
test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title> JQuery Ajax </title>
 </head>
 <body>
 <div class="coment">
  <h1>张三</h1>
  <p class="param">板凳</p>
 </div>
 </body>
</html>

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