关于web的重定向,js实现重定向的方法

js实现网页的重定向

在学习过程中不经意间就会忽视一些细节部分,而重定向在项目中是会经常遇到的。

什么时候使用重定向?

  • 每当数据更新需要刷新网页的时候(比如 写一条博客提交博文后实时更新)
  • 从后端获取到了数据并跳转到另一个页面的时候(比如 登陆验证后跳转到主页)

什么是重定向

重定向流程

客户浏览器发送http请求——》web服务器接受后发送302状态码响应及对应新的location给客户浏览器——》客户浏览器发现是302响应,则自动再发送一个新的http请求,请求url是新的location地址——》服务器根据此请求寻找资源并发送给客户。在这里location可以重定向到任意URL,既然是浏览器重新发出了请求,则就没有什么request传递的概念了。在客户浏览器路径栏显示的是其重定向的路径,客户可以观察到地址的变化的。重定向行为是浏览器做了至少两次的访问请求的。
发送请求 –>服务器运行–>响应请求,返回给浏览器一个新的地址与响应码–>浏览器根据响应码,判定该响应为重定向,自动发送一个新的请求给服务器,请求地址为之前返回的地址–>服务器运行–>响应请求给浏览器

  重定向流程分两次:第一次,客户端request A,服务器响应,并response回来,告诉浏览器,你应该去B。 

重定向的好处

做增、删、改的时候最好用重定向,因为如果不用重定向,每次刷新页面就相当于再请求一次,就可能会做额外的操作,导致数据不对。
详情.

重定向的几种方法(参照大佬)

<script type="text/javascript">
    window.location.href="http://www.cnblogs.com/Roikehiya/";
</script>
  • 参考MDN官方文档)尽管 window.location 是一个只读 Location 对象,你仍然可以赋给它一个 DOMString。这意味着您可以在大多数情况下处理 location,就像它是一个字符串一样:window.location = ‘http://www.example.com’,是 window.location.href = 'http://www.example.com’的同义词
  • 只要赋给 location 对象一个新值,文档就会使用新的 URL 加载(导航到一个新页面一标题)
<script type="text/javascript">
    alert("返回");
    window.history.back(-1);
</script>
  • MDN_back()
    back()方法会在会话历史记录中向后移动一页。如果没有上一页,则此方法调用不执行任何操作。 要注意是window.history.back()而不是window.back()【已废弃】
<script type="text/javascript">
    window.navigate("http://www.cnblogs.com/Roikehiya/");
</script>
  • window.navigate与第一个window.location.href方法的差异就是由于兼容差的原因 这个能做的window.location.href都能做 它不能做的window.location.href也能做,所以做好还是用window.location.href
<script type="text/javascript">
     self.location='http://www.cnblogs.com/Roikehiya/'; 
</script>
<script type="text/javascript">
    alert("非法访问!");
    top.location='http://www.cnblogs.com/Roikehiya/'; 
</script>>
  • 1.self:当前窗口对象(如果是在iframe里,则为该框架的窗口对象)
  • 2 .top:父窗口对象
这些方法经常会出现在ajax等异步请求中,而在服务端的同步请求则不能使用这些方法
  • 以node为例子
// node.js 的同步请求中实现重定向
//这里我们将网页定向到‘/’路径
res.redirect('/')

而在其他的情况下,你会发现遇到更新数据就去用重定向也是不行的,毕竟页面一直闪烁的体验是很不好的。 针对与这种情况也有其他的方式实现想要使用重定向去实现的功能
  • 例子:基于vue.js的博客发送功能
//这个函数是获取表单的数据并且把数据保存到本地  localStorage
methods: {
                post_cmt() {
                    //发表评论
                    var comment = {
                            id: Date.now(),
                            user: this.user,
                            content: this.content
                        }
                        //从localStorage中获取所有评论
                    var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                    list.unshift(comment)
                        // 保存新数据
                    localStorage.setItem('cmts', JSON.stringify(list))
                    this.user = this.content = ''
                    //重点在这里!!!
                    this.loadComments()
                    //当完成了数据的保存后如果不手动网页刷新时数据是不会在客户端更新的
                    //所以必须在完成后立刻执行loadComments()函数来实现数据的更新
                }

            }
  created() {
  //这个是vue的周期函数
  //当数据和函数加载完后调用此函数
  //实现进入网页后能够加载出保存在本地的数据(博文)
                this.loadComments()
            },
            methods: {
                loadComments() {
                    //从本地的localstorage中加载评论
                    //每调用一次data里的数据都会进行更新从而客户端的数据也有变化更新
                    var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                    this.list = list

                }
            },
  • 虽然例子比较简单,但是在项目中会经常出现,如果在平常忽略这个就会跑去重定向 毕竟前端就是一个让数据变化给用户看的功能,数据变换频繁

阿里嘎多

你可能感兴趣的:(前端)