zoukankan      html  css  js  c++  java
  • 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>        
  • 相关阅读:
    UVa 12174 (滑动窗口) Shuffle
    UVa 1607 (二分) Gates
    CodeForces ZeptoLab Code Rush 2015
    HDU 1525 (博弈) Euclid's Game
    HDU 2147 (博弈) kiki's game
    UVa 11093 Just Finish it up
    UVa 10954 (Huffman 优先队列) Add All
    CodeForces Round #298 Div.2
    UVa 12627 (递归 计数 找规律) Erratic Expansion
    UVa 714 (二分) Copying Books
  • 原文地址:https://www.cnblogs.com/DreamOfLife/p/8994143.html
Copyright © 2011-2022 走看看