使用ASP.NET AJAX调用后台WebService优化网站性能实例

最近发现，老的员工信息显示页面效率极低，研究发现，原来是显示员工照片的问题。后台会在显示页面之前逐一检查员工照片是否存在。代码为：

 1 WebRequest req  =  HttpWebRequest.Create(img_src);
 2 req.Credentials  =   new  NetworkCredential(ConfigurationManager.AppSettings[ " AdminUser " ], ConfigurationManager.AppSettings[ " AdminPass " ], ConfigurationManager.AppSettings[ " AdminDomain " ]);
 3 HtmlImage img  =  (HtmlImage)e.Item.FindControl( " imgPhoto " );
 4 if  (img  !=   null ) 
 5 {
 6    try 
 7    {
 8             req.GetResponse();//如果不存在，就会报异常。
 9         img.Src = img_src;
10        } 
11    catch (Exception ex) 
12    {
13            img.Src = ConfigurationManager.AppSettings["Ubi1Url"] +                 "PeopleImages/.jpg?t=" + DateTime.Now.Ticks;
14     }
15}

这段代码消耗很大。其实最开始图片是不显示的，只有在鼠标放上去时才显示。所以最后决定将其移出，放入一个WebService中。

 1 [WebMethod]
 2   public   string  ValidImageLocation( string  img_src)
 3      {
 4        WebRequest req = HttpWebRequest.Create(img_src);
 5        req.Credentials = new NetworkCredential(ConfigurationManager.AppSettings["AdminUser"], ConfigurationManager.AppSettings["AdminPass"], ConfigurationManager.AppSettings["AdminDomain"]);
 6        
 7        try
 8        {
 9            req.GetResponse();
10            return img_src;
11        }
12        catch (Exception ex)
13        {
14            return ConfigurationManager.AppSettings["Ubi1Url"] + "PeopleImages/.jpg?t=" + DateTime.Now.Ticks;
15        }
16    }

传进来的是我们要用的地址。先判断它是否存在，存在的话原样返回，否则返回备用的地址。注意使用[ScriptService]

在客户端添加如下代码：

 1 function ShowPicture(el) // 鼠标放上去时触发
 2 {
 3    tem = el;
 4    var img = "";
 5    var parent = el.parentNode;
 6    var imgs = parent.getElementsByTagName("img");
 7    if(imgs.length>0)
 8    {
 9        img = imgs[0];
10        ImageService.ValidImageLocation(img.src,Finished);//调用WebService方法，得到可用的地址。
11        img.style.display = "";
12    }
13}
14     
15 function Finished(infor)
16 {
17    var img = "";
18    var parent = tem.parentNode;
19    var imgs = parent.getElementsByTagName("img");
20    if(imgs.length>0)
21    {
22        img = imgs[0];
23        img.src = infor;
24    }
25}

注意在ScriptManager中添加对WebService的引用。