AJAX调用方式总结(4)

长篇大论来讲述什么是AJAX，怎么使用AJAX，这样我总觉得太理论化了，接受起来会有一定的难度...所以，本篇博客的另一个主旨是：从实例入手，由浅到深。

实例四：ajax调用wcf获取数据

首先贴上模块图：

 

首先定义好数据契约和操作契约，贴上StudentService.svc代码：

StudentService.svc  
 namespace ajaxwcf  
 {  
     [ServiceContract(Namespace = "")]  
     [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]  
     public class StudentService  
     {  
         // 要使用 HTTP GET，请添加 [WebGet] 特性。(默认 ResponseFormat 为 WebMessageFormat.Json)  
         // 要创建返回 XML 的操作，  
         //     请添加 [WebGet(ResponseFormat=WebMessageFormat.Xml)]，  
         //     并在操作正文中包括以下行:  
         //         WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";  
         [OperationContract]  
         //获取学生数据  
         public List<Student> GetStudents()  
         {  
             string sqlConn = ConfigurationManager.ConnectionStrings["SqlConn"].ConnectionString;  
             SqlConnection conn = new SqlConnection(sqlConn);  
             SqlDataAdapter da = new SqlDataAdapter("select * from AJAX_Tab", conn);  
             DataSet ds = new DataSet();  
             da.Fill(ds);  
             List<Student> Stulis = new List<Student>();  
             DataTable dt = ds.Tables[0];  
             Student student = null;  
             foreach (DataRow row in dt.Rows)  
             {  
                 student = new Student();  
                 student.Sname = row["sname"].ToString();  
                 student.Sage = row["sage"].ToString();  
                 student.Sadd = row["sadd"].ToString();  
   
                 Stulis.Add(student);  
             }  
   
             return Stulis;  
         }  
     }  
   
     //数据契约  
     [DataContract]  
     public class Student  
     {  
         private string sname;  
   
         [DataMember]  
         public string Sname  
         {  
             get { return sname; }  
             set { sname = value; }  
         }  
         private string sage;  
   
         [DataMember]  
         public string Sage  
         {  
             get { return sage; }  
             set { sage = value; }  
         }  
         private string sadd;  
   
         [DataMember]  
         public string Sadd  
         {  
             get { return sadd; }  
             set { sadd = value; }  
         }  
     }  
 } 

在web.config中进行配置，上代码：

web.config   
  <system.serviceModel>  
         <behaviors>  
             <endpointBehaviors>  
                 <behavior name="ajaxwcf.StudentServiceAspNetAjaxBehavior">  
                     <enableWebScript />  
                 </behavior>  
             </endpointBehaviors>  
             <serviceBehaviors>  
                 <behavior name="MyServiceTypeBehaviors">  
                     <serviceMetadata httpGetEnabled="true" />  
                 </behavior>  
                 <behavior name="">  
                     <serviceMetadata httpGetEnabled="true" />  
                     <serviceDebug includeExceptionDetailInFaults="false" />  
                 </behavior>  
             </serviceBehaviors>  
         </behaviors>  
         <serviceHostingEnvironment aspNetCompatibilityEnabled="true" 
             multipleSiteBindingsEnabled="true" />  
         <services>  
             <service name="ajaxwcf.StudentService" behaviorConfiguration="MyServiceTypeBehaviors">  
                 <endpoint address="" behaviorConfiguration="ajaxwcf.StudentServiceAspNetAjaxBehavior" 
                     binding="webHttpBinding" contract="ajaxwcf.StudentService" />  
             </service>  
         </services>  
     </system.serviceModel> 

好了，这样wcf就配置好了，接下去就是页面端的调用了，贴上ajax_wcf.aspx前台页面代码：

<script type="text/javascript">  
       //载入WCF  
       function loadWCF() {  
          var student = new StudentService();    
          arr = student.GetStudents(succeededCallback, filedCallback);           
       }  
       //成功  
       function succeededCallback(result, userContext, methodName) {  
           var arr = new Array();  
           arr = result;  
           //动态创建表格信息 并赋值  
           var table = document.getElementById("ajaxTab");  
           for (var i = 0; i < arr.length; i++) {  
               var tr = document.createElement("tr");  
               var td1 = document.createElement("td");  
               td1.innerHTML = arr[i].Sname;  
 
               var td2 = document.createElement("td");  
               td2.innerHTML = arr[i].Sage;  
 
               var td3 = document.createElement("td");  
               td3.innerHTML = arr[i].Sadd;  
 
 
               tr.appendChild(td1);  
               tr.appendChild(td2);  
               tr.appendChild(td3);  
 
               table.appendChild(tr);  
           }  
       }  
 
       //失败  
       function filedCallback(error,userContext,methodName) {  
           alert("Error!");  
        } 

这样整个项目就完成了，接下去贴效果：

调用前：

 

调用后：