最近用了近两天的时间对AJAX的知识进行了一个梳理,觉得是时候对AJAX的相关知识点做个总结了.....这当然也就是本篇博客的主旨了....我也不是很赞成用长篇大论来讲述什么是AJAX,怎么使用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对象 1 //实例化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;}

实例化XmlHttpRequest对象

当页面载入时,实现省份框以及第一个省份对应的城市框的绑定,代码:

载入绑定 1  //载入绑定省份
        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);}                }}

载入绑定

当省份框的选项发生变化时实现联级变化,代码:

省份变化绑定 1         //获取城市
        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代码:

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

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 = "";//Getif (Request.QueryString["time"]!=null){time = "Get:"+ Request.QueryString["time"].ToString();}//Postif (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>

html

实例三:使用$.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();}}

text后台

前台获取代码:

<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>

text前台

2>.Json格式 --获取时间的时,分,秒

我们需要在后台返回Json格式的数据,添加一个dll链接库,类似.Net中处理Json数据的API ,如图:

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后台

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>

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 = "<?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后台

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);});}</script>

Xml前台

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

首先贴上模块图:

首先定义好数据契约和操作契约,贴上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; }}}
}

StudentService.svc

在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>

web.config

好了,这样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!");}

ajax_wcf.aspx前台

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

调用前:

调用后:

例五[补充内容]: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; }}
}

Json格式数据打包解包

效果图:

转载于:https://www.cnblogs.com/chenlihong-886/articles/6146711.html

ajax调用方式汇总相关推荐

  1. AJAX调用方式总结

    最近用了近两天的时间对AJAX的知识进行了一个梳理,觉得是时候对AJAX的相关知识点做个总结了.....这当然也就是本篇博客的主旨了....我也不是很赞成用长篇大论来讲述什么是AJAX,怎么使用AJA ...

  2. java 实现WebService 以及不同的调用方式

    webservice: 就是应用程序之间跨语言的调用     wwww.webxml.com.cn     1.xml     2.    wsdl: webservice description l ...

  3. WebService的四种客户端调用方式(基本)

    转载:http://blog.csdn.net/csdn_gia/article/details/54863549 web服务网址:http://www.webxml.com.cn/zh_cn/web ...

  4. python rest api_Python调用REST API接口的几种方式汇总

    相信做过自动化运维的同学都用过REST API接口来完成某些动作.API是一套成熟系统所必需的接口,可以被其他系统或脚本来调用,这也是自动化运维的必修课. 本文主要介绍python中调用REST AP ...

  5. Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)

    老话说的好:好记心不如烂笔头! 本着这原则,我把最近工作中遇到的jquery利用ajax调用web服务的各种数据类型做了一个总结! 本文章没有什么高难度技术,就是记录一下,汇总一下,以便以后需要时查看 ...

  6. jquery点击后执行PHP加载div,PHP-将JQuery自动完成附加到由Ajax调用加载的文本字段...

    我有一个简单的Web应用程序,在其中创建了一个向导,每个向导页面都包含从数据库填充的不同表单字段,当用户按下时,接下来使用Ajax调用从服务器检索页面数据.这是针对Ajax调用从服务器检索的页面代码. ...

  7. 【转】Jquery -Ajax 入门练习 Jquery.Ajax 调用后台函数,获取DataTable Json,Asp.net

    直接上图=============最后拷贝源码(图片清楚) ====================================================================== ...

  8. ajax 阻止默认提交,jQuery验证插件:在对ajax调用servlet时,submitHandler不会阻止默认提交-返回false无效...

    我有一个使用jquery和servlet的简单表单.jQuery对Servlet进行Ajax调用,然后Servlet进行一些服务器端计算,然后通过jQuery在同一页面上显示结果.我不希望表单进行默认 ...

  9. IE下ajax响应慢,IE9上的Jquery Ajax调用非常慢,但在IE9中非常快

    我知道很多关于JS& amp; IE上的Jquery性能.然而,没有人帮助我,因此我不得不在这里提出这个问题.我对JS& amp; jQuery的.但是我遇到了问题.我的应用程序使用J ...

  10. Jquery Ajax调用aspx页面方法

    原文:Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通 ...

最新文章

  1. Java操作Kafka执行不成功
  2. golang defer使用——资源关闭时候多用
  3. Pandas在数据分析中的应用
  4. AndroidStudio_安卓原生开发_sharedpreferences清空---Android原生开发工作笔记150
  5. IBM交付第25000个高端磁盘存储方案
  6. Android开发新手常见的10个误区
  7. 大数据应用让医疗护理更高效
  8. Atitit 常用微服务实现 目录 1. 健康检测 max_fails与fail_timeout参 数 1 1.1. spring cloud dubbo实现 2 1.2. 、nginx多个tomc
  9. 国内航线图 或城市之间连接图
  10. 解决udhcpc命令无法自动获取并设置网卡IP和系统DNS
  11. 嵌入式ARM核心板介绍
  12. 微分几何为何必然兴起?
  13. 如何将Excel一页转PDF变多页?好用的PDF转换工具推荐
  14. 测试报告应该包括哪些内容?
  15. 小赛毛游C记-初识C语言(2)
  16. html制作简易计算机,用JavaScript制作一个简易计算器
  17. 小程序自定义导航栏返回主页
  18. 使用在Photoshop上的30个纺织物纹理Ps笔刷
  19. 弘辽科技:丁真一夜爆红背后的直播发展趋势
  20. maven 私库配置

热门文章

  1. mysqldump mysql.sock_mysqldump原理及实战
  2. java获取当前年月日历_转:JavaCalendar获取年、月、日、时间
  3. 线性查找与二分查找入门
  4. Win32汇编——钩子
  5. XamlReader 动态加载XAML
  6. 4月12日云栖精选夜读:阿里云黄海宇:窄带高清2.0——让直播更惊艳的魔术
  7. 关于x210开发板和主机、虚拟机ping通问题
  8. C++的性能C#的产能?! - .Net Native 系列向导
  9. cPanel虚拟主机上运行Python的方法
  10. PHP设计模式——抽象工厂