AjAX续1

1.Ajax请求xml数据。

1：ajax的创建方式

    Msxml2.XMLHTTP.6.0,Msxml2.XMLHTTP.5.0,Msxml2.XMLHTTP.3.0, Msxml2.XMLHTTP,Microsoft.XMLHttp

 

    IE6: newActiveXObject(

如何才可以保证在ie6 上使用最高版本：

    <scripttype="text/javascript">

    var vs = ["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHttp"];

    var xhr =null;

    for(var i=0;i<vs.length;i++){

       try{

           xhr = new ActiveXObject(vs[i]);

           if(xhr){

              break;

           }

       }catch(e){   

       }

    }

</script>

2.ajax核心类 XMLHttpRequest的创建最好放到一个js文件中

var xhr= null;

//判断是否可以直接支持xhr对象,IE7,Chrome,FF,O

if(window.XMLHttpRequest){

    xhr =new XMLHttpRequest();

}else{

    var vs = ["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHttp"];

    for(var i=0;i<vs.length;i++){

       try{

           xhr= new ActiveXObject(vs[i]);

           if(xhr){

              break;

           }

       }catch(e){

          

       }

    }

}

Xhr对象的responseText可以获取服务器上返回的所有文本数据：

    是可以获取所有的数据。

    服务的返回可以是:

    1:

       Response.setContentType(“text/plain;charset=UTF-8”);

       Response.getWriter().print(“Hello”);

    2:

       Response.setContentType(“text/html;chaset=Utf-8”);

       Respone.getWriter().print(“<font>AAAA</font>”);

    3:  --又可以通过xhr.responseXML方式获取一个dom对象。

       Resonse.setContentType(“text/xml;charset=Utf-8”);

       Response.getWriter().print(“<?xmlversion=”1.0><uer>name</>//”);

2.ajax中解析xml，可以获取Servlet动态生成的xml，也可以获取a.xml文件

第一步：创建一个xml    a.xml

<?xmlversion="1.0"encoding="UTf-8"?>

<users>

    <userid="U001">

       <name>Jack</name>

       <age>90</age>

    </user>

    <userid="U002">

       <name>张三</name>

       <age>77</age>

    </user>

</users>

第二步：发送ajax请求

最原始的解析xml

<scripttype="text/javascript">

    function _getXml(){

       var url ="<c:urlvalue='/xml/a.xml'/>";

       //准备连接

       xhr.open("GET",url,true);

       xhr.onreadystatechange=function(){

           if(xhr.readyState==4){

              if(xhr.status==200){

                  //获取xml数据.建议在获取xml数据之前，先用text获取测试

                  //var xml =xhr.responseText;

                  var xml = xhr.responseXML;//xml是一个dom对象

                  /*

                  var nms =xml.getElementsByTagName("name");

                  for(var i=0;i<nms.length;i++){

                     var nm = nms[i].firstChild.data;

                  }

                  */

                  var us =xml.getElementsByTagName("user");

                  for(var i=0;i<us.length;i++){

                     var id =us[i].attributes.item(0).nodeValue;//获取属的值

                     var nm =us[i].getElementsByTagName("name")[0].

                                firstChild.data;

                     var age =us[i].getElementsByTagName("age")[0].

                                firstChild.data;

                     alert(id+","+nm+","+age);

                  }

            }

           }

       };

       xhr.send(null);

    }

</script>

第三步：动态的返回的结果

 

    查询数据库：

        List<User>转换成<?xml><users><user><id>ss</id><name

1.最原始的动态生成xml

import czb.domain.User;

public class XmlServlet extends HttpServlet {//测试直接访问即可

    private static final long serialVersionUID = 1L;

    public  voiddoGet(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException {

       //1。先创建多个模拟的用户

       Random ran = new Random();

       int num = ran.nextInt(20);

       List<User> us = new ArrayList<User>();

       for (int i = 1; i <num; i++) {

           us.add(new User("U"+i,"张三"+i,i));

       }

       //2.设置返回的xml

       response.setContentType("text/html;charset=UTF-8");

       //3.组成xml

       String xml = "<?xmlversion='1.0' encoding='UTF-8'?><users>";

       for (User u : us) {

           xml+="<userid='"+u.getId()+"'><name>"+u.getName()+"</name><age>"+u.getAge()+"</age></user>";

       }

       xml+="</users>";

       response.getWriter().print(xml);

    }

}

2使用工具Xstream动态生成xml

 

public class XmlServlet extends HttpServlet {//测试直接访问即可

    public void doGet(HttpServletRequest request, HttpServletResponseresponse)

           throws ServletException, IOException {

       // 1：先创建多个模拟的用户

       Random r = new Random();

       int a = r.nextInt(30);

       List<User> us = new ArrayList<User>();

       for (int i = 0; i < a; i++) {

           us.add(new User("U" + i,"张三" + i, i));

       }

       // 2:设置返回xml

       response.setContentType("text/xml;charset=UTF-8");

       // 3:组成xml数据

       // 以下是用工具实现转换成xml

       // 声明这个解析对象

       XStream x = new XStream(new StaxDriver());

       // 设置别名

       x.alias("users",List.class);

       x.alias("user",User.class);

       x.aliasAttribute(User.class,"id","id");

       // 将某个集合转成Xml文本

       String xml = x.toXML(us);

       response.getWriter().print(xml);

    }

}

2.Ajax处理json数据,用json代替xml

因为json轻量级

JSON – JavaScript Object Notation – JS对象

其实就是List,Map,Bean对象

声明一个list

    var aa = [];

    声明一个map/bean=  {};

   

对于json中的数据，如果是boolean，int,float,double，可以不用加””.

但其他的都要加””

如下：

    [3,4,6,”山东”,true,990.33]

    {“name”:”Jack”,”age”:99,”marraied”:true}

 

1.json和xml的对比

1.1以下是用json表示的多个用户：

1.2以下是用xml表示的多个用户:

<?xmlversion="1.0"encoding="UTf-8"?>

<users>

    <userid="U001"country="CN">

       <name>Jack</name>

       <age>90</age>

    </user>

    <userid="U002"country="US">

       <name>张三</name>

       <age>77</age>

    </user>

</users>

2.解析json

第一步：创建一个json文件

第二步：发送ajax请求 – 解析静态的json文件

<scripttype="text/javascript"src="<c:urlvalue='/js/ajax.js'/>"></script>

</head>

<body>

    <buttononclick="_getJson();">JSON</button>

</body>

<scripttype="text/javascript">

  function _getJson(){

    var url ="<c:urlvalue='/xml/aa.json'/>"; 

    //var url = "<c:urlvalue='/JsonServlet'/>";   下一步请求动态生成的json时用

    xhr.open("GET",url,true);

   

    xhr.onreadystatechange=function(){

       if(xhr.readyState==4){

           if(xhr.status==200){

              var str = xhr.responseText;//只能使用text

              //将str转换成json对象

               var json = eval("("+str+")");

              //获取值

              for (var i = 0; i < json.length; i++) {

                  var user = json[i];

                  alert(user.id+","+user.name+","+user.age);

              }

             

           }

       }

    };

    xhr.send(null);

  }

</script>

第三步:解析动态的json:

a.最原始的生成json：

public class JsonServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

 

    public void doGet(HttpServletRequest request, HttpServletResponseresponse)

           throws ServletException, IOException {

       // 1。先创建多个模拟的用户

       Random ran = new Random();

       int num = ran.nextInt(20);

       List<User> us = new ArrayList<User>();

       for (int i = 1; i < num; i++) {

           us.add(new User("u" + i,"张三" + i, i));

       }

       // 2.设置返回的xml

       response.setContentType("text/html;charset=UTF-8");

       //3:转成json

       String json ="[";

       for(User u : us){

           json+="{\"id\":\""+u.getId()+"\",\"name\":\""+u.getName()+"\",\"age\":"+u.getAge()+"},";         最原始的生成json

       }

       json =json.substring(0,json.length()-1);

       json+="]";

      response.getWriter().print(json);

    }

}

b.用工具生成json

public class JsonServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponseresponse)

           throws ServletException, IOException {

       Random r = new Random();

       int a = r.nextInt(30);

       List<User> us = new ArrayList<User>();

       for (int i = 0; i < a; i++) {

           us.add(new User("U" + i,"张三" + i, i));

       }

       // 2:设置返回text/html

       response.setContentType("text/html;charset=UTF-8");

       //3:转成json

       String str =JSONArray.toJSONString(us);          用工具生成json    

       response.getWriter().print(str);

    }

}

运行结果：