ASP.NET --- MVC中的Ajax

AJAX简介

什么是Ajax

Asynchronous JavaScript and XML (JavaScript执行异步网络请求)

如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。

这就是Web的运作原理：一次HTTP请求对应一个页面。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

最早大规模使用AJAX的就是Gmail，Gmail的页面在首次加载后，剩下的所有数据都依赖于AJAX来更新。

Ajax的应用场景

分析目前的网站的注册、分页等功能。例如注册有一个功能是验证ID或者手机号是否已经注册过的这个功能。

按照之前的技术尝试实现，发现必须要通过提交整个表单，访问后台服务器，做出验证，导致页面刷新，这样降低网站的效率

而Ajax技术就是为了解决这个问题，需要的是页面无刷新访问服务器

Ajax的JS实现

用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。

在现代浏览器上写AJAX主要依靠XMLHttpRequest这个JS对象实现

window.onload = function () {
var txtckn = this.document.getElementById("ckn");
var txtName = this.document.getElementById("txtName");
//当文本框失去焦点，开始使用Ajax验证输入的姓名能够继续注册
txtName.onblur = function () {
// 【1】新建Ajax核心对象XMLHttpRequest
var request = null;
try
{
    //Firefox, Opera8.0+, Safari
    request=new XMLHttpRequest();
}
catch (e)
{
      try
      {
          // Internet Explorer
          request=new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e)
      {
      try
         {
             //最低版本的IE浏览器支持的Ajax对象
            request=new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e)
         {
            alert("您的浏览器不支持AJAX！");
            return false;
         }
   }
}
//【2】当Ajax对象状态发生变化时触发事件
request.onreadystatechange = function (data) {
        //【3】当Ajax对象的readyState == 4证明请求已完成
        if (request.readyState == 4) {
            //【4】当Ajax对象的status==200证明针对请求的响应是成功
            if (request.status==200) {
                //【5】针对响应结果做出新的处理
                if (request.responseText=="True") {
                   txtckn.innerText = "姓名可以使用！";
                }
                else {
                    txtckn.innerText = "该姓名已被注册！";
                    txtName.focus();
                 }
              }
           }
        }
   var uname = this.value;
   //【6】发送请求，指定请求的方式是post，请求的目标源是Manager控制器中的CheckName动作方法
   request.open("post", "CheckName");
   //【7】如果这个Ajax请求是post请求那么向传递参数的话必须声明这个请求头，如果这个Ajax请求是get请求的话那么参数直接以问号方式写在open的URL地址中，get传递不需要设置这个报文头
   request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //【8】开始进行发送请求，post请求的话参数通过此处传递
    request.send( "name="+uname);
   }
}

针对于Ajax请求的处理在服务器中的处理代码

public class ManagerController : Controller
{
       public bool CheckName(string name)
        {
            UserServer server = new UserServer();
            //再判断姓名是否已经被注册过
            if (server.IsHave(name))
            {
                //注册
                return true;
            }
            else
            {
                //姓名已被注册
                return  false;
            }
        }
}

Ajax涉及的内容

 

动作方法处理Ajax

1. 职责一：接收请求的数据(和非Ajax一样)

2. 职责二：返回客户端需要的数据(纯文本，JSON，HTML，其他)

返回JSON数据

使用场合

1. 客户端需要复杂结构的数据，比如一个集合，这个时候可以使用JSON格式和XML格式

2. 对于ASP.NET MVC中，可以轻松的借助控制器方法输出JSON格式数据

认识JSON格式数据

1. JSON(JavaScript Object Notation)是一种轻量级的数据交换格式

2. JSON采用完全独立于语言的文本格式，是理想的数据交换语言，易于编写和阅读，同时也易于机器解析和生成(方便网络传输，传输速度快)

JSON和XML数据比较

XML格式数据

    
        1
        张三
        男
        23
        123
    
    
        2
        李四
        女
        23
        123
    
    ...

JSON格式数据

{
 "UserList":[
 {"Id":"1","Name":"张三","Sex":"男","Age":"23","Pwd":"123"},
 {"Id":"2","Name":"李四","Sex":"女","Age":"23","Pwd":"123"},
 ...
 ]
}

XML的优缺点

XML的优点

1. 格式统一，符合标准

2. 容易与其他系统进行远程交互，数据共享比较方便。

XML的缺点

1. XML文件庞大，文件格式复杂，传输占带宽；

2. 服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；

3. 客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；

4. 服务器端和客户端解析XML花费较多的资源和时间。

JSON的优缺点

JSON的优点:

1. 数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；

2. 易于解析，客户端JavaScript可以简单的通过eval()进行JSON数据的读取；

3. 支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；

4. 在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；

5. 因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。

JSON的缺点:

1. 没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性；

2. JSON格式目前在Web Service中推广还属于初级阶段。

JSON的语法规则

1. 数据在“名称/值”对中

2. 数据由“逗号”分割

3. “花括号”保存对象

4. “方块号”保存数组

Ajax的JQ实现

//JSON格式数据必备命名空间
using System.Web.Script.Serialization;
public ActionResult GetUserList(string Sex)
        {
            //【1】先准备数据
            UserServer server = new UserServer();
            List list = server.GetUserInforsBySex(Sex);
            //【2】JSON格式转换
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            //将当前的List集合转成字符串(JSON格式)
            string stringList = serializer.Serialize(list);
            //【3】返回JSON格式数据
            return Json(stringList, JsonRequestBehavior.AllowGet);
        }

JSON()方法的定义

protected internal virtual JsonResult Json(
    object data, //要序列化的对象
    string contentType, //内容类型
    Encoding contentEncoding, //内容编码
    JsonRequestBehavior behavior //JSON请求行为
);

JsonRequestBehavior

1. 枚举类型

2. 包含AllGet/DenyGet两种值，分别代表允许Get请求和不允许Get请求

3. 提示：如果客户端是Get请求，则务必写上该参数

Ajax数据格式比较

分类	特点	应用场景
纯文本	适合保存单个数据，数据传输量小，客户端处理较多	保存数据处理结果，比如0,1等标识符
结构化数据(JSON等)	适合保存一行或多行数据，数据传输量较小，客户端处理较多	展示列表数据，客户端使用jQuery网格或树等插件来表示数据
HTML(分部视图等)	任意数据，数据传输量大，客户端处理较少	显示一定结构的任意内容，列表数据，表单等