【Ajax】成为你的一部分

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。而数据的响应格式通常是html，xml，json

直接方式：

$(function() {
    // alert(-1);
    $("a").click(function () {
        // alert(1);
        httpXML(this.href);
        return false;
    });
});

function httpXML(xml) {
    //1.创建XMLHttpRequest对象
    var request = new XMLHttpRequest();
    //2.规定请求
    var method = "get";
    var url = xml; //请求数据在服务器上。此处目标数据地址获得通过浏览器地址+xml
    request.open(method, url); //若第三个参数设置为同步传输，则不必设置onreadystatechange
    //3.发送请求
    request.send(null);
    //4.响应请求
    request.onreadystatechange = function (ev1) {
        // alert("请求状态：" + request.readyState);
        if (request.readyState == 4) {
            if (request.status == 200 || request.status == 304) {
                var xmlData = request.responseXML; 
                var name = xmlData.getElementsByTagName("name")[0].firstChild.nodeValue; //开始解析数据
                var website = xmlData.getElementsByTagName("website")[0].firstChild.nodeValue;
                var email = xmlData.getElementsByTagName("email")[0].firstChild.nodeValue;
                $("#details").empty(); //只是清除内部子节点
                    ($("#details")).append("<h2><a href=\"" + email + "\">" + name + "</a></h2><br>")
                    .append("<a href=\""+website+"\">网址</a>");  //注意href的链接在双引号里
            }
        }
    };
}
//界面部分
<ul>  
    <li><a href="../files/A.xml">A</a></li>
    <li><a href="../files/B.xml">B</a></li>
    <li><a href="../files/C.xml">C</a></li>
</ul>
<div id="details"></div>

JQuery方式（推荐

//对于服务器上现有的xml、json数据文件
$(function () {
    $("a").click(function () {
        var url = this.href;
        var args = {"time": new Date()};
        //要是请求json格式，则将type参数"xml"改为”json“    $.get可以直接换成$.post
        $.get(url, args, function (data) {  //返回的结果为回调函数参数data
            var name = $(data).find("name").text();
            var website = $(data).find("website").text();
            var email = $(data).find("email").text();

            $("#details").empty();
            $("<h2></h2>").append("<a href=\"" + email + "\">" + name + "</a><br>")
                .appendTo($("#details"))
                .append("<a href=\""+website+"\">网址</a>");
        }, "xml");
        return false;  //submit或点击含链接的Node一定的得return false要不就跳走了
    });
})

//对于服务器上现有的html数据文件
$(function () {
    $("a").click(function () {
        var url = this.href +" h2"; // " h2"是返回结果的筛选器，注意有空格
        var args = {"time": new Date()}; //需要是Json格式
        $("#details").load(url,args);
        return false;
    });
})

补充：Json格式

var jsonObject = {
    "name": "xyz",
    "age":12,
    "address":{"city":"beijing", "school": "HUST"},
    "teaching":function () {
        alert("java...python");
    }
};
alert(jsonObject.name);
jsonObject.teaching();
var testStr = "alert('hello eval')";
alert(eval(testStr)); //转成js代码

var jsonStr = "{'name':'Zhangfei'}";
var jsonObject2 = eval("("+jsonStr+")") //json字符串转json格式

上面是通过现有Json文件返回Json数据，之前博文有提到浏览器的请求通常需经过Servlet处理组织数据然后response，但Json拼写确实是一个问题有点小麻烦，故引入Jackson

public class Customer {  //这儿就演示下
    private String name;
    private String id;
    
    public Customer(String name, String id) {
        this.name = name;
        this.id = id;
    }
    public String getId() { //JackSon根据getter来定位对象的属性，而不是字段.
        return id;
    }
    //对应json{"name":值为return的值}  若getName改为getNameCust 则{"nameCust":值为return的值}
    public String getName(){
        return name;
    }
    //@JsonIgnore  //在转为json对象时忽略该属性即 {"name":"xu","id":"12","birthday":"1999-01-30"}
    public String getCity() {
        return "beijing";
    }
    public String getBirthday() {
        return "1999-01-30";
    }
    public static void main(String[] args) throws JsonProcessingException {
    //此处的转Json处理程序，通常是放在servlet的request请求处理函数中
        ObjectMapper mapper = new ObjectMapper();
        Customer cust = new Customer("xu", "12");
        String jsonStr = mapper.writeValueAsString(cust);
        System.out.println(jsonStr); 	//{"name":"xu","id":"12","city":"beijing","birthday":"1999-01-30"}
    }
}