推荐个ajax的视频教程..?

推荐个ajax的视频教程..?

jQu

AJAX是什么？如何在JavaScript中使用？

JavaScript能流行，一个很重要的原因是AJAX技术的应用。在网页中有很多的应用。

举两个常见的AJAX应用的例子：1、 在搜索中，我们输入关键字时，网页会实时展现搜索结果；这是用AJAX实现的。

2、 使用地图时，地图会根据用户显示的位置不停的更新。这也是通过AJAX实现。那么什么是AJAX呢？AJAX全称为Asynchronous JavaScript And XML直译就是异步的JavaScript和XML（这里我们主要介绍下JavaScript中AJAX的应用）通常当JavaScript向服务器发送请求获取数据时，服务器会返回数据。在传统没有使用AJAX的网页中，需要刷新页面使其重新加载。

而AJAX可以使网页在不重新加载页面的情况下对网页的局部进行更新。(比如，当你要放大地图的时候，你会不断的向服务器请求地图当前位置的详细信息，服务器返回数据给你，这里我们并不需要重新加载整个页面，不然用户体验就太差了。而是局部更新页面。

)由于我不可能在这写一个地图这样复杂的例子，而为了演示AJAX的使用，我借用了秒秒学的一个简单示例：// 简单的AJAX举例。// 1: 创建请求变量var myRequest;// 浏览器的特征检查。if (window.XMLHttpRequest) { //若支持，则是火狐、谷歌等浏览器。

myRequest = new XMLHttpRequest();} else if (window.ActiveXObject) { // 若不支持, 则是IE浏览器。 myRequest = new ActiveXObject(“Microsoft.XMLHTTP”);}// 2: 为请求添加事件处理代码。myRequest.onreadystatechange = function(){ console.log(“匿名函数被调用！”); console.log(myRequest.readyState); if (myRequest.readyState === 4) { var p = document.createElement(“p”); var t = document.createTextNode(myRequest.responseText); p.appendChild(t); document.getElementById(“mainContent”).appendChild(p); }};// 3: 配置发送请求myRequest.open(‘GET’, ‘simple.txt’, true);myRequest.send(null);//….使用AJAX主要分三部分，如示例中的1、 创建请求的变量。

在script文件中，首先声明XMLHttpRequest对象,这也是题主说的Ajax的核心。浏览器页面能通过XMLHttpRequest对象和服务器进行通讯。因为这个对象的创建因浏览器的不同而有区别。所以我们要用if语句判断XMLHttpRequest是否存在。

2、 为请求添加事件处理代码创建好XMLHttpRequest对象后，就可以向服务器发送请求了，不过我们首先处理服务器响应的事件。当服务器响应后会触发myRequest对象的onreadystatechange事件。在onreadystatechange事件中我们看到myRequest调用了readyState属性，readyState有4个值表示目前响应所在的阶段，各数值表示如下：l 1：请求已经建立，但是还没有发送（还没有调用 send()）。l 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

l 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。l 4：响应已完成；您可以获取并使用服务器的响应了。我们一般只关心readyState的值为4的情况，表示响应已完成。3、 配置发送请求使用open方法配置请求。

它有三个参数：1、第一个参数表示用GET获取服务器中的数据。2、第二个参数是一个服务器地址，这里我们用本地的simple.txt代替，省去创建服务器的麻烦。3、第三个参数true表示请求是异步的，即当请求发送后，JavaScript不会为了等待服务器的响应而阻塞，它会继续执行后续代码。

配置好请求后，用send方法发送请求，这里给send传递的参数是null，若有其它参数需要发送，也可以传递给send方法。这样AJAX的简单使用例子就说完了，以上示例来自教程网站秒秒学，希望对你有帮助。

在jsp中怎么运用ajax

使用Ajax的主要过程包括
1、创建XMLHttpRequest对象，
2、设置回发函数，
3、指定信息发送位置、提交的方式和异步与否，
4、发送请求。

什么是AJAX？

教程请到原文获取：https://zhuanlan.zhihu.com/p/7
AJAX准备知识：JSON
什么是 JSON ？

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解
* JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

啥都别多说了，上图吧！
合格的json对象：
[“one”, “two”, “three”]{ “one”: 1, “two”: 2, “three”: 3 }{“names”: [“张三”, “李四”] }[ { “name”: “张三”}, {“name”: “李四”} ]
不合格的json对象：
{ name: “张三”, ‘age’: 32 }  // 属性名必须使用双引号[32, 64, 128, 0xFFF] // 不能使用十六进制值{ “name”: “张三”, “age”: undefined }  // 不能使用undefined{ “name”: “张三”,
 “birthday”: new Date(‘Fri, 26 Aug 2011 07:13:10 GMT’),
 “getName”:  function() {return this.name;}  // 不能使用函数和日期对象}
stringify与parse方法
JavaScript中关于JSON对象和字符串转换的两个方法：
JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象　
JSON.parse(‘{“name”:”Q1mi”}’); JSON.parse(‘{name:”Q1mi”}’) ; // 错误 JSON.parse(‘[18,undefined]’) ; // 错误
JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。

　
JSON.stringify({“name”:”Q1mi”})
和XML的比较
JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁琐笨重的 XML 格式。
JSON 格式有两个显著的优点：书写简单，一目了然；符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。
XML和JSON都使用结构化方法来标记数据，下面来做一个简单的比较。

用XML表示中国部分省市数据如下：
<?xml version=”1.0″ encoding=”utf-8″?><country>
   <name>中国</name>
   <province>
       <name>黑龙江</name>
       <cities>
           <city>哈尔滨</city>
           <city>大庆</city>
       </cities>
   </province>
   <province>
       <name>广东</name>
       <cities>
           <city>广州</city>
           <city>深圳</city>
           <city>珠海</city>
       </cities>
   </province>
   <province>
       <name>台湾</name>
       <cities>
           <city>台北</city>
           <city>高雄</city>
       </cities>
   </province>
   <province>
       <name>新疆</name>
       <cities>
           <city>乌鲁木齐</city>
       </cities>
   </province></country>XML格式数据
XML格式数据
用JSON表示如下：
{
   “name”: “中国”,
   “province”: [{
       “name”: “黑龙江”,
       “cities”: {
           “city”: [“哈尔滨”, “大庆”]
       }
   }, {
       “name”: “广东”,
       “cities”: {
           “city”: [“广州”, “深圳”, “珠海”]
       }
   }, {
       “name”: “台湾”,
       “cities”: {
           “city”: [“台北”, “高雄”]
       }
   }, {
       “name”: “新疆”,
       “cities”: {
           “city”: [“乌鲁木齐”]
       }
   }]}JSON格式数据
JSON格式数据
由上面的两端代码可以看出，JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读，并且在数据交换方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用得带宽。
AJAX简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
示例
页面输入两个整数，通过AJAX传输到后端计算出结果并返回。
<!DOCTYPE html><html lang=”en”><head>
 <meta charset=”UTF-8″>
 <meta http-equiv=”x-ua-compatible” content=”IE=edge”>
 <meta name=”viewport” content=”width=device-width, initial-scale=1″>
 <title>AJAX局部刷新实例</title></head><body><input type=”text” id=”i1″>+<input type=”text” id=”i2″>=<input type=”text” id=”i3″><input type=”button” value=”AJAX提交” id=”b1″><script src=”/static/jquery-3.2.1.min.js”></script><script>
 $(“#b1”).on(“click”, function () {
   $.ajax({
     url:”/ajax_add/”,
     type:”GET”,
     data:{“i1”:$(“#i1″).val(),”i2”:$(“#i2”).val()},
     success:function (data) {
       $(“#i3”).val(data);
     }
   })
 })</script></body></html>HTML部分代码
HTML部分代码
def ajax_demo1(request):
   return render(request, “ajax_demo1.html”)
def ajax_add(request):
   i1 = int(request.GET.get(“i1”))
   i2 = int(request.GET.get(“i2”))
   ret = i1 + i2
   return JsonResponse(ret, safe=False)
views.py
views.py
rlpatterns = [
   …
   url(r’^ajax_add/’, views.ajax_add),
   url(r’^ajax_demo1/’, views.ajax_demo1),
   …  
]
urls.py
AJAX常见应用情景
搜索引擎根据用户输入的关键字，自动提示检索关键字。

还有一个很重要的应用场景就是注册时候的用户名的查重。
其实这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。
整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！
当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为lemontree7777777的用户是否存在，最终服务器返回true表示名为lemontree7777777的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。
整个过程中页面没有刷新，只是局部刷新了；
在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；
AJAX的优缺点
优点：
AJAX使用JavaScript技术向服务器发送异步请求；
AJAX请求无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
jQuery实现的AJAX
最基本的jQuery发送AJAX请求示例：
<!DOCTYPE html><html lang=”zh-CN”><head>
 <meta charset=”UTF-8″>
 <meta http-equiv=”x-ua-compatible” content=”IE=edge”>
 <meta name=”viewport” content=”width=device-width, initial-scale=1″>
 <title>ajax test</title>
 <script src=”https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js”></script></head><body><button id=”ajaxTest”>AJAX 测试</button><script>
 $(“#ajaxTest”).click(function () {
   $.ajax({      url: “/ajax_test/”,      type: “POST”,      data: {username: “Q1mi”, password: 123456},      success: function (data) {
       alert(data)
     }
   })
 })</script></body></html>
views.py：
def ajax_test(request): user_name = request.POST.get(“username”) password = request.POST.get(“password”) print(user_name, password) return HttpResponse(“OK”)
$.ajax参数
data参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型。

def ajax_test(request):
   user_name = request.POST.get(“username”)
   password = request.POST.get(“password”)
   print(user_name, password)
   return HttpResponse(“OK”)
JS实现AJAX
var b2 = document.getElementById(“b2”);
 b2.onclick = function () {
   // 原生JS    var xmlHttp = new XMLHttpRequest();
   xmlHttp.open(“POST”, “/ajax_test/”, true);
   xmlHttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
   xmlHttp.send(“username=q1mi&password=123456”);
   xmlHttp.onreadystatechange = function () {
     if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
       alert(xmlHttp.responseText);
     }
   };
 };
AJAX请求如何设置csrf_token
方式1
通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。
$.ajax({  url: “/cookie_ajax/”,  type: “POST”,  data: {
   “username”: “Q1mi”,
   “password”: 123456,
   “csrfmiddlewaretoken”: $(“[name = ‘csrfmiddlewaretoken’]”).val()  // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中  },  success: function (data) {
   console.log(data);
 }})
方式2
通过获取返回的cookie中的字符串 放置在请求头中发送。
注意：需要引入一个jquery.cookie.js插件。
$.ajax({  url: “/cookie_ajax/”,  type: “POST”,  headers: {“X-CSRFToken”: $.cookie(‘csrftoken’)},  // 从Cookie取csrftoken，并设置到请求头中  data: {“username”: “Q1mi”, “password”: 123456},  success: function (data) {
   console.log(data);
 }})
或者用自己写一个getCookie方法：
function getCookie(name) {
   var cookieValue = null;
   if (document.cookie && document.cookie !== ”) {
       var cookies = document.cookie.split(‘;’);
       for (var i = 0; i < cookies.length; i++) {
           var cookie = jQuery.trim(cookies[i]);
           // Does this cookie string begin with the name we want?            if (cookie.substring(0, name.length + 1) === (name + ‘=’)) {
               cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
               break;
           }
       }
   }
   return cookieValue;}var csrftoken = getCookie(‘csrftoken’);
每一次都这么写太麻烦了，可以使用$.ajaxSetup()方法为ajax请求统一设置。

function csrfSafeMethod(method) {
 // these HTTP methods do not require CSRF protection  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));}$.ajaxSetup({  beforeSend: function (xhr, settings) {
   if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
     xhr.setRequestHeader(“X-CSRFToken”, csrftoken);
   }
 }});
注意：
如果使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值。
如果你的视图渲染的HTML文件中没有包含 {% csrf_token %}，Django可能不会设置CSRFtoken的cookie。
这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。
django.views.decorators.csrf import ensure_csrf_cookie @ensure_csrf_cookie def login(request): pass
更多细节详见：Djagno官方文档中关于CSRF的内容
AJAX上传文件
XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。

XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月，XMLHttpRequest Level 2 草案提出来了，相对于上一代，它有一些新的特性，其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。下面就具体
首先看一下formData的基本用法：FormData对象，可以把所有表单元素的name与value组成一个queryString，提交到后台。

只需要把 form 表单作为参数传入 FormData 构造函数即可：
介绍一下如何利用 FormData 来上传文件。
django.views.decorators.csrf import ensure_csrf_cookie@ensure_csrf_cookiedef login(request):
   pass
或者使用
var form = document.getElementById(“form1”); var fd = new FormData(form);
这样也可以直接通过ajax 的 send() 方法将 fd 发送到后台。
注意：由于 FormData 是 XMLHttpRequest Level 2 新增的接口，现在 低于IE10 的IE浏览器不支持 FormData。

练习（用户名是否已被注册）
功能介绍
在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。
案例分析
页面中给出注册表单；
在username input标签中绑定onblur事件处理函数。
当input标签失去焦点后获取 username表单字段的值，向服务端发送AJAX请求；
django的视图函数中处理该请求，获取username值，判断该用户在数据库中是否被注册，如果被注册了就返回“该用户已被注册”，否则响应“该用户名可以注册”。

序列化
Django内置的serializers
def books_json(request): book_list = models.Book.objects.all()[0:10] from django.core import serializers ret = serializers.serialize(“json”, book_list) return HttpResponse(ret)
补充一个SweetAlert插件示例

点击下载Bootstrap-sweetalert项目。

2020年Web前端自学之路指南

今天小编要跟大家分享的文章是关于2020年Web前端自学之路指南。许多人可能跟着网络上的各种教程就入了前端这行的门，但大多数都只是机械的学习着资料中的内容。

俗话说，选择要比努力重要。

那么学习开发，首先应该要有一个清晰的学习路线。希望这篇文章，能为大家在选择未来的发展方向时提供一些参考和帮助。下面来和小编一起看一看吧！1、基础学习●HTML+CSS基础：HTML进阶、CSS进阶、div+css布局、排版、html+css整站开发，样式美化和浏览器兼容●JavaScript基础：掌握Js基本语法、条件、语句和循环、js内置对象常用方法、ECMAscript、DOM、BOM、定时器和焦点图，并学习增强逻辑的常用算法，实现木马、拖放、放大镜等常见的网络特效。●JavaScript高级特性：正则表达式与JSON、正则表达式案例、JavaScript原理与库封装、闭包、函数节流、作用域链、面向对象基础、事件与运动框架封装●JQuery基础使用：DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件的基本使用，开发复杂的交互功能和效果，并能熟悉JQuery的插件开发机制。

2、HTML5+CSS3和移动Web开发●HTML5：HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket●CSS3：CSS3新选择器、伪元素、颜色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作●图像学：Canvas、Canvas游戏、数据可视化、Heighcharts.js●Bootstrap：响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS●移动Web开发：跨终端WEB和主流设备简介、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、商城页面、滚屏3、HTTP服务和AJAX编程●WEB服务器基础：服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍●PHP基础：PHP基础语法，使用PHP处理简单的GET/POST请求●AJAX上篇：Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用●AJAX下篇：JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI用法、使用Ajax实现瀑布流案例4、面向对象进阶●面向对象终极篇：从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器●面向对象三大特征：继承性、多态性、封装性、接口●设计模式：面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程5、封装一个属于自己的框架●框架封装基础：事件流、冒泡、捕获、事件对象、事件框架、选择框架●框架封装中级：运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装●框架封装高级和补充：JQuery框架雏形、可扩展性、模块化6、模块化组件开发●面向组件编程：面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序●面向模块编程：AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS、CommonJS、ES6Modules7、工程化&构建、主流的框架●Web开发工作流：GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack、打包案例●MVC/MVVM/MVW框架：Vue.js、React、Angular.js、Backbone.js、Knockout/Ember、项目驱动8、Node.js全栈开发●快速入门：Node.js发展、生态圈、Io.js、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试;掌握node.js全栈的解决方案和在服务器端JS高效开发●核心模块和对象：全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO●Web开发基础：HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。●快速开发框架：Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。●数据库：mongoose/mongoDB、MYSQL●Node.js开发电子商务实战：需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块9、微信系列●微信公众号JS-SDK配置、定制菜单、回调、定制分享内容、扫一扫、地理位置、微信音频、图像、语音识别功能、服务器端curl库、支付、卡券、微店、微信开发模式与公众号分析、统计分析●微信小程序小程序项目、uni-app、mpvue10、移动APP(Web/Native/Hybrid)●ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API●Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)11、其他●职业素养沟通表达、团队合作、目标管理、时间管理、心态管理●就业指导简历&投递技巧、面试&笔试技巧12、推荐一些编程学习网站01、哔哩哔哩这个网站如果让我评价，可谓是上边的视频都是非常高质量的，你可以去搜索看一下。

02、菜鸟教程这个网站虽然不是视频网站，一听名字就知道适合菜鸟的，但是基础的知识写的非常详细，很清晰易懂，非常适合刚开始学习编程的小伙伴。03、W3School之前刚开始学WEB开发时，经常在该网站，就是结合w3school学习前端，开发时，如果遇到记不清的标签，就去w3school搜索，平常有时间，就来慕课看前端视频。类似这样的学习网站还有很多，该开始入门的话上面的网站足矣。

其他的网站推荐还有腾讯课堂、实验楼、果壳MOOC学院等、知乎、掘金……以上就是小编今天为大家分享的关于2020年Web前端自学之路指南的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。

想学习ajax简单的入门，不知道有什么好的教材

为什么喜欢视频的呢？我觉得文字的书籍可能更好一些吧。有一本书叫Sams.Teach.Yourself.AJAX.in.10.Minutes，作为入门教材很不错。

你可以搜一下，有电子版的。