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

来源：互联网发布：大连谭作钧人工智能编辑：程序博客网时间：2024/06/06 01:24

【需求描述】

在进行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" onclick="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;";}}}

0 0