java和Ajax

原博（实在太啰嗦了）：https://netbeans.org/kb/docs/web/ajax-quickstart_zh_CN.html

1、Ajax的基本原理

Ajax 代表异步 JavaScript 和 XML。

Ajax 交互在后台异步处理。同时，用户可以继续使用页面。Ajax 交互由 JavaScript 代码启动。Ajax 交互完成后，JavaScript 会更新页面的HTML 源代码。这些更改会立即进行，

不需要刷新页面。

Ajax 交互的应用场景：如使用服务器端逻辑验证窗体条目（当用户输入窗体条目时）、检索服务器中的详细数据、动态更新页面上的数据，以及从页面提交部分窗体。

Ajax 的工作原理是使用 XMLHttpRequest 对象在客户端和服务器之间异步传递请求和响应

流程：

用户触发一个事件，例如，在键入姓名时释放一个按键。这会引发调用初始化 XMLHttpRequest 对象的 JavaScript 函数。
XMLHttpRequest 对象将使用一个请求参数进行配置，该参数将包含触发该事件的组件 ID 以及用户所输入的任何值。然后，XMLHttpRequest 对象将向 Web 服务器发出异步请求。
在 Web 服务器上，诸如 servlet 或监听程序之类的对象会处理该请求。从数据存储检索数据，并且准备一个响应，其中包含 XML 文档形式的数据。
最后，XMLHttpRequest 对象使用回调函数接收 XML 数据并对其进行处理，然后更新 HTML DOM（文档对象模型）以显示包含新数据的页面。

二、客户端编程

js关键代码：

 <script type="text/javascript">
     var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件，它表示还没有创建 XMLHttpRequest 对象。
     function CreateXMLHttp() {
         try {
             xmlhttp = new XMLHttpRequest(); //尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
         } catch (e) {
             try {
                 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用较新版本的 IE 创建 IE 兼容的对象（Msxml2.XMLHTTP）
             } catch (e) {
                 try {
                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象（Microsoft.XMLHTTP）。
                 } catch (failed) {
                     xmlhttp = false; //如果失败则保证 request 的值仍然为 false。
                 }
             }
         }
         return xmlhttp;
     }

     xmlhttp = CreateXMLHttp();
     if (!xmlhttp) {
         //创建XMLHttpRequest 对象失败!
     } else {
         //创建成功!
     }
     xmlhttp.open("get", "http://www.cnblogs.com", true);
     xmlhttp.onReadyStateChange = getResult;
     xmlhttp.send();
     function getResult() {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             alert(xmlhttp.responseText);
         }
     }
 </script>var xhr = null;

var xhr = null;

function createXHR(){
    if (window.XMLHttpRequest){
         // 新浏览器
         xhr = new XMLHttpRequest();
     }else if (window.ActiveXObject){
         // IE5,IE6
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
}

<script type="text/javascript">
        //无参数调用
        $(document).ready(function() {
            $('#btn1').click(function() {
                $.ajax({
                    type: "POST",   //访问WebService使用Post方式请求
                    contentType: "application/json",
                    url: "Default2.aspx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
                    data: "{}",  //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到
                    dataType: 'json',   //WebService 会返回Json类型

                    success: function(result) {     //回调函数，result，返回值
                        alert(result.d);
                    }
                });
            });
        });
        //有参数调用
        $(document).ready(function() {
            $("#btn2").click(function() {
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "Default2.aspx/GetWish",
                    data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}",
                    dataType: 'json',
                    success: function(result) {
                        alert(result.d);
                    }
                });
            });
        });
        //返回集合（引用自网络，很说明问题）
        $(document).ready(function() {
            $("#btn3").click(function() {
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "Default2.aspx/GetArray",
                    data: "{i:10}",
                    dataType: 'json',
                    success: function(result) {
                        $(result.d).each(function() {
                            alert(this);
                            $('#dictionary').append(this.toString() + " ");
                            //alert(result.d.join(" | "));
                        });
                    }
                });
            });
        });
        //返回复合类型
        $(document).ready(function() {
            $('#btn4').click(function() {
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "Default2.aspx/GetClass",
                    data: "{}",
                    dataType: 'json',
                    success: function(result) {
                        $(result.d).each(function() {
                            //alert(this);
                            $('#dictionary').append(this['ID'] + " " + this['Value']);
                            //alert(result.d.join(" | "));
                        });

                    }
                });
            });
        });
    //Ajax 为用户提供反馈，他们两个方法可以添加给jQuery对象在Ajax前后回调
        //但对与Ajax的监控，本身是全局性的
        $(document).ready(function() {
            $('#loading').ajaxStart(function() {
                $(this).show();
            }).ajaxStop(function() {
                $(this).hide();
            });
        });
        // 鼠标移入移出效果，多个元素的时候，可以使用“，”隔开
        $(document).ready(function() {
            $('btn').hover(function() {
                $(this).addClass('hover');
            }, function() {
                $(this).removeClass('hover');
            });
        });
    </script>

XMLHttpRequest 对象是 Ajax 的核心，并已经成为通过 HTTP 异步传递 XML 数据的实际标准。

当您创建 XMLHttpRequest 对象时会指定三个参数：URL、HTTP 方法（GET 或 POST），以及此交互是否为异步交互。

open(method, url, async, username, password)

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

如果此交互设为异步交互，则必须指定回调函数。如：req.onreadystatechange = callback;

三、服务器端编程

使用Servlet处理

1)、返回xml格式

  response.setContentType("text/xml");
  response.setHeader("Cache-Control", "no-cache");

2)、返回json格式 Servlet处理 (从servlet中返回给ajax的dataType类型可以是text,json)

Json简单讲就是Javascript对象或数组.

Json形式一: javascript对象 { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }

Json形式二: javascript数组 [{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },

{ "firstName": "Jason", "lastName":"Hunterwang", "email": "bbbb"}]

1、在servlet中构造json文本，再response.getWriter()给ajax，返回json text文本 dataType:"text"

2、用字符串构造json数据，返回json对象

servlet中返回application/json response.setContentType("application/json;charset=utf-8")

ajax中dateType用json dataType:"json",

3、返回json对象，但是在servlet中直接用把一个数组或集合转换成为json类型的数组对象

 EmployeeDao employeeDao = new EmployeeDao();
 ArrayList<Employee> employees = employeeDao.select(username);
 JSONArray jsonArray=JSONArray.fromObject(employees);
 PrintWriter out = response.getWriter();
 out.println(jsonArray.toString());//在jsp中的数据类型dataType："json"

 <script type="text/javascript">
 function check(){
     var resultNode = $("#result");
     var username = $("#username").val();
     $.ajax({
         url:"ShowEmp_ajax_json2",
         type:"POST",
         data:{username:username},
         dataType:"json",//注意此时这里是json
         success:function(data){
             //转换成jquery对象
             var s = "<table border='1' width='100' height='100'>";
             //若servlet中要是用
 //          JSONArray jsonArray=JSONArray.fromObject(employees);
 //          out.println(jsonArray.toString())
 //          这样的形式返回json对象，那么将相当于返回了一个json数组,
 //          类似这样[{"eno":"7369","ename":"SMITH"},{"eno":"7499","ename":"ALLEN"}]，
 //          而不是这样{"emp":[{"eno":"7369","ename":"SMITH"},{"eno":"7499","ename":"ALLEN"}]}
 //          这样在jsp中就可以直接遍历data这个json数组，不需要再转换，也不需要用data.emp(本身在servlet转换过来的也没有emp),  

 //          servlet中的contentType为application/json   jsp中dataType为json  

             $.each(data,function(index,element){
 //              alert(element.empNo+element.ename);
                 s+="<tr>";
                 s += "<td>"+element.empNo+"</td>";
                 s += "<td>"+element.ename+"</td>";
                 s += "<td>"+element.job+"</td>";
                 s += "<td>"+element.mgr+"</td>";
                 s += "<td>"+element.date+"</td>";
                 s += "<td>"+element.sal+"</td>";
                 s += "<td>"+element.comm+"</td>";
                 s += "<td>"+element.deptNo+"</td>";
                 s+="</tr>";
             });
             s += "</table>";
             $("#result").html(s);
         }
     });
 }
 </script>

  String userName = request.getParameter("userName");
         userName=URLDecoder.decode(userName, "UTF-8");  

         String content = request.getParameter("content");
         content=URLDecoder.decode(content, "UTF-8");  

         System.out.println("userName:"+userName);
         System.out.println("content:"+content);  

         response.setCharacterEncoding("utf-8");
         PrintWriter out = response.getWriter();
         //将数据拼接成JSON格式
         out.print("{\"yourName\":\"" + userName + "\",\"yourContent\":\""+content+"\"}");
         out.flush();
         out.close();

3)、返回纯文本

使用Struts框架

四、创建回调函数

定义回调函数，以处理服务器的响应，同时添加一些必要的功能，以反映用户所查看页面中的更改。

js核心代码：

 function callback() {
     if (req.readyState == 4) {
         if (req.status == 200) {
             parseMessages(req.responseXML);
         }
     }
 }

巴特西

java和Ajax

最新文章

热门文章