js post

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

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

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

【解决方法】

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

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

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

【实现步骤】

页面功能如下:

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

[html] view plain copy

1. <div id="home" class=“part”>
2. <h3>Home</h3>
3. <div id="targetlist">targetlist</div>
4. </div>
5. <div id="home_nav" class="nav_sub" onclick="getHome(‘home‘)">Home</div>

js脚本如下：

[javascript] view plain copy

1. var ishomeneedchange = true // 全局变量当home页面的内容改变时才去查询数据库获取页面的值，否则不进行查询
2. function getHome(id) {
3. if (ishomeneedchange) {
4. var xhr = new XMLHttpRequest();
5. xhr.onreadystatechange = function() {//服务器返回值的处理函数，此处使用匿名函数进行实现
6. if (xhr.readyState == 4 && xhr.status == 200) {//
7. var responseText = xhr.responseText;
8. document.getElementById(‘targetlist‘).innerHTML = responseText;
9. }
10. };
11. xhr.open("GET", "/wxroot/JS/home", true);//提交get请求到服务器
12. xhr.send(null)
13. ishomeneedchange = false
14. }
15. changeDisplay(id);//切换到home页签
16. }
17. //切换页签的实现函数
18. function changeDisplay(id) {
19. nav_array = Array("uploadpart", "createclasspart", "createtargetpart", "home");
20. for (e in nav_array) {
21. if (nav_array[e] == id) {
22. document.getElementById(nav_array[e]).style.cssText = "display:block;";
23. } else {
24. document.getElementById(nav_array[e]).style.cssText = "display:none;";
25. }
26. }
27. }