web开发总结----Ajax数据传递

Ajax数据传递

前端页面--------------------------------------------------------------------------------------------
一：get请求

 function btn_get_click() {
          var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
          var username = document.getElementById("txt_username").value;

          //添加参数,以求每次访问不同的url,以避免缓存问题
          xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent(username)  + "&random=" +Math.random());---1、前端发送数据
          xmlHttp.onreadystatechange = function () {
               if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var txt = xmlHttp.responseText;-----1、前端获取回调数据(文本形式：name=value)
                    document.getElementById("result").innerHTML =txt;----给页面节点赋值

                    var txt = xmlHttp.responseText;-----2、前端获取回调数据(JSON格式的文本形式)
                   var citys = txt.evalJSON();
                   $('s2').innerHTML = '';
                   for(i=0;i<citys.length;i++){
                        var op =new Option(citys[i].cityName,citys[i].cityValue);
                        $('s2').options[i] = op;
                   }
                   var txt = xmlHttp.responseText;
                   var obj = txt.evalJSON();
                   $('d1').innerHTML = 'name:'+ obj.name + 'birthay:' + obj.birthday; //日期

 

                   var xml = xmlHttp.responseXML;----3、前端获取回调数据(xml dom 对象形式)

                   var mes=xml.getElementsByTagName("mes"); //获取mes节点
                   var mes_val=mes[0].childNodes[0].nodeValue; //表示第一个mes节点的第一个子节点
                   $('myres').value=mes_val;   //给页面节点赋值 

 

                   方法二：
                  var xmlDoc =xhr.responseXML.documentElement；
                  var name=xmlDoc.childNodes[0].childNodes[0].nodeValue;
                  var age   =xmlDoc.childNodes[1].childNodes[0].nodeValue                   
               }
          }

        xmlHttp.send(null); //发送请求,参数为null
     }

二：post请求

 function btn_post_click() {
       var xmlHttp = window.XMLHttpRequest ?new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
       var username = document.getElementById("txt_username").value;
       var age = document.getElementById("txt_age").value;   
       //文本数据组装：    
       var data = "username=" + encodeURIComponent(username)+ "&age=" + encodeURIComponent(age);

 

       //JSON数据组装：
       var page_data={}; //声明一个JSON类型
       page_data.username=username;
       page_data.age=age;
       var json=JSON.stringify(page_data);//转换为JSON数据，将这个变量json传值到后台，最简单的form提交

 

       //XML数据组装：
       第一步:创建一个XML的DOM对象
       function CreateDomDoc(){  //该函数应在btn_post_click()函数外定义
             Var signatures = ["Msxml2.DOMDocument.5.0","Msxml2.DOMDocument.4.0","Msxml2.DOMDocument.3.0","Msxml2.DOMDocument","Microsoft.XmlDom"];
             for(var i=0;i<signatures.length;i++){
               try{
                    var domDoc = new ActiveXObject(signatures[i]);
                    return domDoc;
               }catch(e){ }
            }
            return null;
       }
       第二步:从客户端取得数据写入XML的DOM对象
       function CreateXml(doc){  //该函数应在btn_post_click()函数外定义
             var root= doc.createElement("root");
             var NAME = doc.createElement("NAME");
             NAME.text= username;
             root.appendChild(NAME);
             var AGE = doc.createElement("AGE");
             AGE.text= age；
             root.appendChild(AGE);
             doc.appendChild(root);
             return doc.xml;
       }
       第三步 互相调用
       var domDoc = CreateDomDoc(); //创建对象 将用send发送到服务器端
       if(domDoc!=null){
         var xml = CreateXml(domDoc); //写入xml 返回xml文档
       }else{
         alert("未安装MSXML控件");
       }

       XML数据组装方法二：
        var Xml="<?xml version='1.0' encoding='UTF-8'?>"
        +"<root>"
         + "<name>" + username + "</name>"
         +"<age>" + age +"</age>"
        +"</root>";

 

 

 

        //不用担心缓存问题
       xmlHttp.open("post", "Server.aspx", true);

       //必须设置,否则服务器端收不到参数
       xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

       xmlHttp.onreadystatechange = function () {
           if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
               var txt = xmlHttp.responseText;-----1、前端获取回调数据(文本形式：name=value)
               document.getElementById("result").innerHTML =txt;----给页面节点赋值

 

               var txt = xmlHttp.responseText;-----2、前端获取回调数据(JSON格式的文本形式)
               var citys = txt.evalJSON();
               $('s2').innerHTML = '';
               for(i=0;i<citys.length;i++){
                  var op =new Option(citys[i].cityName,citys[i].cityValue);
                  $('s2').options[i] = op;
               }
               var txt = xmlHttp.responseText;
               var obj = txt.evalJSON();
               $('d1').innerHTML = 'name:'+ obj.name + 'birthay:' + obj.birthday; //日期

 

 

               var xml = xmlHttp.responseXML;----3、前端获取回调数据(xml dom 对象形式)
               var mes=xml.getElementsByTagName("mes"); //获取mes节点
               var mes_val=mes[0].childNodes[0].nodeValue; //表示第一个mes节点的第一个子节点
               $('myres').value=mes_val;   //给页面节点赋值 

 

               方法二：
               var xmlDoc =xhr.responseXML.documentElement；
               var name=xmlDoc.childNodes[0].childNodes[0].nodeValue;
               var age   =xmlDoc.childNodes[1].childNodes[0].nodeValue
           }
        }

        //发送请求,要data数据
        xmlHttp.send(data);---1、前端发送数据(发送前数据处理)
        xmlHttp.send(data+“sex=男”);---前端发送数据(数据不处理)
        xmlHttp.send(json);---2、前端发送JSON数据(发送前数据处理)

        xmlHttp.send(domDoc);---3、前端发送XML对象数据(发送前数据处理) 
        xmlHttp.send(xml); 
    }

 

后端（servlect、jsp、Action）：-------------------------------------------------------------------------------------------------------------
public class ActionServlet extends HttpServlet {
 public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
  response.setContentType("text/html;charset=utf-8"); //XML形式数据输出时：html换成xml
  PrintWriter out = response.getWriter();
数据接收----------------------------------------------------------------------------------
    1、文本字符串形式数据：
  String username =request.getParameter("username");  
  Double random =Double.parse(request.getParameter("random"));
  int        age =Int.parse(request.getParameter("age"));
  String     sex =request.getParameter("sex ");
    2、JSON形式数据：
  String jsonStr=request.getParameter("json");
  JSONArray jsonArray = JSONArray.fromObject(jsonStr);
  for(int i=0;i<jsonArray.length(); i++){
       JSONObject jsonJ = jsonArray.getJSONObject(i);
       User user=new User();
       user.setAge(jsonJ.getInt("age"));
       user.setUserName(jsonJ.getString("username"));
  }

  3、XML对象形式数据：
  Request.ContentEncoding = System.Text.Encoding.GetEncoding("utf-8");//设置接受类型,防止中文出现乱码情况
  XmlDocument xmldoc = new XmlDocument();  //建立xml文档对象
  xmldoc.Load(Request.InputStream); //接受ajax发送的xml文档对象流 //也可以接受普通字符流
  XmlNode nodeName = xmldoc.SelectSingleNode("//NAME");  //获得NAME节点
  String name = nodeName.InnerText; //取得节点值
  XmlNode nodeAge = xmldoc.SelectSingleNode("//AGE");  //获得AGE节点
  String age = nodeAge.InnerText; //取得节点值

 

数据输出----------------------------------------------------------------------------
   1、普通文本形式：（字符串形式）  
  if("king".equal(username))  out.println("用户名被占用");  
  out.close();

   2、JSON形式：导入 JSON 的 jar 包： JSON_jar.zip
 1）java对象：
  Option op = new Option("海淀","hd");
  JSONObject obj = JSONObject. fromObject (op);
  String str = obj.toString();
  out.println(str);  

  out.close();    
 2）数组：
  Option[] ops = {op,op2,op3};
  JSONArray obj = JSONArray. fromObject (ops);
  String str = obj.toString();
  out.println(str);  

  out.close();    
 3）集合：
  //手工组装josn格式的java数据：
  Option op = new Option("海淀","hd");
  Option op2 = new Option("东城","dc");
  Option op3 = new Option("西城","xc");
  List<Option> ops = new ArrayList<Option>();
  ops.add(op);
  ops.add(op2);
  ops.add(op3);
  
  //数据库查询的java对象：（前端取有用的值）
  List<Option> ops=optionService.findAll();
  JSONArray obj = JSONArray.fromObject(ops);
  String str = obj.toString();
  out.println(str);      ----后端输出JSON数据

  out.close();
 4）日期：（日期转为JSON需特殊处理）
  User user = new User();
  user.setBirthday(new Date()); 
  JsonConfig config = new JsonConfig();
  config.registerJsonValueProcessor(Date.class, new DateProcessor());
  JSONObject obj =JSONObject. fromObject (user,config);
  String str = obj.toString();
  out.println(str);

  out.close();

 }

 class DateProcessor implements JsonValueProcessor{  //提供日期转换规则的类
  private String pattern = "yyyy-MM-dd";
  public void setPattern(String pattern) {this.pattern = pattern;}
  public Object processArrayValue(Object arg0,JsonConfig arg1) {
   SimpleDateFormat sdf = new SimpleDateFormat(pattern);
   return sdf.format((Date)arg0);
  }
  public Object processObjectValue(String arg0,Object arg1, JsonConfig arg2) {
   SimpleDateFormat sdf = new SimpleDateFormat(pattern);
   return sdf.format((Date)arg1);
  }
 }

 

 3、XML对象形式：(组装xml数据和页面的组装一样)
   String Xml="<?xml version='1.0' encoding='UTF-8'?>"
          +"<root>"
             + "<name>" + username + "</name>"
             +"<age>" + age +"</age>"
          +"</root>";
  out.println(xml);
  out.close();
}