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() );
    }
}