学习AJAX的各种方法
（本文借鉴了FishLi的ajax的方法比较）
复习下ajax的生成历史：
第一代技术：生成客户端代理脚本调用服务端
这技术展示了一代的ajax框架的主要设计思想：在服务端为客户端生成代理脚本，然后由这些代理脚本调用服务端，调用者可以不必知道整个过程如何实现的，而且在客户端的调用风格也基本与服务端的代码类似。
这类代表有：asp.net ajax ajaxpro 二个服务端框架。
下面将asp.net ajax 框架演示下如何进行ajax开发：
首先创建个webservice服务：
[ webService(Namespace="http://tempuri.org/")]
[ webServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
//若要允许使用asp.net ajax 从脚本中调用此web服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService] public class WebService1 : System.Web.Services.WebService {
[WebMethod]
public int Add(int a,int b){
return a+b;
}
这代码就是一个普通webservice代码，注意：在类的定义上加了一个ScriptService 修饰特性
接下来，我们还需要一个aspx页面，用ScriptManager为它生产成客户端的代理脚本：
说明：InlineScript="true"的设置并不是必须的，只是为了让我们看到ScriptManager到底生成什么代码
从截图可以看出，除了引入了二个必要的ajax客户端类库外，还在哭护短为webservice
有了这些代码后，我们可以用下面的javaScript 代码调用服务端；
function Call_Add(){
WebService1.Add(1,2,ShowResult);
}
function ShowResult(result){
document.getElementById("output").value=result;
}
再来个参数复杂示例，从服务端开始，先定义一个参数类型：
public class Customer{
public string Name{ get;set;}
public int Age{get;set;}
public string Address{get;set;}
public string Tel{ get;set;}
public string Email{get;set;}
}
webserice的代码：
[webmethod]
public string AddCustomer(Customer customer)
{
if(customer==null)
return "customer is null.";
//简答返回一个xml字符串
//告诉客户端：服务端收到了什么样的数据
return XmlHelper.XmlSerialize(customer,Encoding.UTF8);
}
仍然借用前面的ScriptManager设置，来看JavaScript的调用代码：
function Call_AddCustomer(){
var customer={Name:document.getElementById("txtName").value,
Age:document.getElementById("txtAge").value,
Address:document.getElementById("txtAddress").value,
Tel:document.getElementById("txtTel").value,
Email:document.getElementById("txtEmail").value};
WebService.AddCustomer(customer,ShowResult);
}
基本上还是与服务端的编码方式差不多，先创建一个customer对象，再传给调用方法。
---------------------------------------- - - -- - - -- 新技术的改进 - - - - -- - --------------------------
分析下上面代码开发的缺陷：前端代码不够独立，必须在页面中添加引用后才能调用服务端，强耦合。
出现了更优秀的前端框架能减少获取调用参数的代码量
由于前端在调用服务端时，需要事先生成代理脚本，这种设计会阻碍前端代码的封装性。 您可以想象一下：如果客户端需要一个【获取当前用户信息】的功能，而这个功能必须由服务端实现的， 此时，我们就只能指望服务端为客户端生成代理类来调用这个功能了。 但这个功能太有用，许多地方都需要使用，您是不是会想将它提取到一个公用的文件中？？？？？？
悲剧的是：就算把这段代码提取到一个公用的public.js文件中，每个页面的引用public.js 后，并不能调用【获取当前用户信息】功能，因为代理脚本并不一定存在，public.js中的代码还不能运行起来
为每个引用public.js的页面，添加ScriptManager 引用那个服务吧。
公用性越高，引用代码重复性越高，简单的说这种方法将webservice，aspx页面，js代码耦合在一起了
由于耦合所以越来越麻烦
-----------------------------------------------------------------------------
第二代技术：JQuery直接调用webService
随意的jQuery前端类库的流行，另一种新的开发方法也开始流行起来
http调用本来是个很简单很透明的技术，只要制定一个url，构造一个请求体就可以了，前端代理脚本的方法将这个过程封装了起来，由于它的封装制造了耦合并限制前端的发展，新的Ajax技术只能突破这个限制，舍弃这些代理脚本，直接调用后端代码。
下面示例：不需要代理类，直接调用服务器
$.ajax({
type:"POST",url:"/WebService1.asmx/Add",
contentType:"application/json",
dataType:'json',
success:fuction(result){
$("#output").val(result.d);
}
});
这段代码也能调用服务端的Add方法
由于服务端采用json数据格式，所以需要在客户端多指定一些请求头，这些事情以前是由代理脚本完成的，虽然现在代码稍微多点，但是耦合没了，便于提取公用代码。如果一直用这种方式调用webservice，那么jquery提供了设置默认参数的功能，我们可以利用这个特性减少代码量。还是再来看下前面那个复杂的参数类型的前端调用代码吧：
var customer={Name:$("#txtName").val(),
Age:$("#txtAge").val(),
Address:$("#txtAddress").val(),
Tel:$("#txtTel").val(),
Email:$("#txtEmail").val()};
var jsonString=$.toJSON({customer:customer});
$.ajax({
type:"POST",url:"/WebServicel.asmx/AddCustomer",
contentType:"application/json",
data:jsonString,
dataType:'json',
success:function(result){
$("#output").val(result.d);
}
});
主要代码还是一样的，集中在获取调用参数，但是要转换json格式
不要盯着指定一大堆的jQuery参数，他们可以通过设置默认值的方式解决
这方法不仅可以用于调用webservice,也可以调用WCF（basicHTtpBinding）毕竟他们都是用http协议，不过wcf,还有一堆烦人的配置要设置，但这不是jquery的问题，这时服务端框架的缺陷
-----------------------------------------------------三代技术：更简单的数据格式
之前看到的利用jquery调用webservice 不过json的转换过程感觉有些多余，浏览器的提交就没有这个转换步骤。
第三代技术完美的解决了输入输出必须采用的json问题，而且解决了post限制
由于这次变革改变了数据格式，所以服务端也发生了改变，新的框架解决了这些问题：asp.net mvc 框架，mymvc框架都支持这个开发方式
【Action】
public int Add(int a,intb)
{
return a+b;
}
[Action]
public String AddCustomer(Customer customer)
{//简单地返回一个xml字符串
//告诉客户端：服务端收到了什么样的数据
return XmlHelper.XmlSerialize(customer,Encoding.UTF8);
}
注意：这种ajax技术没有雨客户端的任何耦合，只要知道一个url就可以调用了，来看客户端的代码吧；
$.ajax({
type:"POST",url:"/AjaxDemo/Add.cspx",
data:{ a:1,b:2},
success:function(result){
$("#output").val(result);
}
});
//第二个调用
var customer={Name:$("#txtName").Val(),
Age:$("#txtAge").val(),
Address:$("#txtAddress").val(),
Tel:$("#txtTel").val(),
Email:$("#txtEmail").val()
};
$.ajax({type:"POST",url:"/AjaxDemo/AddCustomer.cspx",
data:customer,
success:function(result){
$("#output").val(result);
}
});
注意：type:"POST"并不是必须的，您也可以把他们改成get请求
如果此时用fiddler查看请求会发现请求的数据采用的是key--value& key--value的格式，与浏览器的范式一致，由于没有json数据格式的限制，现在参数项简单了
---------------------直接提交表单-----------------------
之前用了3中方式提交他，下面用个简单的提交方式：
为了更清楚展示这种方法，我甚至把script标签页贴出来了。
如果您用过jQuery就可以发现，真正的代码就只有ajaxForm的那个调用。
说明：ajaxform是jQuery.form插件提供的功能
服务端的代码继续使用前面示例的代码，所以就不贴出了。
在对比前面代码继续使用前面示例的代码，所以就不贴出了
-