html局部刷新页面不跳转

html-css019

html局部刷新页面不跳转,第1张

HTML局部刷新页面不跳转,是指在不刷新整个页面的情况下,只刷新部分内容。这可以通过使用AJAX(Asynchronous JavaScript and XML)来实现,AJAX可以在不重新加载整个页面的情况下,只更新页面的一部分内容。AJAX可以更新页面的一部分内容,而不影响其余部分,从而节省时间和资源,并且可以提高用户体验。

首先,可以明确的是,网页局部刷新是不难实现的,实际上很多网站也是支持的,比如站内信、实时大盘数据之类的应用。

但是为什么很多网站不支持呢?主要原因有几个方面:首先要做好还是需要一些基础设施和技术支持的,另外也需要一些额外的服务器资源。所以一些网站,尤其是传统的网站大多不支持,比如一些新闻站点、公告/公示、内容发布网站等等。

技术实现方案有很多种:

最简单的就是每个一段时间(比如3秒)请求接口更新数据并重新渲染,这么做对服务器压力较大。

其次是通过长连接,就是网页发起一个HTTP请求,服务器端一直不响应,等到有数据更新的时候再吧新数据返回,网页拿到数据后重新渲染,然后再次发起一个HTTP请求,不断这么循环,网页就可以实时拿到最新数据。

更好的方案是通过websocket建立长连接,这样web端和服务器端就可以实时的双向通讯,及时拿到最新数据,看起来与HTTP长连接区别不大,但是因为实现机制不一样,websocket会有更低的资源消耗。

网站不支持并不意味着用户不需要,比如公告/公示网站,商品信息,动态的用户行为、销售等数据,对很多人就非常重要,需要实时关注。这个时候可以通过一些辅助工具完成信息的监控和管理,比如:网页更新提醒浏览器插件

题主可使用javascript里的ajax函数来实现html页面里的局部刷新功能,比如:我只刷新html页面中的某个div,把div中的内容换掉,或者数据更新,可以通过改变ajax函数的url访问路径来实现,可以访问某个目录下的文件,或者发送请求到服务器来刷新数据都可以,这是比较常用的方法,我举个例子:

我在html页面中用ajax来将ajax_info.txt这个本地文本文档中的内容重新刷新加载到id为myDiv的div控件中,而页面不用整个刷新。

ajax_info.txt内容为:

<p>AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

</p>

<p>

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下

</p>

html页面代码为:

<html>

<head>

<meta charset="utf-8">

<script>

function loadXMLDoc()

{

var xmlhttp

if (window.XMLHttpRequest)

{

//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest()

}

else

{

// IE6, IE5 浏览器执行代码

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText

}

}

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true)

xmlhttp.send()

}

</script>

</head>

<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>

<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>

</html>

原本页面效果为:

点击按钮后页面效果为:

题主可以一试,如果觉得繁琐,可以看看jquery的ajax函数,是经过优化和简化的,更方便使用和上手。