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

时间:2023-02-02 22:41:14

  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>