长篇大论来讲述什么是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!");
- }
这样整个项目就完成了,接下去贴效果:
调用前:
调用后: