1、Form方式。Form方式是最基本的向服务器提交数据的方式。
一个小例子:运行效果图为:
看一下前台代码:
在这里,<form></form>之中的代码为一个提交域,当页面提交时,其中的数据也提交到服务器中。
后台代码为(即为服务器中的代码),当页面点击登录按钮登陆后,页面上的数据以表单的形式提交到服务器中,以供服务器进行验证。
2、url形式
具体做法即通过url地址栏的形式传递数据到服务端。
3、xml形式。
这种方式相对于前两种有点特殊。前两种都能传递数据,但是都有一个问题,就是提交数据后,界面都会刷新,由于web是无状态的,所以,我们必须通过代码来维持页面上的状态。要是少数据量的话,频繁的刷新页面造成的影响还不会很明显。可是,如果要频繁的与服务器进行交互呢,比如定时更新界面显示的某个数据的值。而且,有时候,我们是不需要界面进行刷新的,甚至是不能让界面进行刷新的(比如动态生成控件刷新后会消失,空间中的值也不会保存)。此时,xml与数据库进行交互的形式就帮了大忙了。因为他可以无刷新的与数据库进行交互。
来看个登录的小例子哈,虽说例子有点牵强,但咱主要讲的是个道理O(∩_∩)O~:
先来看效果图:
界面显示出来时,我们点击登录按钮,如果登录信息正确,则后面给出提示,欢迎欢迎。这个例子不同的地方在于他并没有刷新这个登陆界面哦。下面来看一下代码实现:
先来看一下程序整体结构图:
这里,Default2为启动界面,即登录主界面,而Default只是为Default2服务的一个界面,这里也可以用.ashx文件。因为窗体的前台页面是用不着的,只是用它的后台。这个例子可能并不能体现xml的优势,只是简单的说明一下实现的原理。
来看一下两个页面的前台代码:
Default2
这里是主界面,与服务器交互也从这里开始
Default
好的,前台看完了,咱来看看后台是怎么实现的
按顺序来,我们知道从登录按钮之后,它触发的是js事件,那我们来看一下js的代码
好,言归正传,当xmlhttp对象req调用req.open时,url所在服务端就已经开始执行了,那服务端是如何执行的呢?我们来看一下
这里对输入的用户名密码进行了校验,正确的话会返回true。在js的回调函数callback中能够接收到这个值,并根据返回的值来判定是否要给Default2的界面显示登录正确的信息。
文中所用到部分代码:
js代码
var req; //定义变量用来创建xmlhttprequest对象
function creatReq() {
var userName = document.getElementById("txtUser").value;
var pwd = document.getElementById("txtPWD").value;
var url = "Default.aspx?userName="+userName+"&pwd="+pwd;
if (window.XMLHttpRequest){ //非IE浏览器及IE7(7.0及以上版本),用XMLRequest对象创建
req = new XMLHttpRequest();
}
else if (window.ActiveXObject){ //IE(6.0及以下版本)浏览器用activeObject对象创建,如果用户浏览器禁用了Activex,可能会失败
req = new ActiveXObject("Microsoft.XMLHttp");
}
if (req){ //成功创建xmlhttprequest
req.open("Post", url, true); //与服务端建立连接(请求方式post或get,地址,异步)
req.onreadystatechange = callback; //指明回调函数
req.send(null); //发送请求
}
}
function callback() { //回调函数,对服务端的响应处理,监视response状态
if (req.readyState == 4) { //请求状态为4表示成功
if (req.status == 200) {
// document.getElementById("lable2").value = Session.["welecome"].toString;
if (((String)(req.responseText)).substr(0, 4) == "true") {
document.getElementById("lable2").innerText = "欢迎欢迎哈O(∩_∩)O~";
}
}
else { //http返回状态失败
alert("服务端返回状态" + req.statusText);
}
}
}
//在点击登录按钮时,触发此js事件
function judge() {
creatReq();
}
Default.cs代码
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//获取用户名
string userName = Request.QueryString["userName"].ToString();
//获取密码
string pwd = Request.QueryString["pwd"].ToString();
if (userName=="yanmei" && pwd=="123")
{
//如果验证通过,返回真
Response.Write("true");
}
}
}