Ajax实现无刷新导航

最新推荐文章于 2024-09-22 21:46:54 发布

Yizero

最新推荐文章于 2024-09-22 21:46:54 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： ajax dreamweaver xmlhttprequest mozilla function safari

本文链接：https://blog.csdn.net/wjq3714/article/details/5443820

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax

我们知道，常见的导航一般就是 <a href="index.php">首页</a> 这样的，点击标签就转到下一个页面。最近在学习Ajax，于是就想到做一个无刷新的导航来练习一下，操作如下：

新建一个index.html,代码：

<html> <head> <title>Yizero Ajax learning</title> <meta http-equiv="content-type" content="text/html;charset = utf-8"/> <mce:script type="text/javascript"></mce:script> <body onLoad="makerequest('content1.html','hw')"> <div align = "center"> <a href="" onclick = "makerequest('content1.html','hw'); return false;">Page1</a> <a href="" onclick = "makerequest('content2.html','hw'); return false;">page2</a> <a href="" onclick = "makerequest('content3.html','hw'); return false;">page3</a> <a href="" onclick = "makerequest('content4.html','hw'); return false;">page4</a> <div id = "hw"></div> </div> </body> </html>

然后再新建相应的content1.html,content2.html,content3.html,content4.html最好写上不同的内容以示区分。

另外需要说明的是，http_request.responseText这个返回的内容是以utf-8编码的，而如果我们用Dreamweaver去写html,它默认的是gb2312编码格式，这样就会导致乱码的出现。我们可以手动修改Dreamweaver的编码格式：修改-->页面属性-->标题/编码-->编码，然后选择utf-8即可。

see Yizero by yizero.com