AJAX在静态HTML页面中实现权限控制的应用

2016-02-19 15:33 45 1 收藏

下面图老师小编要向大家介绍下AJAX在静态HTML页面中实现权限控制的应用,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

  最近做了一个铁路局的行车规则发布系统,有点类似于一个新闻发布系统.因为数据量大,为了加快访问的速度,我把里面的规则在后台添加时生成了静态页面保存在硬盘上, 这样每次访问就不必要去数据库取数据了.但是一个问题出现了,就 是这些规则都需要登陆之后才能访问,没登陆是不允许访问的,所以必须在这些静态页面上进行权限的控制,那么在静态页面中怎么判断用户是否登陆了呢......??

  最近刚学了点AJAX,这时就派上用场了,呵呵,AJAX可以异步发送请求到服务器,然后返回一个结果,呵呵,那么这正好是我需要的,解决思路如下:

  在静态页面的模版页中写一段javascript代码,用来发送请求到服务器,在服务器端写一段代码用来检查用户是否登陆,然后返回一个结果给这个html页面,html页面根据返回的结果决定是显示还是转到登陆页面强制用户登陆,到此,问题的解决思路应该明了了,下面来看看实现的代码:

  HTML模版页TemplateRules.html代码:
  由于模版页比较长,这里只登出AJAX代码部分,即Body标签前面的部分

  !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  script type="text/javascript" language="javascript"
  //创建适用用与多种浏览器的XMLHttpRequest对象的函数
  function getXMLRequester( ){
  var xmlhttp_request = false;
  try{
  if( window.ActiveXObject ){
  for( var i = 5; i; i-- ){
  try{
  if( i == 2 ){xmlhttp_request=newActiveXObject("Microsoft.XMLHTTP");
  }else{xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0");
  xmlhttp_request.setRequestHeader("Content-Type","text/xml");xmlhttp_request.setRequestHeader("Content-Type","gb2312");
  }
  break;}
  catch(e){
  xmlhttp_request = false;
  }
  }
  }else if( window.XMLHttpRequest ){
 xmlhttp_request = new XMLHttpRequest();
  if (xmlhttp_request.overrideMimeType) {
  xmlhttp_request.overrideMimeType('text/xml');
  }
  }
  }
  catch(e){
  xmlhttp_request = false;
  }
  return xmlhttp_request ;
  }
  function IDRequest() {
  //定义收到服务器的响应后需要执行的JavaScript函数
  url='CheckLogin.aspx'//定义网址参数
  //alert(url);
  xmlhttp_request=getXMLRequester();//调用创建XMLHttpRequest的函数
  xmlhttp_request.onreadystatechange = doContents;//调用doContents函数
  xmlhttp_request.open('POST', url, true);
  xmlhttp_request.send(null);
  }
  function doContents() {
  if (xmlhttp_request.readyState == 4) {// 收到完整的服务器响应
  if (xmlhttp_request.status == 200) {//HTTP服务器响应的值OK
  var str = xmlhttp_request.responseText;//将服务器返回的字符串写到页面中ID为message的区域
  if(str.length583)
  {
  //self.location="../login.aspx";
  location.href='../Login.aspx';

  }
  } else {
  alert(http_request.status);
  }
  }
  }
  IDRequest();
  /script
  html xmlns="http://www.w3.org/1999/xhtml"
  head runat="server"
  title$Chapter$--$Order$--$Title$/title
  link href="../StyleSheet.css" rel="stylesheet" type="text/css" /
  /head

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

 

  此处要提一下:上面文件中的以下代码部分是根据服务器端返回结果决定是否强制登陆的关键部分,因为我们是通过xmlhttp_request.responseText;来看返回结果的,而这个返回文本是服务器端页面的html,所以在此处我们通过返回的这个文本长度来判断服务器端返回的是已登陆还是未登陆,如果已登陆则长度肯定小于583,(当然这个长度会因为每个人的做法不同而不同,可根据实际情况来确定一下服务器端的文件HTML的长度),这样就可以进行判断了

  var str = xmlhttp_request.responseText;//将服务器返回的字符串

写到页面中ID为message的区域
  if(str.length583)
  {
  //self.location="../login.aspx";
  location.href='../Login.aspx';

  }
  } else {
  alert(http_request.status);
  }

  接下来就是服务器端用来检测是否登陆的页面checklogin.ascx的代码(很简单):
  using System;
  using System.Data;
  using System.Configuration;
  using System.Collections;
  using System.Web;
  using System.Web.Security;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using System.Web.UI.WebControls.WebParts;
  using System.Web.UI.HtmlControls;

  public partial class CheckLogin : System.Web.UI.Page
  {
  protected void Page_Load(object sender, EventArgs e)
  {
  if (Request.Cookies["UserInfo"] == null ||   Request.Cookies["UserInfo"].Values["UserName"].ToString() == "")
  {
  Response.Write("111111111111111111111111111111111111111111");//输出不同长度的字符串
  }
  else
  Response.Write("1");
  }
  }
  就这样,通过上面的HTML模版页生成的规则就可以进行用户权限控制了

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1609868.html

延伸阅读
标签: Web开发
//request.html script type="text/javascript" var xmlHttp; function createXMLHttpRequest() { //创建一个xmlHttpRequest对象 if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function dealAct(){ var url = "requestPage.ph...
标签: Web开发
//request.html script type="text/javascript" var xmlHttp; function createXMLHttpRequest() { //创建一个xmlHttpRequest对象     if (window.ActiveXObject) {         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");     }     else if (window.XMLHttpRequest) { &nb...
标签: Web开发
随着AJAX范例得到越来越广泛的应用,浏览器页面可以在向后台服务器请求数据的同时保持前端用户界面的活跃性(因此在AJAX中称为异步)。然而,当这两个活动同时访问共用的JavaScript和DOM数据结构时就会引发问题。JavaScript没有提供针对该并发程序问题的经典解决方案。本文描述了作者在互斥机制方面的新见解,该经过验证的互斥机制在JavaSc...
标签: Web开发
HTML与CSS在Flash中的应用: 不小心看到同事Den在弄个小东西:在Flash里使用HTML和CSS,代码是这样:  Example Source Code var myStyle:TextField.StyleSheet = new TextField.StyleSheet(); myStyle.load("sample.css"); content_txt.styleSheet = myStyle; content_txt.multiline= true; content_txt.wordWrap = true; conte...
标签: Web开发
一、起因 在看《Ajax in action》的时候,看到它在介绍Adapter和Facade两种模式。由于目前Web开发的特色,特别是客户端Js脚本的开发,需要面对很多的变化和跨平台的挑战,所以,如果应用Adapter和Facade模式,将会非常有益于提高我们软件的可维护性,以及降低总体开发成本。 二、什么是Adapter和Facade模式 1、Adapter模式 ...

经验教程

384

收藏

17
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部