1.Ajax的理解

以前服务器里的数据，都是存在Servlet域里，然后发给JSP，来进行显示。

有了AJAX，可以和服务器通信。不需要JSP作页面。

可以在Servlet把数据发给浏览器，然后在HTML页面显示。

1.1 以前的方法

1.2 现在的方法

这个方法可以实现前后端分离，JSP的启动需要服务器，需要后端的工程师来开发。

1.3 AJAX异步交互

一般搜东西的时候，搜两个，后面的都显示出来。但整个页面事没有刷新的。

局部更新了数据，这些数据是在数据库里。

比如注册的时候，输入一个用户名，光标一离开，立马显示是否可注册。

这里就和数据库交互了。

同步：按照12345的顺序挨个进行。请求服务器。

异步：可以不请求服务器，直接执行其他操作。

2.AJAX快速入门及用法。

步骤：前端写JS，然后和Servlet连用。

w3school 在线教程里找到AJAX的教程案例。

1.现在HTML页面里写一个script，创建核心对象

var xhttp;
if (window.XMLHttpRequest) {xhttp = new XMLHttpRequest();} else {// code for IE6, IE5xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2.然后用创建的对象向服务器发送请求。

请求服务器端的资源，蓝框的路径得重写。必须是绝对路径：即浏览器里访问的那个路径。

因为前端和后端分离，部署的服务器可能不是同一个。

xhttp.open("GET", "绝对路径（servlet）", true);
xhttp.send();

3.获取响应

 xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {document.getElementById("demo").innerHTML =this.responseText;}};

里面变量的含义，4就是响应就绪。

responseText，就是我们AJAXServlet里response返回的数据。

具体操作。

4.结果

xhr的意思就是异步。

3.AJAX案例，验证用户是否存在

前端页面 register.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>欢迎注册</title><link href="css/register.css" rel="stylesheet">
</head>
<body><div class="form-div"><div class="reg-content"><h1>欢迎注册</h1><span>已有帐号？</span> <a href="login.html">登录</a></div><form id="reg-form" action="#" method="get"><table><tr><td>用户名</td><td class="inputs"><input name="username" type="text" id="username"><br><span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span></td></tr><tr><td>密码</td><td class="inputs"><input name="password" type="password" id="password"><br><span id="password_err" class="err_msg" style="display: none">密码格式有误</span></td></tr><tr><td>验证码</td><td class="inputs"><input name="checkCode" type="text" id="checkCode"><img src="imgs/a.jpg"><a href="#" id="changeImg">看不清？</a></td></tr></table><div class="buttons"><input value="注 册" type="submit" id="reg_btn"></div><br class="clear"></form></div>
<script>//给用户名输入框绑定，失去焦点事件document.getElementById("username").onblur=function () {//获取用户名的值。var username=this.value;//1.创建核心对象var xhttp;if (window.XMLHttpRequest) {xhttp = new XMLHttpRequest();} else {// code for IE6, IE5xhttp = new ActiveXObject("Microsoft.XMLHTTP");}/*2.发送请求*/xhttp.open("GET", "http://localhost:8080//MvcDemo/?username="+username, true);xhttp.send();/*3. 获取响应*/xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {document.getElementById("demo").innerHTML =if(this.responseText == "true"){/*用户名存在*/document.getElementById("username_err").style.display='';}else{/*用户名不存在*/document.getElementById("username_err").style.display='none';}}};}
</script>
</body>
</html>

4.Axio异步框架

提供一些封装好了的AJAX代码来使用。

4.1 AXIOS的使用

get和post两种写法。

post用data属性装值。

不过这个只能发一个参数

4.1.1 配置Axios

把JS文件导入。

4.1.2两种方法的简化。

AJAX，Axio异步框架（对原生AJAX封装）。web分区相关推荐

原生态的ajax如何上传文件,原生ajax和iframe框架实现图片文件上传的两种方式
大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参 ...
如何快速入门Ajax（学习笔记）—— 原生ajax、jQuery、axios
如何快速入门Ajax 1. 服务器的基本概念客户端与服务器 URL地址网页中如何请求数据资源的请求方式 2. 了解Ajax Ajax是什么 Ajax的应用场景 3. jQuery中的Ajax g ...
think php ajax分页,thinkPHP5框架实现基于ajax的分页功能示例
本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法首先看一下tp5 ...
ajax php瀑布流数据库,原生ajax瀑布流demo实例分享
本文主要为大家带来一篇原生ajax瀑布流demo分享(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 简单分为三个文档,有详细的注释:img ...
Ajax 是什么? 如何创建一个 Ajax？
在上世纪90年代,几乎所有的网站都由HTML页面实现,服务器处理每一个用户请求都需要重新加载网页.用户体验极差!由于每次应用的沟通都需要向服务器发送请求,应用的回应时间依赖于服务器的回应时间.这导致了 ...
Ajax（jQuery封装），表单form提交（Ajax），art-template模板引擎，原生Ajax，XML和JSON，axios，跨域和JSONP，防抖和节流，HTTP协议
目录服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
Java中的Listener监听器与Ajax技术和Axios异步框架以及JSON传递接收数据
Listener监听器与Ajax Listener 概念 Listener 表示监听器,是 JavaWeb 三大组件(Servlet.Filter.Listener)之一. 监听器可以监听就是在 ap ...
js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
原生JS封装Ajax插件(同域jsonp跨域)
2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...
java原生封装_[Java教程]原生AJAX封装
[Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...

AJAX，Axio异步框架（对原生AJAX封装）。web分区