网站开发中web页面跳转几种方式详解

在做web开发中,页面跳转的方式有很多种,然而有些时候这些跳转如何用到恰到好处却很容易被忽视。

客户端触发跳转有如下几种

  1. 使用meta元信息
<!--如下表示5秒后跳转到url指定的链接,推荐使用这种方式-->
<meta http-equiv="refresh" content="5;url=http://my.oschina.net/ososchina/blog">

2.使用javascript中的window.location对象

<!--这里的代码忽略了搜索引擎对于链接价值的转移,它会被当做‘暂时地‘重定向。-->
<script type="text/javascript">
//修改window.location.href
window.location.href =‘http://my.oschina.net/ososchina/blog‘;

//替换url,注意这种方式有时并不是有效的,需要强制reload才行
//window.location.replace(‘http://my.oschina.net/ososchina/blog‘);
//window.location.reload(true);

//修改window导航
//window.navigate (‘http://my.oschina.net/ososchina/blog‘) 
</script>;

补充一点:在html5中,利用新的api实现前端页面mvc的跳转也是一种不错的方式(注意:服务端不跳转),利用这种方式可以实现前端MVC开发

<script type="text/javascript">
var state = { 
action : "page",
 title : "HTML 5 History API simple demo",
url : "yourpage"
};
history.pushState(state, "HTML 5 History API simple demo", state.url);
window.onpopstate = function (e) {
switch (e.state.action) {
 case "home" :
    document.title = "HOME ……";
    $.get("index.php").done(function (data) { $("#wrapper").html(data); });
     break;
   case "page" :
     document.title = e.state.title;
     $.get(e.state.url).done(function (data) { $("#wrapper").html(data); });
   break;
 }
}
</script>;

以上是客户端触发的跳转

-------------------------------------------------------------------------------------------

服务端触发的跳转的方式

  1. php中使用header跳转
header(‘Location:http://my.oschina.net/ososchina/blog‘); 
//这里的代码忽略了搜索引擎对于链接价值的转移,它会被当做‘暂时地‘重定向。

推荐使用下面的方式

header(‘HTTP/1.1 301 Moved Permanently‘);//固定重定向
header(‘Location: http://my.oschina.net/ososchina/blog‘);

有时,设置http 响应头是非常重要的,这些可以帮助搜索引擎和浏览器“理解”请求的状态

下面提供一种发送http响应头的php函数

/**
 * 发送HTTP状态
 * @param integer $code 状态码
 * @return void
 */
function send_http_status($code) {
    static $_status = array(
            // Informational 1xx
            100 => ‘Continue‘,
            101 => ‘Switching Protocols‘,
            // Success 2xx
            200 => ‘OK‘,
            201 => ‘Created‘,
            202 => ‘Accepted‘,
            203 => ‘Non-Authoritative Information‘,
            204 => ‘No Content‘,
            205 => ‘Reset Content‘,
            206 => ‘Partial Content‘,
            // Redirection 3xx
            300 => ‘Multiple Choices‘,
            301 => ‘Moved Permanently‘,
            302 => ‘Moved Temporarily ‘,  // 1.1
            303 => ‘See Other‘,
            304 => ‘Not Modified‘,
            305 => ‘Use Proxy‘,
            // 306 is deprecated but reserved
            307 => ‘Temporary Redirect‘,
            // Client Error 4xx
            400 => ‘Bad Request‘,
            401 => ‘Unauthorized‘,
            402 => ‘Payment Required‘,
            403 => ‘Forbidden‘,
            404 => ‘Not Found‘,
            405 => ‘Method Not Allowed‘,
            406 => ‘Not Acceptable‘,
            407 => ‘Proxy Authentication Required‘,
            408 => ‘Request Timeout‘,
            409 => ‘Conflict‘,
            410 => ‘Gone‘,
            411 => ‘Length Required‘,
            412 => ‘Precondition Failed‘,
            413 => ‘Request Entity Too Large‘,
            414 => ‘Request-URI Too Long‘,
            415 => ‘Unsupported Media Type‘,
            416 => ‘Requested Range Not Satisfiable‘,
            417 => ‘Expectation Failed‘,
            // Server Error 5xx
            500 => ‘Internal Server Error‘,
            501 => ‘Not Implemented‘,
            502 => ‘Bad Gateway‘,
            503 => ‘Service Unavailable‘,
            504 => ‘Gateway Timeout‘,
            505 => ‘HTTP Version Not Supported‘,
            509 => ‘Bandwidth Limit Exceeded‘
    );
    if(isset($_status[$code])) {
        header(‘HTTP/1.1 ‘.$code.‘ ‘.$_status[$code]);
        // 确保FastCGI模式下正常
        header(‘Status:‘.$code.‘ ‘.$_status[$code]);
    }
}

然后我们来优化一下

send_http_status(‘301‘);//固定重定向
header(‘Location: http://google.com/‘);

问题来了:这里挖掘机技术必须强,使用http响应后需要注意的是,在响应头发送之前必须没有输出流输出内容,因此,这种让人满意的方法有时并不适用;下面进行改造:

<?php
// 如果之前沒有任何輸出, 就送出 Location 的導向資訊
if (!headers_sent()) {
    send_http_status(‘301‘);//固定重定向
    header(‘Location: http://my.oschina.net/ososchina/blog‘);
    exit;
}else{
  echo "<script type=‘text/javascript‘>";
  echo "window.location.href =‘http://my.oschina.net/ososchina/blog‘;"
  echo ‘</script>‘
}
?>

--------------------------------------------------------------------------------

在页面有2个红色的词语“触发”,这里的意思是通过触发事件来进行跳转的,在http请求中(http基于tcp连接),一般是 “请求-应答”模式,但这种模式是独立于页面跳转的。

实际上页面跳转分为2中方式 :客户端跳转,客户端和服务端一起跳转

客户端跳转在目前mvc主流框架中使用较为广泛,这种跳转一般通过服务端控制(Controller)触发,如j2ee servlet中的Dispatcher和forward以及php中的include,display,客户端和服务端一起跳转一般具有强制性,这个无论前端和后端均可使用,但后端使用的一个好处是可以发送状态码,对于SEO等工作具有很多好处。


时间: 2024-10-07 05:16:20

网站开发中web页面跳转几种方式详解的相关文章

WEB开发中的页面跳转方法总结

PHP header()函数跳转 PHP的header()函数非常强大,其中在页面url跳转方面也调用简单,使用header()直接跳转到指定url页面,这时页面跳转是302重定向: $url = "http://www.helloweba.com/";   header( "Location: $url" );  我们有可能会遇到特殊的跳转时,比如网站改版有个页面地址要做301重定向,当然你可以通过web配置rewrite来实现,但现在我要告诉大家,可以使用php

php开发中的页面跳转方法总结

PHP页面跳转实现的功能就是将网站中一个网页跳转到另一个网页中.对于刚刚学习PHP语言的朋友来说,是必须要掌握的基础方法. 页面跳转可能是由于用户单击链接.按钮等触发的,也可能是系统自动产生的.页面自动跳转在WEB开发中经常用到,而且根据需求可以采用不同的跳转方式,比如提示操作信息后延时跳转等, 本文总结了WEB开发中常见的几种页面跳转方法. PHP header()函数跳转 PHP的header()函数非常强大,其中在页面url跳转方面也调用简单,使用header()直接跳转到指定url页面,

Web开发中 前端路由 实现的几种方式和适用场景

浅析Web开发中前端路由实现的几种方式 主题 Web开发 故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因- 叙事体故事讲完,

页面跳转两种方式

在界面显示过程用,一般都是通过用户提交页面请求到Servlet,在通过Servlet处理后跳转到相应的界面,进行数据的显示.一般页面跳转有两种方式,分别是重定向(response.sendRedirect)和转发(request.getRequestDispatcher).下面分别来看这两种方式是如何进行实现的(以下代码是在Servlet中进行页面跳转操作的): 1.重定向(response.sendRedirect)方式 ItemManager itemManager=new ItemMana

浅析Web开发中前端路由实现的几种方式

故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因… 叙事体故事讲完,进入正题.首先,我们知道传统而经典的Web开发中,服务器端

030. asp.net中DataList数据绑定跳转(两种方式)的完整示例

前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" MaintainScrollPositionOnPostback="true" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

【Android开发学习笔记之一】5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(TableLayout):按照行列方式布局组件. 相对布局(RelativeLayout):相对其它组件的布局方式. 绝对布局(AbsoluteLayout):按照绝对坐标来布局组件. 1. 线性布局 线性布局是Android开发中最常见的一种布局方式,它是按照垂直或者水平方向来布局,通过“android:

Java Web学习(三)数据加密方式详解

本文借鉴:chengbinbbs,FKNIGHT0X,Central-Perk(特此感谢!) 对称加密 定义:加密和解密使用相同密钥的算法. 常见的有DES.3DES.AES.PBE等加密算法,这几种算法安全性依次是逐渐增强的. DES加密 特点:简便.密钥长度比较短. /** * DES加密介绍 * DES是一种对称加密算法,所谓对称加密算法即:加密和解密使用相同密钥的算法.DES加密算法出自IBM的研究, * 后来被美国政府正式采用,之后开始广泛流传,但是近些年使用越来越少,因为DES使用5

web项目中实现页面跳转的两种方式

<a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> 跳转在网页本身,URL 改变 java web项目中实现页面跳转的主要方式有两种:第一种,<% response.sendRedirect("index.jsp");%>第二种<jsp:forward page="index.jsp"/>我做