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>        
  • 相关阅读:
    计算机系统结构之重要知识点总结2
    计算机系统结构之重要知识点总结1
    蓝桥杯 历届试题 幸运数(暴力打表)
    蓝桥杯 历届试题 网络寻路(dfs搜索合法路径计数)
    蓝桥杯 历届试题 约数倍数选卡片 (经典数论+DFS)
    蓝桥杯 历届试题 九宫重排 (bfs+康托展开去重优化)
    蓝桥杯 历届试题 小朋友排队(数状数组+离散化||归并排序||线段树+离散化)
    poj 1932 XYZZY(spfa最长路+判断正环+floyd求传递闭包)
    pycharm+selenium搭建环境之no module named 'selenium'异常解决
    Web自动化测试—— Selenium+Python Windows环境搭建
  • 原文地址:https://www.cnblogs.com/DreamOfLife/p/8994143.html
Copyright © 2011-2022 走看看