第8章 Ajax

前端之家收集整理的这篇文章主要介绍了第8章 Ajax前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Ajax代表异步JavaScript和XML

一、Jquery

1、jquery特性
(1)、jquery函数:用$符号做为别名

如:调用 jQuery函数($),并向其中传递了一个匿名的JavaScript函数作为第一个参数。
当传递一个函数作为第一个参数时,Jquery就会假定这个函数是要浏览器完成构建Html页面中的文档对象模型(DOM)后立即执行,
换句话说,这个函数从服务器加载完HTML页面后执行。这样就可以安全地执行函数中与DOM冲突的脚本,我们把这种情况称为“ DOM准备”事件。
    <script type="text/javascript">
        $(function () {
            alert("aa");
        });
    </script>
如:向jquery函数 传递一个字符串"#album-list img",jquery把这个字符串解释为选择器。选择器会告知jquery需要在DOM中查找的元素。
        $(function () {
            $("#album-list img").mouSEOver(function () {
                $(this).animate({ height: '+=25',width: '+=25' })
                .animate({height:'-=25',width:'-=25'});
            });
        });
(2)、jquery选择器
选择器是指传递给jquery函数的、用来在DOM中选择元素的字符串。
常用的选择器:
$("#header") 查找id值为"header"的元素
$(".editor-label") 查找class名为".editor-label"的所有元素
$("div") 查找所有<div>元素
$("#header div") 查找id值为"header"元素的所有后代<div>元素
$("#header>div")查找id值为"header"元素的所有子<div>元素
$("a:even") 查找编号为偶数的锚标签
(3)、jquery事件
示例:
$("#album-list img").mouSEOver(function(){
    animateElement($(this));
});
function animateElement(element){
     element.animate({height:'+=25',width:'+=25'})
     .animate({height:'-=25',width:'-=25'});
}
示例:当用户标签上移动鼠标时,锚标签就会改变外挂
$("a").mouSEOver(function(){
   $(this).addClass("highlight");
}).mouSEOut(function(){
   $(this).removeClass("highlight");
});
$("a").mouSEOver(function(){....}).mouSEOut(function(){....}); 方法

$("a").hover(function(){
     $(this).toggleClass("highlight");
});
(4)、jQuery和Ajax

jQuery包含了向Web服务器回发异步请求所需要的所有功能


2、非侵入式JavaScript

JavaScript代码标记分离,可以将所有需要的脚本代码打包到.js文件中。


3、jQuery的用法

每新MVC项目都包含一个Scripts文件夹,其中带有多个.js文件
jQuery核心库是一个名为jquery-<版本号>.js的文件

添加jquery脚本引用:

<script src="~/Scripts/jquery-1.10.2.js"></script>

注意:ASP.NET MVC 的Razor视图引擎会把这里~操作符解析为当前网站的根目录。
引用jQuery必须在,我们编写的js之前引用。


如果想更新到最新版本的jQuery,就必须在代码中查找脚本引用,并使用新版本号加以替换。
我们使用内置的、版本无关的jQuery脚本捆绑。

如:/Views/Shared/_Layout.cshtml 母版中的脚本引用采用了这种方法
@Scripts.Render("~/bundles/jquery")
除了简化将来的脚本更新,这种捆绑引用还提供了其他许多好处,例如在发布模式下自动使用微小脚本,以及将脚本引用集中到一个位置,从而只需在一个位置进行更新。

小知识点:

@RenderSection("scripts",required: false)

在子页面中可以使用 @section ScriptSection{} 来引用js或者css。这个作用相当于在布局页中定义了一个占位,在子页面中去填充这个占位


注意:@Scripts.Render调用将渲染/App_Start/BundleConfig.cs中预定义的“jquery”脚本捆绑。
这个捆绑利用了Asp.net中的捆绑和微小特性,该特性利用版本号中包含的通配符匹配,自动优先使用jQuery的轻量版本。

public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
}


(1)、jQuery和NuGet

Asp.net项目模板实际上使用了NuGet程序包将jQuery库包含进来或更新到jQuery的新版本。

(2)、自定义脚本
在/Scripts/App子目录中,添加名称为MusicScripts.js文件,并在里面写入脚本$(function(){..........});。
再在页面中引用js文件引用的js文件,必须在引用jQuery文件后面。


(3)、在节中放置脚本 @section Scripts{......}
@section Scripts{
<script type="text/javascript">
$(function () {
alert("aa");
});
</script>
}


脚本会添加到视图的底部页面@RenderSection("scripts",required: false)的位置
如下图:


(4)、Scripts目录下的其他文件

_references.js 确定在整个项目的全局JavaScript智能感知中包含哪些库

bootstrap.js前端开发的工具包 说明:http://v3.bootcss.com/css/#tables-condensed

respond.js bootstrap需要用到的js

modernizr.js 老版本浏览器启用新的Html5元素


二、Ajax辅助方法

创建表单和指向控制器操作的异步链接,需要引用 jquery.unobtrusive-ajax.js。

1、添加脚本

使用NuGet在项目中添加非侵入式Ajax脚本。


联机搜索“Microsoft jQuery Unobtrusive Ajax”



添加脚本引用:

@section Scripts{     
       <script src="....."></script>
       <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    }


2、Ajax的ActionLInk方法
创建一个具有异步行为的锚标签

_Layout.cshtml 中@RenderSection("scripts",required: false) 后添加异步按钮

    <div id="dailydeal">
        @Ajax.ActionLink("链接文本","DailyDeal",null,new AjaxOptions
            {
                UpdateTargetId = "dailydeal",InsertionMode = InsertionMode.Replace,HttpMethod = "GET"
            },new { @class = "btn btn-primary" }
        )
    </div>

        public ActionResult DailyDeal()
        {
            return PartialView();
        }


点击按钮后,会将DailyDeal视图异步替换 按钮内容


3、HTML5特性

猜你在找的Ajax相关文章