ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用

　　Ajax的全名为：Asynchronous Javascript And XML（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax技术首先向Web服务器发送异步请求数据，然后使用返回的内容来更新部分视图页面，而不是整个页面。

　　Ajax异步请求包含两种类型的内容：一种是服务端生成的HTML代码，直接嵌入到页面里；另一种是原始的序列化数据，客户端JavaScript生成或更新HTML代码。

　　ASP.NET MVC中关于Ajax的使用主要在以下两个方面：

　　1.         部分渲染

　　使用Ajax发送异步请求给服务器，服务器返回包含HTML代码的数据插入到对应的页面区域。

这里可以使用JQuery中的load方法，向指定元素插入HTML代码。

　　$(“#selectedID”).load(‘fileName’);

2.         渲染部分视图

　　绝大部分情况下，ASP.NET MVC将渲染部分视图当成其他请求一样看待（请求被路由到特定控制器，控制器执行特定的操作），二者的区别在于请求结束渲染视图时，通常的操作方法时使用View()帮助方法返回ViewResult，而部分视图需要调用Parital()帮助方法来返回PartialViewResult，它只渲染包含视图内容，不渲染外围布局。

3.         JavaScript渲染

　　使用服务端生成HTML文件然后传输这种方法非常浪费资源，因为其中的HTML代码完全可以在客户端上创建，而不需网络传输。

　　这种方式的改进就是只从服务端获取后原始数据，然后客户端根据数据生成HTML代码。因此，服务端和客户端在数据序列化上需要达成一致，才能准确生成HTML代码。

　　JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式，它使用两种数据结构：名值对集合以及有序值列表。

　　ASP.NET MVC使用JsonResult对象提供对原生JSON的支持，它可以接受可序列化为JSON的对象模型，直接调用Controller.Json()方法即可创建对应的JsonResult。

　　默认情况下，ASP.NET MVC不允许对Get方法的HTTP请求返回JSON数据，这样可以避免潜在的JSON劫持风险，但是可以在重载的Json()中传递第二个参数JsonRequestBehavior.AllowGet允许Get方式的HTTP请求，然后返回JSON格式的数据。因此，为了避免风险，不要给不可知的HTTP Get请求返回JSON数据，在非敏感数据时，ASP.NET MVC 框架允许使用JsonRequestBehavior.AllowGet设置来允许这种不安全的方式返回JSON数据。当需要使用JSON传输敏感信息时，可以在控制方法上添加HTTPPostAttribute特性来显示该方法只能通过HTTPPost方法请求。

Ajax跨域请求

　　默认情况下，浏览器只允许来自本站的请求，这种限制避免了很多安全问题。现实中，有很多需要与外部托管的网站或WebAPI进行交互的情况，这种情况下，Web应用必须能够支持JSONP（Json With Padding）或者CORS（Cross-Origin Resource Sharing 跨站资源共享）。ASP.NET MVC 默认不支持这种情况，需要使用以下两种方式实现：

1.         JSONP

它利用跨站请求伪造技术，实现Ajax跨域调用。其交互方式包含以下几步：

1)         客户端创建接受JSONP应答消息的JavaScript函数CallBackMethod()。

　　2)         客户端动态为DOM添加<script>标签，欺骗浏览器误以为是它正在包含一个真正的脚本，然后利用浏览器允许<script>引用外站资源的“后门”。

　　3)         <script>指定外部的JSONP服务器地址，然后指定第一步里回调的函数名称。<script href=”http://xxx.com/controller/actoin/id?callback=CallBackMethod”/>

　　4)           服务器像处理JSON请求一样处理请求，区别就是：它不是直接在应该消息里返回JSON对象，而是在客户端回调函数名里包装对象(回调函数中包含原生的JSON数据)。CallBackMethod({JSON对象内容});

　　JSONP方法是一种完全不同的C/S数据交换方法，它在回调的函数参数里包含原生的JSON数据，而不是像正常的Ajax请求一样返回JSON数据，因此，在客户端访问返回数据的方法只有在JSONP回调函数里实现。

2.         CROS

　　CROS采用特殊的HTTP消息头来告诉浏览器服务允许跨域Ajax调用。为了启用CROS支持，只需要给每个CORS支持的请求消息设置Access-Control-Allow-Origin header值即可。

　　一般使用配置来给网站的全部请求消息添加HTTP消息头。

<system.webServer>
         <httpProtocal>
             <customHeaders>
                 <add name=”Access-Control-Allow-Origin” value=”*” />
            </customHeaders>
    </httpProtocal>
</system.webServer>