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

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

 1WebRequest req = HttpWebRequest.Create(img_src);
 2req.Credentials = new NetworkCredential(ConfigurationManager.AppSettings["AdminUser"], ConfigurationManager.AppSettings["AdminPass"], ConfigurationManager.AppSettings["AdminDomain"]);
 3HtmlImage img = (HtmlImage)e.Item.FindControl("imgPhoto");
 4if (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]

在客户端添加如下代码：

 1function 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    
15function 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的引用。