Ajax传统操作

JavaScript:                                                                                                                                                                                                     

    ----------array：      object                                                                                 

定义： var obj= [1, 2, 3, 4]; // 等价于 var obj= new Array(1, 2, 3, 4);                         

　　----------Json:              object                                     

　　  js里面，有一种特殊的对象，就是Json，可以看做一种特殊的Map（仅方便联想）

var  data = {"uid":"uuid","username":"xt","sex":"男"，"password":"123456"};

　　-------------基于对象的使用: data.uuid==========>data["uuid"]             前台去处理Json

----------------------------------------------------------->ajax使用

　          传    json          得到json

controller-------------->前台界面（显示数据）    ===================》局部刷新界面，而不是整个界面

Ajax操作分为四步走：两种请求方式  post，get

1）获取XMLHttpRequest

fucntion  craeteXMLHttpRequest(){

　　　　　　　　　　　try{

　　　　　　　　　　　　　　return new XMLHttpRequest();

　　　　　　　　　　　}catch(e){

　　　　　　　　　　　　try{

　　　　　　　　　　　　　　return new ActiveXObject("Microsoft.XMLHTTP")

　　　　　　　　　　　　}catch(e){

　　　　　　　　　　　　　　try{

　　　　　　　　　　　　　　　　return new ActiveXObject("msxml2.XMLHTTP")

　　　　　　　　　　　　　　}catch(e){

　　　　　　　　　　　　　　　　throw e;

　　　　　　　　　　　　　　}

　　　　　　　　　　　　}

　　　　　　　　}

　　　　

　　           var xmlHttpRequest = new  craeteXMLHttpRequest();

　2)打开窗口（如咱们一般访问浏览器）

　　　　 xmlHttpRequest.open("Get","<c:url value='/xt?action=hello&xt=aaa'/>",true); ------》get

　　　　  xmlHttpRequest.open("POST","<c:url value='/product.do?action=checkByPid'/>",true);     ---->post 要设置请求头
　　　　 xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

<c:url value='/xt?action=hello&xt=aaa'/> ------------->也可以是一般文本文件

3）浏览器里面输入数据（send）

　　　　xmlHttpRequest.send(null)------------->get

　xmlHttpRequest.send("username"+username)------------->post

4)浏览器回应

xmlHttpRequest.onreadystatechange = function(){
　　if(xmlHttpRequest.readyState==4 &&xmlHttpRequest.status == 200){
　　　　var text = xmlHttpRequest.responseText;   //类型text，一般可以接收str

var data = JSON.parse(text);   //  eval("(" +data+ ")")   两种解析方式

　　　　var xml  =  xmlHttpRequest.responseXML;   //xml     str为xml形式
    
　　};

后台   bean------------》json给前台

 package cn.transfer.test;

 import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 import java.util.TreeMap;

 import net.sf.json.JSONArray;
 import net.sf.json.JSONObject;

 import org.junit.Test;

 public class TestJson {
     /*
      * 当map来用
      */
     @Test
     public void fun1() {
         JSONObject map = new JSONObject();
         map.put("name", "zhangSan");
         map.put("age", 23);
         map.put("sex", "male");

         String s = map.toString();
         System.out.println(s);

         System.out.println("----------------------------");
         Map<String,Object> map2 = new TreeMap<String, Object>();
         map2.put("age", 12);map2.put("name", "LiSi");map2.put("sex", "男");
         System.out.println(map2.toString().replace("=", ":"));//{sex=男, name=LiSi, age=12}
     }

     @Test
     public void beanToJson(){
         Person person = new Person("LiSi", 12, "男");
         //对象转换为json
         JSONObject map = JSONObject.fromObject(person);
         System.out.println(map.toString());
     }

     /**
      * JSONArray
      */
     @Test
     public void fun3() {
         Person p1 = new Person("zhangSan", 23, "male");
         Person p2 = new Person("liSi", 32, "female");

         JSONArray list = new JSONArray();
         list.add(p1);
         list.add(p2);

         System.out.println(list.toString());
     }

     /**
      * 原来就有一个List，我们需要把List转换成JSONArray
      */
     @Test
     public void fun4() {
         Person p1 = new Person("zhangSan", 23, "male");
         Person p2 = new Person("liSi", 32, "female");
         List<Person> list = new ArrayList<Person>();
         list.add(p1);
         list.add(p2);

         System.out.println(JSONArray.fromObject(list).toString());
     }

     @Test   // 数组--------------<>JSON
     public void fun5() {
         Person p1 = new Person("zhangSan", 27773, "male");
         Person p2 = new Person("liSi", 32, "female");
         Person[] p = {p1,p2};

         System.out.println(JSONArray.fromObject(p).toString());
     }

     @Test             // String------------>JSON
     public void fun6() {

         JSONObject map = new JSONObject();
         map.put("name", "zhangSan");
         map.put("age", 23);
         map.put("sex", "male");
         Person obj =  (Person) JSONObject.toBean(map, Person.class);
         System.out.println(obj.toString() );
     }
 }