AJAX
第一章：AJAX与jQuery
概念：AJAX = Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）。阿贾克斯
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。简言之：是局部刷新技术。异步刷新。
回顾历史：
- Web 1.0 sina sohu 用户被动接受新闻
- Web 2.0 社区，web群 互动 环节增加，用户和服务器交互
- Web 3.0 自媒体，突出客户的实现，客户也可以成为中心，其他人订阅 参与 讨论等
- Web 4.0 物联网时代 自媒体 人 服务器 +机器交互，机器本身也是参与者。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-As9291jx-1589017347355)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200509143743804.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rjD07pgw-1589017347359)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200509143807384.png)]
1.Ajax核心 XMLHttpRequest
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
1.1 对象的创建
let xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
1.2 对象的方法
method：http请求的方法有俩get/post,选择就是get/post。
url：就是View层的页面要提交到服务器的请求，一般是Servlet
async:true：异常请求；false:同步请求
方法 | 描述 |
open(method,url,async) | 创建一个请求 |
send(string) | 将请求发送到服务器。 string：仅用于 POST 请求 |
1.3 onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
属性 | 描述 |
onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 |
status | 200: "OK"404: 未找到页面；500：服务器问题 |
1.4 服务器的响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 | 描述 |
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
2.使用步骤
如何使用ajax，使用有两种：一种是前端的纯粹的使用，node+ajax；一种是后台的，我们关注的是后台。
我们之前增加用户的时候，假设用户名(账户)不能重复，我们之前是没有判断的。
当数据库服务器存在某用户的时候，文本框离开，则报已经存在该用户了；否则，显示可以注册。
- 创建XMLHttpRequest对象
- 设置请求信息open(get|post,url,true|false)
- 向服务器发送请求
- 让XmlHttpRequest对象接受服务器的响应数据，通过创建的回调函数
- 编写服务器端处理客户端请求
步 骤 | 请求方式 | 实 现 代 码 |
初始化组件 | GET | xmlHttpRequest.open( “GET”,url, true ); |
POST | xmlHttpRequest.open( “POST”,url, true ); xmlHttpRequest.setRequestHeader( “Content-Type”, “application/x-www-form-urlencoded” ); | |
发送请求 | GET | xmlHttpRequest.send(null ); |
POST | xmlHttpRequest.send(“key=xxx&type=12&year=2016” ); |
get代码实现：
//1.创建XmlHttpRequest对象,封装一下，封装到一个函数;
function createXhr() {
if(window.XMLHttpRequest)
return new XMLHttpRequest();//如果有，则创建其对象;
else
return new ActiveXObject("Microsoft.XMLHTTP");
}
//2.开始实现我们的目标；离开的事件是blur
$(function () {
//离开的时候，先判断一下；用户名不能为空，实际上应该是正则验证;
$("#name").blur(function () {
let name=$("#name").val();
if(name==null||name==''){//后续使用正则实现
$("#nameinfo").html("用户不能为空!").addClass("nameinfo");
/*刚才的错误是style里面加了一个html的注释，亏!!!*/
}else{
//否则，就是输入的不是空了，有值，那这个值就要看看是否存在于数据库了。
//2.1 这时候要得到XmlHttpRequest对象;
xhr=createXhr();
//2.2设置请求行open,请求后台的Servlet,客户端向服务器发送了一个参数name，值name
xhr.open("get","userServletByName?name="+name,true);
//2.3.发送请求,get的时候不加东西；
xhr.send(null);
//2.4当事件改变Ok的时候，响应的函数；
xhr.onreadystatechange=function () {
//readyState==4;并且状态为200的时候，才OK。
if(xhr.readyState==4 && xhr.status==200){
//定义变量data，接受异步对象xhr的服务器的响应数据;由Servlet来返回
let data=xhr.responseText;
console.log(data);
//暂停一下;
//下面就是根据data响应的数据值做出判断;
//服务器端响应给我们，true|false了.data-->文本;我们把它当成了boolean
if(data=='true'){
$("#nameinfo").html("用户名已经注册").addClass("nameinfo");
}else{
$("#nameinfo").html("用户名可以注册");
$("#nameinfo").css("color","green");
}
}
}
}
});
})
post代码实现：
修改get的2. 3.步骤即可;
//2.2设置请求行open,请求后台的Servlet,客户端向服务器发送了一个参数name，值name
//xhr.open("get","userServletByName?name="+name,true);
xhr.open("post","userServletByName",true);
xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); //必须有;
//2.3.发送请求,get的时候不加东西；
//xhr.send(null);get 没东西;
xhr.send("name="+name);
问题：
1.[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sSltRVVd-1589017347367)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200509155731042.png)]
//向客户端发响应，编码要一致;
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
2.出来2行的问题是需要加判断,并且&&符号；
if(xhr.readyState==4 && xhr.status==200){
代码
}总结一下：
1.了解异步对象XmlHttpRequest
2.了解其四大步骤；
3.通过javaweb代码来实践一下。这个是重点，看视频，一步一步走；
