Js XMLHTTPRequest 实现GET请求提交和返回内容获取

【需求描述】

在进行html5页面的设计时，希望用户加载完成页面后，进行交互时只改变其中的某些元素的内容，这样更像本地APP的呈现效果，但是HTML中的post、get如果使用submit进行提交的话会直接使用返回的内容刷新整个页面，这样有两个不好的地方：

1、返回的内容必须是整个页面都有的内容，但实际情况是仅仅需要改变页面中部分元素，这样就造成数据流量大，对服务器的性能有耗

2、用户能够明显感觉到页面在刷新，影响用户的体验

【解决方法】

使用JS进行表单的提交可以避免这个问题，js提交有如下好处

1、js可以只请求需要改变的信息内容，而不需要服务器返回其他，节省服务器的负担

2、Js不会刷新整个页面这样用户的体验也就好一点

【实现步骤】

页面功能如下:

点击一个按钮，切换到Home页签，同时加载home页面的内容

<div id="home" class=“part”>
    <h3>Home</h3>
    <div id="targetlist">targetlist</div>
</div>

<div id="home_nav" class="nav_sub" οnclick="getHome('home')">Home</div>

js脚本如下：

var ishomeneedchange = true // 全局变量当home页面的内容改变时才去查询数据库获取页面的值，否则不进行查询
function getHome(id) {
    if (ishomeneedchange) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {//服务器返回值的处理函数，此处使用匿名函数进行实现
            if (xhr.readyState == 4 && xhr.status == 200) {//
                var responseText = xhr.responseText;
                document.getElementById('targetlist').innerHTML = responseText;
            }
        };
        xhr.open("GET", "/wxroot/JS/home", true);//提交get请求到服务器
        xhr.send(null)
        ishomeneedchange = false
    }
    changeDisplay(id);//切换到home页签

}

//切换页签的实现函数
function changeDisplay(id) {
	nav_array = Array("uploadpart", "createclasspart", "createtargetpart", "home");
	for (e in nav_array) {
		if (nav_array[e] == id) {
			document.getElementById(nav_array[e]).style.cssText = "display:block;";
		} else {
			document.getElementById(nav_array[e]).style.cssText = "display:none;";
		}
	}
}