客户端与服务器进行交互的三种方式

1、Form方式。Form方式是最基本的向服务器提交数据的方式。

一个小例子:运行效果图为：

看一下前台代码：

在这里，<form></form>之中的代码为一个提交域，当页面提交时，其中的数据也提交到服务器中。

后台代码为（即为服务器中的代码），当页面点击登录按钮登陆后，页面上的数据以表单的形式提交到服务器中，以供服务器进行验证。

 2、url形式

具体做法即通过url地址栏的形式传递数据到服务端。

3、xml形式。

       这种方式相对于前两种有点特殊。前两种都能传递数据，但是都有一个问题，就是提交数据后，界面都会刷新，由于web是无状态的，所以，我们必须通过代码来维持页面上的状态。要是少数据量的话，频繁的刷新页面造成的影响还不会很明显。可是，如果要频繁的与服务器进行交互呢，比如定时更新界面显示的某个数据的值。而且，有时候，我们是不需要界面进行刷新的，甚至是不能让界面进行刷新的（比如动态生成控件刷新后会消失，空间中的值也不会保存）。此时，xml与数据库进行交互的形式就帮了大忙了。因为他可以无刷新的与数据库进行交互。

 来看个登录的小例子哈，虽说例子有点牵强，但咱主要讲的是个道理O(∩_∩)O~：

 先来看效果图：

 界面显示出来时，我们点击登录按钮，如果登录信息正确，则后面给出提示，欢迎欢迎。这个例子不同的地方在于他并没有刷新这个登陆界面哦。下面来看一下代码实现：

先来看一下程序整体结构图：

 

 

这里，Default2为启动界面，即登录主界面，而Default只是为Default2服务的一个界面，这里也可以用.ashx文件。因为窗体的前台页面是用不着的，只是用它的后台。这个例子可能并不能体现xml的优势，只是简单的说明一下实现的原理。

 

 

来看一下两个页面的前台代码：

Default2

这里是主界面，与服务器交互也从这里开始

Default

 可以看出这是一个空的界面，只是为了作为服务器与Default2的客户端进行交互的。

好的，前台看完了，咱来看看后台是怎么实现的

按顺序来，我们知道从登录按钮之后，它触发的是js事件，那我们来看一下js的代码

 

 这里顺便解释一下url，可以看到url变量为Default.aspx?userName="+userName+"&pwd="+pwd;他除了传了个链接之外，他还传了两个参数。他可以实现变量跨界面传递。

好，言归正传，当xmlhttp对象req调用req.open时，url所在服务端就已经开始执行了，那服务端是如何执行的呢？我们来看一下

这里对输入的用户名密码进行了校验，正确的话会返回true。在js的回调函数callback中能够接收到这个值，并根据返回的值来判定是否要给Default2的界面显示登录正确的信息。

 

参考文献：XMLHttpRequest Ajax 实例简介 

                 浅谈B/S客户端与服务器交互数据 

 

 

文中所用到部分代码：  

 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");
        }
    }
}