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
实例二：利用$.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(); }前台获取时间
实例三：使用$.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(); } }前台获取代码：
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格式前台代码：
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 = "" + name + " " + birth + " Xml格式前台代码：