异步交互技术在工程中的运用与思考（一)iframe(原创 ,转载请注明出处）

 

前言：

     推广和普及一项新技术，即是技术事务，也是社会行为。早在2000年左右就有不少公司和个人已经在一些B/S结构的程序中用到过客户端和服务器端的异步交互技术，但是在那个时候，internet的普及程度有限，用户量和现在比是少之又少，更何况用户那时只需要上网能看到新闻，能收到邮件，根本不会想到能在不刷新的页面的情况下能收到新邮件和看到新的消息。但是随着internet的发展，各种新概念的网络服务的出现，internet用户对于网络服务的品质要求是越来越高，他们不再满足单纯的看简单的文本信息，他们需要快速的得到丰富各种信息量。于是Ajax出现了，但是显然又不仅仅只有这一种技术可以达到这种效果，本文将对此做比较详细的介绍。

1.1   iframe完成的异步交互效果

该方法完成异步交互的实质其实是让一个页面中间嵌套一个页面，然后在嵌套的页面中

间放入要在客户端与服务器端进行传递的值，最后让页面在视觉上不可见，这样进行数据交互的时候实际上让用户得到的感觉和异步交互的感觉一模一样。

   这种方法尽管在现在技术上的实现涉及的方面不多，但是在很多web站点的设计上是很通用的，因为这种方法简单，容易上手。

1.1.1          iframe完成的异步交互效果的实例

首先在一个页面中放入一个textbox,一个button和一个iframe;我要实现的效果是

在textbox中间输入某个国家的名字，然后点击button确定，最后由iframe中的dropdownlist控件显示出该国家的一些城市的名字。当然,iframe中的dropdownlist控件要单独放入一个新的页面中。现在我们就把这两个页面分别叫做default.aspx和default1.aspx。

在default.aspx中间，控件代码如下

< asp:TextBox  ID ="txtlConutry"  runat ="server" ></ asp:TextBox >
< input  id ="btnOK"  type ="button"  value ="Get City"  onclick ="GetCity()"   />< br  />
  < iframe  id ="frmCity"  src ="default1.aspx"  frameborder ="0"  width ="100"  style ="width: 518px" ></ iframe >

Button 的onclick事件定义如下

function  GetCity()
    ... {
            var Country = document.forms[0].elements['txtlConutry'].value;
            var f = document.getElementById('frmCity');
            f.src = "default1.aspx?country=" + Country;
   }

    这里用到的是?传值，将textbox的值传到iframe中，iframe的具体描述在default1.aspx中有详细的描述。

      下面我们来看default1.aspx中做了哪些事情。

      这个页面中间直接放入一个dropdownlist控件，id为ddlcity。后台代码中只需要给每个传过来的country值赋city值就好了，代码如下：

protected   void  Page_Load( object  sender, EventArgs e)
     ... {
        string country = Request.QueryString["country"];
        if(!String.IsNullOrEmpty(country))
        ...{
            switch (country)
            ...{ 
                case "China":
                    ddlCity.Items.Clear();
                    ddlCity.Items.Add("Beijing");
                    ddlCity.Items.Add("Shanghai");
                    ddlCity.Items.Add("Tianjin");
                    ddlCity.Items.Add("Chongqing");
                    break;
                case "US":
                    ddlCity.Items.Clear();
                    ddlCity.Items.Add("Alabona");
                    ddlCity.Items.Add("California");
                    ddlCity.Items.Add("MaryLand");
                    ddlCity.Items.Add("New York");
                    break;
                default:
                    ddlCity.Items.Clear();
                    ddlCity.Items.Add("No Info");
                    break;
            }
        }
}

这样代码实例完成，运行 default.aspx在textbox中间输入China或者US，下面的dropdownlist马上可以在局部刷新的效果下显示出相应国家的城市。

1.1.2       iframe的局部新效果应用

     在很多项目中，只要用到 dropdownlist这个控件，用iframe来实现局部刷新还是比较普遍的，当然了级联的textbox控件用这种方式也是一个很好的选择。