Ajax

---

Ajax

页面的局部刷新技术，给人一种很好的交互体验 ；

---

关于 XMLHttpRequest 对象

XMLHttpRequest 对象，在不同的刘浏览器上被创建的方式是不同的，但是对于创建出来的对象是一样的，它们的方法和属性是相同的 ；

在 IE 系浏览上，XMLHttpRequest 对象被实现为 ActiveXObject 对象，在非 IE 上，比如 filefox、chrome 等浏览器上被实现为一个本地 JS 对象，；

因此为了能兼容浏览器，XMLHttpRequest 对象一般这样获得，先判断下当前浏览器有 ActiveXObject 还是有 XMLHttpRequest 对象 ：

  function getXMLHttpRequest() {
        var xmlHttpRequest = false;
        if (window.XMLHttpRequest) {
            xmlHttpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP")
        }
        return xmlHttpRequest;
    }

知道这个事，就行了，实际开发中，使用 Jquery ，不需要我们进行兼容性判断 ；

---

通过 XMLHttpRequest 对象演示 Ajax

<script type="text/javascript">
    alert("${pageContext.request.contextPath}")
    window.onload = function () {
        //    获取节点
        var testAjax = document.getElementsByTagName("a")[0];
        //    绑定 点击事件
       testAjax.onclick = function () {
            // 创建 XMLHttpRequest 对象
            var xmlHttpRequest = getXMLHttpRequest();
            //   设置要访问的资源，使用 POST 传递一些数据过去
            var method = "POST";
            var url = this.href;
            xmlHttpRequest.open(method, url);
            // 上面设置了 post 传递数据，需要告诉服务器正在发送数据，数据已经符合编码
            // 如果是 get 方法，则不需要进行设置
            xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            // 发起请求,如果有数据需要提交，参数就写数据；没有，就写 null ；
            xmlHttpRequest.send("name:yaz");
            // 接受状态响应
            xmlHttpRequest.onreadystatechange = function () {
                //    判断状态码
                var state = xmlHttpRequest.readyState;
                if (4 == state) {
                    //    获取回应,响应头
                    var response = xmlHttpRequest.responseText;
                    //    打印输出
                    console.log(response) ;
                }
            };

            //    取消 超链接的默认行为
            return false;
        }
    }
</script>

---

Ajax 传输的数据格式

只要是文本数据，理论上，Ajax 都可以请求，但是请求回来以后，怎么解析，是个问题，目前便于解析格式有三种：Html、XML、JSON ；

Ajax 请求回来的数据格式，我认为，是一个纯文本形式，就是数据在服务器端是什么样的，请求回来的数据就是什么样的；

---

Ajax 解析 HTML

因为请求回来的数据就是 HTML 格式，因此，不需要做过多的解析，直接使用节点的 innerHtml 即可；

但是缺点也有，数据的关系不明确，如果对传回来的某个节点进行数据的拆分，比较麻烦 ，比如传回来一个 TextArea 里面，想要对里面的数据进行拆分，只获取其中的某个部分；

				 if (4 == state) {
                        if ((200 == xmlHttpRequest.status) || (304 == xmlHttpRequest.status)) {
                            //    get response , the information wo need is contain in the attribute that named responseText
                            var responseText = xmlHttpRequest.responseText;
                            //  show the information in the html node's div 
                            var showTextDiv = document.getElementById("showText");
                            showTextDiv.innerHTML = responseText;
                        }
                    }

---

Ajax 解析 xml

xml 就是为了传递数据而生，虽然说诞生的意义不在此，是为了取代 HTML ，但是目前来说，已经不可能，但是 xml 也是好样的，在与目标背道而驰的路上一路狂奔，称为传输数据的好帮手 ；

xml 可以明确的表示数据之间的关系，并且完全可以被 DOM 解析，使用 DOM 可以随意操控它 ；解决了 HTML 的拆分数据困难的问题 ，但是数据很复杂的时候，解析起来也是一件不容易的事情（此时使用 JSON）；

但是 xml 也有弊端，传输回来的数据，不是 HTML 的节点，需要我们自己进行对数据的解析，然后拼接成节点 ；

			 if (4 == state) {
                    if ((200 == xmlHttpRequest.status) || 304 == xmlHttpRequest.status) {
                        var xmlText = xmlHttpRequest.responseXML;
                        //    parse xml to splice as a html node
                        var name = xmlText.getElementsByTagName("name")[0].textContent;
                        var skill = xmlText.getElementsByTagName("skill")[0].textContent;
                        // splice html node
                        var a = document.createElement("a");
                        a.appendChild(document.createTextNode(name + ":" + skill));

                        var h2 = document.createElement("h2");
                        h2.appendChild(a);

                        var showText = document.getElementById("showText");
                        //    remove node's content
                        showText.innerHTML = "" ;
                        showText.appendChild(h2) ;
                    }
                }

注意，服务器端的 xml 文档，则文档开头需要指出 <?xml version="1.0" encoding="UTF-8"?> ，不然 responseXML 的值是空的 ；

如果是动态生成的话，还需要调用 response.setContentType（） 方法，指定下文档类型，不然 responseXML 的值也是空的 ；

---

Ajax 解析 JSON

JSON 不需要像 XML 那样费劲的去解析，可以直接点出属性来 ： xx.aa 这样，对于复杂的数据关系，可以使用 JSON 可以免去解析 XML 的苦恼 ；

JSON 是 JS 里面的一个技术，JSON 对象就是 JS 对象，但是要将 JSON 从字符串变为 JS 对象，需要使用 eval() 方法 。形如：evel("（"+ json +"）")；

但是 JSON 怎么说，也是一个字符串，需要自己进行拼接节点 ；

						// use for receive string ,such as html,json
                        var jsonText = xmlHttpRequest.responseText;
                        // transform json string to  js's object
                        var object = eval("(" + jsonText + ")") ;
                        // get attribute from json
                        var name = object.name;
                        var birthday = object.birthday;
                        // splice html node
                        var a = document.createElement("a");
                        a.appendChild(document.createTextNode(name + ":" + birthday));

使用 eval() 有风险，如果对方传来的 json 里面有恶意的 js 代码，也会被执行 ；

  var jsonObejce = {
         	
           ...
           ...
           
            "testEvel":function () {
                for(var  i = 0 ;i<1;i--){
                    alert(i);
                }
            }
        }

比如这样的一个 json 对象，里面的一个属性方法，里面包含了一段死循环 alert 代码，会被执行 ；

---

Jquery 中的 Ajax

Jquery 对 Ajax 操作进行了封装，在 JQuery 中最底层的方法是 $.ajax()，第二层是 load()，$.get() 和 $.post() ，第三层是 $.getScript() 和 $.getJSON() ;

---

load() 方法：

是 JQuery 中最为简单和常见的 Ajax 方法，能载入远程的 HTML 代码，并插入到 DOM 中 ，根据此特性，该方法最适合解析 HTML；

用此方法，解析 XML ，它也会知直接将 XML 插入到 DOM 中，但是 XML 中的标签，都是自定义，不会被识别，还需要我们解析，拼接标签，对于解析，下面的 $.get()/$.post() 有便捷的方法；

方法签名：load(url,[data],[callback]) ;

1. url 请求页面的 URL 地址，是个 String 类型
2. 需要发送给服务器的参数，是个键值对形式，Object 类型
3. 请求完成以后执行的操作，无论请求成功与否，都会执行，是个 function ；

只需要使用 JQuery 选择器为 HTML 片段指定目标位置，然后将要加载的文件的 URL 作为参数传递给 load（） 方法即可 ；

如果只需要获取传递回来的 HTML 页面中部分元素，则在 URL 后面添加一个选择器：URL+空格+选择器 ；

如果没有传递 data 参数，则 load（） 使用 get 方式提交，如果有 data 参数，则使用 post 方式提交；

回调函数，有三个参数，代表请求对象的 data ，代表请求状态的 testStatus 对象和 XMLHttpRequest 对象 ；

<script type="text/javascript">
        $(function () {
            alert(1);
            $("a").click(function () {
                var url = this.href + " #a";
                var date = {"date": new Date()};
                alert(2)
                $("#content").load(url, date);
                return false;
            });
        });
    </script>

---

$.get()/$.post() 方法

方法有三个参数，分别是 URL地址，需要传给服务器的数据，回调函数 ，返回结果的类型；

其中 回调函数 的也有三个，跟 load() 方法的回调函数一样；

返回结果类型，用于告诉浏览器，数据的类型，可以使用该方法解析 JSON ；

跟之前解析 XML 一样，需要自己拼接下；

		 $("#testXml").click(function () {
                var url = this.href ;
                var args = {"time":new Date()}
                // argument 'data' preserve data that server return
                $.get(url,args,function (data) {
                    // parse xml to get special data that we need
                    var name = $(data).find("name").text();
                    var skills = $(data).find("skill").text();
                    $("#content").empty().append("<a href='"+skills+"'>name</a>") ;
                })
                return false ;
            });

---

$.getJSON() 方法

用于解析 JSON 对象 ；

方法接受三个参数，基本都是一样，跟上面；

   $("#testJSON").click(function () {
                var url = this.href ;
                var args = {"time":new Date()};
                $.getJSON(url,args,function (data) {
                    var name = data.name ;
                    var age = data.age ;
                    $("#content").empty().append("<a href='"+age+"'>"+name+"</a>") ;
                })
                return false ;
            });

---

jackson 的使用

参考这篇博客：Jackson使用