NopCommerce 4.x - Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。而ajax属于集中技术的集合.一般为xmlhttprequest + javascript + xml三种技术的集合。

1.原生JS实现AJAX,用xmlhttprequest

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","demo_get.php?id=1&name=lemoo&t=" + Math.random(),true);
xmlhttp.send();

2.jQuery实现AJAX

jQuery是一个javascript封装的代码库

$.ajax属于jquery， 另一个是js，jquery封装了js，$.ajax的本质就是使用的XMLHttpRequest

因为JS语法太繁杂,而JQuery自己是个包.用自己简单的语法,就能直接提用,达到简短的代码,实现效果.query是在JS基础上建立的前台脚本框架，为的是简化JS的语言描述，提高可维护性。其实用的还是JS的语法.jquery就是对js语法的封装，它里面的方法本质上也就是使用的javascript语法

Step 1：需引入jquery.js

 <!--used for input radio-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js" integrity="sha512-pXR0JHbYm9+EGib6xR/w+uYs/u2V84ofPrBpkgLYyKvhZYJtUUvKSy1pgi8tJZAacsPwgf1kbhI4zwgu8OKOqA==" crossorigin="anonymous"></script>
        

Step 2：

$.ajax({
  type:"post",
  url:"demo_test.php",
  data: { num: 123 },
  dataType:"text",
  success: function (data) {
    alert(1);
  }
});

jQuery是一个javascript封装的代码库,jQuery库包含的功能:

1）HTML元素选取
2）HTML元素操作
3）CSS操作
4）HTML事件函数
5）JavaScript特效和动画
6）HTML DOM遍历和修改
7）AJAX
8）Utilities

jquery.slim.js

jquery.slim.js与jquery的区别

jquery.slim.js就是在jquery.js的基础上去掉了ajax的功能。如果你不需要用到ajax或者使用了独立的第三方ajax库，就可以使用这个jquery.slim.js，是个瘦身版，不是一个插件。

3.jquery.validate.unobtrusive.js

jQuery Unobtrusive验证库是由Microsoft制作的，并包含在ASP.NET MVC框架中。但是标准jQuery验证库和“unobtrusive"版本有的区别

jQuery Unobtrusive只是简单的Javascript验证，不会用自己的验证代码污染你的源代码。这是通过使用HTML中的数据属性完成的。

Jquery验证示例：

导入js库

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

<input type="text" name="email" class="required">
<script>
        $(function () {
            $("form").validate();
        });
</script>

Jquery验证Unobtrusive的例子

引用JavaScript

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>

<input type="text" name="email" data-val="true" 
data-val-required="This field is required.">  

<div class="validation-summary-valid" data-valmsg-summary="true">
    <ul><li style="display:none"></li></ul>
</div>

4.jquery-2.0.0.min.js Jquery核心库文件

此文件不包含不必要的空白字符，没有注释，并且所有的局部变量名称的长度是一个字符。在B/S模式，通常都是尽可能的向客户端发送精简文件，减少下载的数据字节数，从而加快了加载和运行速度

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js" type="text/javascript"></script>

5. jquery-migrate-1.1.1.min.js应用迁移辅助插件

由于Jquery版本之间有差异，Jquery版本的改变会使网站或者应用程序的某些功能用法不兼容，我们不得不修改网站或者应用程序的代码，而使用此插件可以在原来代码上升级Jquery而不用修改代码

详见  http://blog.jquery.com/2013/01/31/jquery-migrate-1-1-0-released/ （英文）

<script src="http://ajax.aspnetcdn.com/ajax/jquery.migrate/jquery-migrate-1.1.1.min.js" type="text/javascript"></script>

6.jquery.validate.min.js JQuery的客户端验证文件（扩展了Jquery的核心库的验证能力）

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" type="text/javascript"></script>

7.jquery-ui.min.js

JQuery的UI插件（扩展了Jquery的核心库展现能力）

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>

8.jquery.validate.unobtrusive.min.js

用来让Jquery支持Unobtrusive JavaScript（非侵入式）的库文件（具体看http://en.wikipedia.org/wiki/Unobtrusive_JavaScript下对Unobtrusive JavaScript的解释。）

    jquery.validate.unobtrusive.min.js 用来获取ASP.NET MVC框架发出的元数据，并将这些元数据转换成Jquery验证能理解的数据

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

9.jquery.unobtrusive-ajax.min.js

https://www.iaspnetcore.com/Blog/BlogPost/59ceb48fdc77c218acb4c90d/aspnet-core-mvc-ajax-form-requests-using-jqueryunobtrusive-ajax-part-1

10.Slinky.js

轻量级响应式移动手机样式多级导航菜单jQuery插件

Include these files

<link rel="stylesheet" src="bower_components/slinky/dist/slinky.min.css" />
<script src="bower_components/slinky/dist/slinky.min.js"></script>