AJAX的調用方式實例

本篇內容主要講解“AJAX的調用方式實例”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“AJAX的調用方式實例”吧!

實例一：省份-城市的聯級下拉框 

利用AJAX來獲取數據實現聯級下拉框，當省份下拉框的選項發生變化時，城市的選項對應變化，效果如圖：

我們首先來實現后臺，先將數據準備好了在實現前臺獲取數據，【考慮：當我們頁面登錄的時候，我們需要獲取的數據】： 1).省份框中的省份; 2).因為登錄時省份框的第一項選中，所以還需要第一個省份所對應的城市名，好了，需求知道了，代碼就好寫了，直接貼上后臺代碼：

protected void Page_Load(object sender, EventArgs e)          {              if (Request.QueryString["provid"] != null)              {                  //首先獲取傳遞過來的參數值                  string provId = Request.QueryString["provid"].ToString();                   //查詢所有城市                  string sqlprov = "select * from Provice";                  SqlDataReader reader = DbHelperSQL.ExecuteReader(sqlprov);                  string resultProv = "";                  while (reader.Read())                  {                      string id = reader[0].ToString();                      string provName = reader[1].ToString();                       //字符串拼接，為了前臺獲取時可以切分獲取對應數據，用 '|' 來隔離 各個省份                      resultProv += "|" + string.Format("{0},{1}", id, provName);                  }                  reader.Close();                   //根據省份框的ID來獲取對應的城市名                  string sqlcity =string.Format("select * from City where Proid='{0}'",provId);                  SqlDataReader readercity = DbHelperSQL.ExecuteReader(sqlcity);                  string resultCity = "";                  while (readercity.Read())                  {                      string cityId = readercity[1].ToString();                      string cityName = readercity[2].ToString();                       //同樣用字符串拼接 用 '|' 來隔離 同一省份 的各個城市                      resultCity += "|" + string.Format("{0},{1}", cityId, cityName);                  }                   //去除第一個 '|' ,并且在最后拼接上 '&' 來區分省份和城市                  resultProv = resultProv.Substring(1) + "&";                   //最后的結果形式為【id,省份名|id2,省份名2|....&id,城市名|id2,城市名2|.....】                  string result = resultProv + resultCity.Substring(1);                   Response.Write(result);                  Response.End();              }          }

后臺代碼其實很簡單，就是根據傳過來的參數從數據庫獲取對應的數據，但是這里我們把獲取到得數據最后都用字符串拼接起來了，而且是有規律的拼接，這是為什么呢？其實在注釋上已經講明了，就是為了方便前臺獲取對應的數據了，因為我們是使用后臺返回文本形式的數據，這就是為什么我們拼接字符串了。。

接下來我們來實現前臺，前臺主要的任務就是獲取后臺返回的數據，并實現綁定......也是分塊貼上代碼

//實例化XmlHttpRequest對象   var xhr = null;          function CreateXhr() {              if (window.ActiveXObject)               {                  try                 {                      xhr = new ActiveXObject("Microsoft.XMLHTTP");                  }                  catch (e)                   {                      try                     {                          xhr = new ActiveXObject("Msxml2.XMLHTTP");                      }                      catch (e)                       {                          xhr = null;                      }                  }              }              if (window.XMLHttpRequest) {                  xhr = new XMLHttpRequest();              }               return xhr;          }

當頁面載入時，實現省份框以及第一個省份對應的城市框的綁定，代碼：

//載入綁定省份          function getLoadProv() {             CreateXhr();             xhr.onreadystatechange = WatchState;             xhr.open("get", "getProvCity.aspx?provid=1&time=" + new Date());             xhr.send(null);         }          //監聽載入綁定時狀態         function WatchState() {             if (xhr.readyState == 4 && xhr.status == 200) {                 //1,**|2,**&1,##|2,##                 var result = xhr.responseText;                 var provs = result.split('&')[0].split('|');                 var citys = result.split('&')[1].split('|');                  //省份下拉框清空                 document.forms[0].prov.length = 0;                  //綁定省份框                 for (var i = 0; i < provs.length; i++) {                     var prov = provs[i].split(',');                     //實例化一個選項                     var op = new Option();                     op.value = prov[0];                     op.text = prov[1];                     document.forms[0].prov.options.add(op);                 }                  //城市下拉框清空                 document.forms[0].city.length = 0;                  //綁定城市框                 for (var j = 0; j < citys.length; j++) {                     var city = citys[j].split(',');                     var op = new Option();                     op.value = city[0];                     op.text = city[1];                     document.forms[0].city.options.add(op);                 }                             }         }

當省份框的選項發生變化時實現聯級變化，代碼：

//獲取城市  function GetCity() {           //獲取省份框選中的值      var provId = document.forms[0].prov.value;       CreateXhr();      xhr.onreadystatechange = UpdateCity;      xhr.open("get", "getProvCity.aspx?provid=" + provId + "&time=" + new Date());      xhr.send(null);  }   //修改城市下拉框內容  function UpdateCity() {      if (xhr.readyState == 4 && xhr.status == 200) {          var result = xhr.responseText;          var citys = result.split('&')[1].split('|');          //城市下拉框清空          document.forms[0].city.length = 0;           //綁定城市框          for (var j = 0; j < citys.length; j++) {              var city = citys[j].split(',');              var op = new Option();              op.value = city[0];              op.text = city[1];              document.forms[0].city.options.add(op);          }                      }

前臺html代碼：

html   <body>      <form id="form1" runat="server">      <div>          <select id="prov" onchange="GetCity();">          </select>          <select id="city">          </select>      </div>      </form>  </body>

實例二：利用$.get，$.post方法獲取當前時間

$.get():

定義：get()方法通過遠程HTTP GET請求載入信息

語法：$(selector).get(url,data,success(response,status,xhr),dataType)

參數

url：必須，請求發送的地址。

data：可選，發送到服務器的數據。

success：可選，請求成功時運行的函數

1).response：包含結果的數據

2).status:包含請求的狀態

3).xhr:包含XmlHttpRequest對象

dataType：服務器響應的數據類型，默認將智能判斷

$.post()

定義：post()方法通過遠程HTTP Post請求載入信息

語法：$(selector).post(url,data,success(data,status,jqXHR),dataType)

參數

url：必須，請求發送的地址。

data：可選，發送到服務器的數據。

success：可選，請求成功時運行的函數

1).data：包含結果的數據

2).status:包含請求的狀態

3).jqXHR:包含XmlHttpRequest對象

dataType：服務器響應的數據類型，默認將智能判斷

由于實例相當簡單，直接上所有代碼：

protected void Page_Load(object sender, EventArgs e)         {             string time = "";             //Get             if (Request.QueryString["time"]!=null)             {                 time = "Get:"+ Request.QueryString["time"].ToString();             }             //Post             if (Request.Form["time"] != null)             {                 time = "Post:" + Request.Form["time"].ToString();             }              Response.Write(time + "  現在：" + DateTime.Now.ToString());             Response.End();         }

前臺獲取時間

<script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>   <script type="text/javascript">       $(function () {           //參數：直接在頁面之后加？拼加           $("#btnGet").click(function () {               $.get("data.aspx?time=" + new Date(), Succeed);           });            //參數：使用鍵值來表示需要傳遞的參數           $("#btnPost").click(function () {               $.post("data.aspx", { time: new Date() }, Succeed);           });       });        function Succeed(result) {           $("#tbShow").val(result);       }   </script>

<body>     <form id="form1" runat="server">         <div>           <input type="text" id="tbShow"/>           <input type="button" id="btnGet" value="get方法" />           <input type="button" id="btnPost" value="post方法" />           <input type="button" id="btnAjax" value="ajax方法" />         </div>     </form> </body>

實例三：使用$.ajax實現獲取后臺數據，后臺返回數據格式為text，json，xml三種類型

$.ajax()

定義：ajax()方法通過遠程HTTP請求載入信息

語法：Jquery.ajax([settings])

常用參數[settings]--用于配置Ajax的鍵值對請求

url：必須，請求發送的地址

type: 請求方式

data：可選，發送到服務器的數據

success：可選，請求成功時運行的函數

1).data：包含結果的數據

2).status:包含請求的狀態

3).jqXHR:包含XmlHttpRequest對象

dataType：服務器響應的數據類型，默認將智能判斷

其余參數詳情參見：http://www.w3school.com.cn/jquery/ajax_ajax.asp

1>.test格式 --獲取時間的時，分，秒

后臺代碼：

public partial class textData : System.Web.UI.Page     {         protected void Page_Load(object sender, EventArgs e)         {             string hour = DateTime.Now.Hour.ToString();             string minute = DateTime.Now.Minute.ToString();             string second = DateTime.Now.Second.ToString();              string textStr = hour + "/" + minute + "/" + second;              Response.Write(textStr);              Response.End();         }     }

前臺獲取代碼：

<script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>  <script type="text/javascript">      $(function () {          $("#btnText").click(function () {              $.ajax({                  url: "textData.aspx",                  type: "get",                  dataType: "text",                  success: textSucceed,                  error: Error              });          });       });       //成功      function textSucceed(result) {          $("#tbShow").val(result);      }       //錯誤函數      function Error() {          alert("Error!!!");      }  </script>

2>.Json格式 --獲取時間的時，分，秒

我們需要在后臺返回Json格式的數據，添加一個dll鏈接庫，類似.Net中處理Json數據的API ，如圖：

Json格式后臺代碼：

Json后臺   //添加引用   using Newtonsoft.Json;   namespace AJAX.Json   {       public partial class jsonData : System.Web.UI.Page       {           protected void Page_Load(object sender, EventArgs e)           {               string hour = DateTime.Now.Hour.ToString();               string minute = DateTime.Now.Minute.ToString();               string second = DateTime.Now.Second.ToString();                  //匿名類型               var time = new { h = hour, m = minute, s = second };                  //轉Json格式               var jsonStr = JsonConvert.SerializeObject(new[] { time });                  Response.Write(jsonStr);                  Response.End();           }       }   }

Json格式前臺代碼：

<script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>      <script type="text/javascript">          $("#btnJson").click(function () {              $.ajax({                  url: "jsonData.aspx",                  type: "get",                  dataType: "json",                  success: jsonSuccess,                  error: Error              });          });           //成功          function jsonSuccess(result) {              //[{h:10,m:20,s:30}]              //key:數組元素下標-此時為0              //value:{ h:10,m:20,s:30 }              $.each(result, function (key, value) {                  var h = value.h;                  var m = value.m;                  var s = value.s;                  $("#tbShow").val(h + ":" + m + ":" + s);              });          }                   //錯誤函數          function Error() {              alert("Error!!!");          }      </script>

3>.xml格式--獲取用戶名，出生年月

Xml格式后臺代碼：

//添加引用  using System.Xml;   namespace AJAX.Ajax_Xml  {      public partial class XmlData : System.Web.UI.Page      {          protected void Page_Load(object sender, EventArgs e)          {              string name = "zld";              string birth = "1990-1-8";               //第一種：直接字符串拼接              string xmlStr = "<?xml version=\"1.0\" encoding=\"utf-8\" ?><root><Name>" + name + "</Name><Birth>" + birth + "</Birth></root>";               //第二種：XmlDocument創建               //創建文檔              XmlDocument xmlDocument = new XmlDocument();              //文檔頭聲明              XmlDeclaration xd = xmlDocument.CreateXmlDeclaration("1.0","utf-8",null);              xmlDocument.AppendChild(xd);               //添加根節點              XmlElement root = xmlDocument.CreateElement("root");              xmlDocument.AppendChild(root);               //給根節點添加子節點              XmlElement node1 = xmlDocument.CreateElement("Name");              node1.InnerText = name;              root.AppendChild(node1);               XmlElement node2 = xmlDocument.CreateElement("Birth");              node2.InnerText = birth;              root.AppendChild(node2);               //獲取節點元素              string xmlStr2 = xmlDocument.OuterXml;               Response.Write(xmlStr2);              Response.End();           }      }  }

Xml格式前臺代碼：

<script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>      <script type="text/javascript">          $(function () {              $("#btnXml").click(function () {                  $.ajax({                      url: "XmlData.aspx",                      type: "get",                      dataType: "xml",                      success: Success,                      error: function (result) {                          alert("相應內容非xml格式！");                      }                  });              });          });           function Success(xmlResult) {              //獲取返回結果              var result = xmlResult;              //找尋根節點并循環遍歷              $(result).find('root').each(function (key) {                  //獲取子節點名為Name的值                  var name = $(this).children("Name").text();                  //獲取子節點名為Birth的值                  var birth = $(this).children("Birth").text();                  $("#tbShow").val(name + ":" + birth);              });          }      </scri

實例四：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!");          }

這樣整個項目就完成了，接下去貼效果：

調用前：

調用后：

實例五[補充內容]：Json格式數據的打包和解包方式

在打包和解包中，我們仍舊用到了上面提及的Json數據API，同樣要先添加引用，由于代碼都有了對應的注釋，不再多做文字的贅述，直接貼上代碼和效果吧：

代碼：

 namespace Json打包解包方式   {       class Program       {           static void Main(string[] args)           {               string name = "zld";               int age = 23;               string addr = "nb";                  //----------------------匿名打包-------------------//               //創建匿名類型               var temClass = new { Name = name, Age = age, Addr = addr };                             Console.WriteLine("----------通過匿名打包------------");               //打包成單個Json對象               var jsonStr1 = JsonConvert.SerializeObject(temClass);                  Console.WriteLine("打包單個對象后:\n{0}", jsonStr1);               Console.WriteLine();                  //打包成Json數組               var jsonStr2 = JsonConvert.SerializeObject(new[] { temClass,temClass });                  Console.WriteLine("打包Json數組后：\n{0}", jsonStr2);               Console.WriteLine();                  //----------------------匿名解包-------------------//               Console.WriteLine("----------通過匿名解包------------");               //匿名解包               var temClass2 = JsonConvert.DeserializeAnonymousType(jsonStr1, temClass);               Console.WriteLine("匿名解包后：\n Name={0},Age={1},Addr={2}",temClass2.Name,temClass2.Age,temClass2.Addr);               Console.WriteLine();                  //提取局部信息               var temClass3 = JsonConvert.DeserializeAnonymousType(jsonStr1, new { Name = name, Addr = addr });               Console.WriteLine("匿名解包局部信息后: \n Name={0},Addr={1}", temClass3.Name, temClass3.Addr);               Console.WriteLine();                  //解包成數組對象【jsonStr2：數組對象】               var temClass4 = JsonConvert.DeserializeAnonymousType(jsonStr2, new[] { temClass });               //數組 foreach循環遍歷               foreach(var item in temClass4)               {                   Console.WriteLine("匿名解包為數組后: \n Name={0},Age={1},Addr={2}",item.Name,item.Age,item.Addr);               }               Console.WriteLine();                  //----------------------通過類打包-------------------//               //實例化一個類對象               MyObj mo = new MyObj() { Name = name, Age = age, Addr = addr };                  Console.WriteLine("----------通過類打包------------");               //單個對象打包               var temClass5 = JsonConvert.SerializeObject(mo);               Console.WriteLine("類打包后：\n{0}", temClass5);               Console.WriteLine();                  //打包成集合(數組 泛型)               var temClass6 = JsonConvert.SerializeObject(new[] { mo,mo });               Console.WriteLine("類打包成數組后：\n{0}", temClass6);               Console.WriteLine();                  var temClass7=JsonConvert.SerializeObject(new List<MyObj>{mo,mo});               Console.WriteLine("類打包成泛型后：\n{0}", temClass6);               Console.WriteLine();                  Console.WriteLine("----------通過類解包------------");                  var temClass8 = JsonConvert.DeserializeObject<MyObj>(temClass5);               Console.WriteLine("類解包單個對象后：\n Name={0},Age={1},Addr={2}", temClass8.Name, temClass8.Age, temClass8.Addr);               Console.WriteLine();                  var temClass9 = JsonConvert.DeserializeObject<List<MyObj>>(temClass6);               foreach(MyObj item in temClass9)               {                   Console.WriteLine("類解包泛型后：\n Name={0},Age={1},Addr={2}", item.Name, item.Age, item.Addr);               }                  Console.ReadKey();                         }       }          //定義一個類型       public class MyObj       {           public string Name { get; set; }           public int Age { get; set; }           public string Addr { get; set; }       }   }

效果圖：

到此，相信大家對“AJAX的調用方式實例”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！