MVC Ajax

最新推荐文章于 2022-12-12 07:58:04 发布

BOLSB

最新推荐文章于 2022-12-12 07:58:04 发布

阅读量375

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/BOLSB/article/details/125907089

版权

现在创建的Web应用程序几乎都要用到Ajax技术。从技术角度看，Ajax代表异步JavaScript和XML(Asynchronous JavaScript and XML,Ajax)。在实际应用中，它代表在构建具有良好用户体验的响应性Wb应用程序时用到的所有技术。尽管响应程序有时需要一些异步通信，但是微妙的动画和颜色变化更可以使程序具有响应性。如果我们能够直观地帮助用户在程序内部做出正确的选择，那么他们就会经常光顾我们的网站。

ASP.NET MVC 5是一个现代Wb框架，并且与其他现代Wb框架一样，它从一开始就支持Ajax技术。Ajax支持的核心来自于开源的JavaScript)库jQuery。ASP.NET MVC5中主要的Ajax

特性要么是基于jQuery构建，要么是扩展的jQuery特性。

所以要理解ASP.NET MVC5框架中Ajax的用途，首先需要学习jQuery。jQuery的口号是“少写，多做”，该口号完美地描述了jQuery的特点。jQuery的API简洁而强大，类库灵活而轻便。最重要的是，jQuery不仅支持所有现代浏览器，包括IE、Firefox、Safari、Opera和Chrome等，还可以在编写代码和浏览器API冲突时隐藏不一致性(和错误)。同时，使用jQuery进行开发不仅可以减少代码的编写量，节省开发时间，而且还不用太费脑筋。

jQuery是一个开源项目，是目前最流行的JavaScript库之一。在jquery.com网站上能够找到匕的最新权本、利插件。在ASP.NET MV权序中也能够看到10uery的身影。Microsoft支持jQuery，当创建新的MVC项目时，ASP.NET MVC的项目模板就会把jQuery用到的所有文件放在Scripts文件夹中。在MVC5中，我们通过NuGet添加jQuery脚本，这样当出现新版本的jQuery时，我们就可以很容易升级脚本。

MVC框架的特性是建立在jQuery基础之上，例如客户端验证和异步回传等。在深入介绍这些ASP.NET MVC特性之前，先说一下jQuery的基本特性。

jQuery擅长在HTML文档中查找、遍历和操纵HTML元素。一旦找到元素，jQuery就可以方便地在其上进行操作，如连接事件处理程序、使其具有动画效果以及创建围绕它的Ajax交互等。后面将详细介绍jQuery的这些功能特性，下面首先理解jQuery功能的入口：jQuery函数。

jQuery函数对象可以用来访问jQuery特性。当首次使用jQuery函数时，可能会感到困惑。部分原因可能是这个称为jQuery的函数用$符号作为别名（因为$符号只需要较少的输入，它在JavaScripti语法中是一个合法的函数名)。更令人困惑的是我们几乎可以向$函数传递任何类型的参数，并且该函数还能够推导出传递这个参数的意图。下面的代码展示了jQuery函数的些典型应用：

第一行代码调用了jQuery函数($),并向其中传递了一个匿名的JavaScripti函数作为第一个参数：

当传递一个函数作为第一个参数时，jQuery就会假定这个函数是要在浏览器完成构建（由服务器提供的)HMTL页面中的文档对象模型(Document Object Model,DOM)后立即执行，换句话说，这个函数在从服务器加载完HTML页面之后执行。这样就可以安全地执行函数中与DOM冲突的脚本，我们把这种情况称为“DOM准备”事件。

第二行代码向jQuery函数传递一个字符串"#album-list img":

jQuery把这个字符串解释为选择器。选择器会告知jQuery需要在DOM中查找的元素。我们可以使用像类名和相对位置这样的特性值来查找元素。第二行代码中的选择器告知jQuy查找id值为"album-list"的元素中的所有图像。当执行选择器时，它会返回一个包含零个或多个匹配元素的封装集(wrapped set)。我们可以调用其他任何jQuery方法来操作封装集中的元素。例如，上面的代码调用mouseover.方法为与选择器匹配的每个图像元素的onmouseover事件连接处理程序。jQuery利用JavaScript的函数式编程特性，经常把创建的或传递的函数作为jQuery方法的参数。例如，mouseover方法知道在不用考虑所使用浏览器的版本的情况下，如何为onmouseover?事件连接事件处理程序，但是它不知道在事件触发时程序员想要执行的操作。于是为了表达事件触发时想进行的处理，就向mouseover方法传递了一个包含事件处理代码的函数参数：

上面的例子实现了在触发mouseover事件时，匹配选择器的img元素会产生动画效果。在上面代码中，之所以使用this关键字来引用要做动画效果的元素，是因为hs指向的是触发事件的元素。注意代码第一次将元素传递给jQuery函数的方法($(his)。jQuery将该参数看成一个元素的引用参数，并返回一个包含有该元素的封装集。一旦将某个元素包含在jQuery封装集中，就可以调用jQuery方法（如animate)来操纵这个元素。示例中的代码首先将图像放大（宽和高增加25个像素），然后再缩小（宽和高减小25个像素）：上述代码的执行效果是：当用户将鼠标移向专辑图像时，他们会看到图像先变大再变小这样一个微妙的强调效果。这个效果是应用程序必需的吗？不是！然而，它却可以展示一个精美优雅的外观。用户定会喜欢。

jQuery选择器是指传递给jQuery函数的、用来在DOM中选择元素的字符串。前面用到的字符串"#album--list img"就是用来选择<img>标签的。作为选择器的字符串看起来像层叠样式表Cascading Style Sheet,.CSS)中的项。jQueryi选择器的语法正是派生于CSS3.O选择器的语法，并在其基础上做了一些补充。下面是jQuery代码中一些常见的选择器。