demo1

AJAX(异步的JavaScript与XML)缺点：不能使用浏览器的“前进”，“后退”来回退或恢复Ajax的操作。XMLHttpRequest对象，微软IE核心使用ActiveX实现，其他浏览器使用其他技术实现此对象。使用范例：        var xmlHttpRequest = null;        if(window.activeXObject)//除undefined和null外均是true；IE浏览器里此项为真        {                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");        }else if(window.XMLHttpRequest)//除IE外的浏览器实现了此对象        {                xmlHttpRequest = new XMLHttpRequest();        }        if(null != xmlHttpRequest)        {                xmlHttpRequest.open("GET",url,true);//true表示以异步的方式发送请求，一般均为true。在firefox中，此项设为false后，下面的回调方法注册失效。                xmlHttpRequest.onreadystatechange=myfun;//注册回调方法,myfun为自定义的方法。                xmlHttpRequest.send(null);//若为POST方式，此方法可接受需提交的参数名值对字符串.如xmlHttpRequest.send("name=zhao&age=22");        }        function myfun()//一旦状态发生变化即调用此方法        {                if(xmlHttpRequest.readyState == 4)//收到响应                {                        if(xmlHttpRequest.status == 200)//客户端完整收到响应                        {                                alert(xmlHttpRequest.responseText);                        }                }        }        若以POST方式提交，在send之前，需执行：xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");jquery实现AJAX：        $.ajax({                type:"POST",//请求类型，GET或POST                url:"myServlet",//远程URL                dataType:"html",//返回的数据类型，有xml、json和html（即文本）。可选，默认是html。                data:{"param1":$("#text1").val()},//提交的参数,可选                success:function(returnedData){//回调方法                        alert(returnedData);                }                });                返回XML：                在服务器端：                        import org.dom4j.*;                        ...//其他代码                        Document doc = DocumentHelper.createDocument();                        Element rootElement = doc.addElement("users");                        Element userElement = rootElement.addElement("user");                        Element nameElement = userElement.add("name");                        nameElement.setText("zhao");                        response.setContentType("text/xml,charset=utf-8");                        response.setHeader("pragma","no-cache");                        response.setHeader("cache-control","no-cache");                        PrintWriter out = response.getWriter();                        OutputFormat format =OutputFormat.createPrettyPrint();                        format.setEncoding("utf-8");                        XMLWriter xmlWriter = new xmlWriter(out,format);                        xmlWriter.writer(doc);                        out.flush();                客户端：                        $.ajax({                                type:"POST",//请求类型，GET或POST                                url:"myServlet",//远程URL                                dataType:"xml",//返回的数据类型，有xml、json和html（即文本）。可选，默认是html。                                data:{"param1":$("#text1").val()},//提交的参数,可选                                success:function(returnedData){//回调方法                                        var id = $(returnedData).find("name").text();                                }                                });        返回JSON：                服务器端：                        Person p1 = new Person("zhao");                        Person p2 = new Person("li");                        ArrayList<Person> list = new ArrayList<Person>();                        list.add(p1);                        list.add(p2);                                Gson gson = new Gson();                        String json = gson.toJson(list);                        response.setContentType("application/json;charset=utf-8");                        response.setHeader("pragma","no-cache");                        response.setHeader("cache-control","no-cache");                        PrintWriter out = response.getWriter();                        out.print(json);                        out.flush();                客户端：                        $.get("getServlet",{},function(returnedData,status){                                var html = "<table>";                                for(var i=0;i<returnedData.length;i++){                                        var people returnedData[i];                                        var name = people.name;                                        html+="<tr><td>name:</td><td>"+name+"</td></tr>";                                }                                html+="</table>";                                $("theBody table:eq(0)").remove();                                $("theBody").append(html);                        });