一、Ajax异步加载技术
1、什么是Ajax ：
概念： Asynchronous JavaScript and XML 的缩写。
Ajax 不是具体的一个操作对象，而是一种技术的描述。
是一种在 XML，HTML，CSS 和 JavaScript 的帮助下创建更好，
更快和更具交互式 Web 应用程序的新技术。
（1）、ajax的由来，
因为我们html网页加载是整体加载的，每次我们页面上要有一些变动的时候
都需要把整个页面重新加载一遍，非常耗费资源。
如果我们想要让页面上的某一个小模块，数据发生变化。 用html做局部的加载是做不到的。
这就需要我们用到今天学习的技术，Ajax 异步加载技术。
（2）、ajax技术，是实现页面局部刷新的技术，
好处：效率更高更节省资源，提升用户体验。
（3）、ajax技术的实现，依靠的是什么？
使用支持异步加载的请求对象，有两个可用请求对象。
XMLHttpRequest IE6以上的浏览器，及其他浏览器
ActiveXObject IE6之前版本的浏览器。
2、ajax 可以做什么？
*例如：页面局部数据的刷新，例如表单的校验。
之前我们是表单提交，才可以校验。
现在我们有了Ajax 技术，可以在用户填写数据的时候，就进行校验。
在后台，根据用户填写数据时候触发的 输入框焦点变化的事件
就可以，根据触发事件使用ajax 技术，向服务器发送请求，校验数据了。
3、使用ajax 技术，具体怎么做
具体案例分析：校验html页面中，用户名输入是否合法，是否可以使用。
=1= 做一个html页面，table 表格里面有一个输入框，用于输入用户名。
=2= 我们可以通过 该输入框的onblur 失去焦点事件，判断用户已经输入完内容了
=3= 在javaScript代码中，然后使用ajax技术，在不刷新整体页面的情况下，请求servlet，
=4= 通过servlet校验该 用户名，是否可以使用。
=5= 根据servlet服务器返回结果，在html页面进行逻辑提示
（1）、html页面中的，表单代码。
(注意输入框，写onblur属性，通过avlidate来实现失去焦点事件具体执行代码要做的操作。)
<form action="" name="form1">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" id="name" name="name" onblur="avlidate();" > <font color="#ff0000">*</font></td>
<td><div id="nameDiv" style="display: inline;" ></div></td>
</tr>
</table>
</form>
（2）、html页面中，引入JQuery 的js包。
<head>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>
（3）、在body标签中，写js代码。
<script type="text/javascript">
function avlidate(){
var name = $("#name").val();
if(name == null || name == ""){
$("#nameDiv").html("名字不能为空！");
}else{
//ajax 具体代码实现，异步访问servlet，服务器校验数据合法性
}
}
</script>
（4）、ajax 实现的步骤，及具体代码
4.1 ajax 实现步骤
=1= 创建异步——>请求对象
=2= 创建要访问数据库具体servlet地址的 url
=3= 设置请求对象的请求方式 和请求地址
=4= 根据请求状态的改变，调用callback函数。
=5= 设置请求头信息
=6= 发送请求
=7= callback 回调函数中，处理servlet 返回的结果。
=1= 获取到ajax异步——>请求对象
* 知识点学习：
异步请求对象的使用需要分两种情况使用不同的对象。
第一种： IE6以后的版本及市面上其他浏览器使用对象 ：XMLHttpRequest
new XMLHttpRequest()
第二种： IE6以前的版本： ActiveXObject
new ActiveXObject("Microsoft.XMLHTTP");
* 使用哪一个，可以根据 window.XMLHttpRequest 的值进行判断。
window.XMLHttpRequest
值为true的时候说明是IE6之后的浏览器，用：XMLHttpRequest
值为false的时候说明是IE6之前的浏览器，用：ActiveXObject
* 具体代码编写：
var req = createXMLHttpRequest();
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
=2= 创建要访问数据库具体servlet地址的 url
因为用户通过浏览器访问我们部署在服务器的 网站里面的页面，
servlet 和 用户访问的网页，是在同一个web项目中，所以可以用相对路径。
比如，给servlet 设置的url-pattern 值为 s2 ，则可以直接访问s2
var url ="s2";
=3= 设置请求对象的请求方式 和请求地址
调用请求对象的req.open()方法
其中访问方式有两种，一种是get方式，一种是post方式。
第三个参数是默认值，true ，可以省略不写。
req.open("POST",url,true);
req.open("POST",url);
=4= 根据请求状态的改变，调用callback函数。回调函数进行逻辑处理。
req.onreadystatechange = callback;
=5= 设置异步请求的，请求头信息（固定写法，知道怎么用就可以，直接复制用）
req.setRequestHeader("content-Type","application/x-www-form-urlencoded");
=6= 发送请求，上面是get方式请求，可以把数据拼接，post方式，发送方法-携带数据
req.send("name="+name);
=7= callback 回调函数中，处理servlet 返回的结果。
这里需要两个请求状态的认识：
第一个 ：req.readyState 请求就绪状态码，
0 准备状态 ：XMLHttpRequest对象未完成初始化
1 发送请求 ：XMLHttpRequest对象开始发送请求
2 完成请求 ：XMLHttpRequest对象的请求发送完成
3 读取响应 ：XMLHttpRequest对象开始读取响应
4 响应完成 ：XMLHttpRequest对象读取响应结束
第二个 ：req.status HTTP状态码
200 服务器正确返回响应
404 请求的资源不存在
500 服务器内部错误
403 没有访问权限
http状态码分类 & 常见的状态码（在课程资料中总结）
* 设置接收结果形式：
客户端——>指定服务器以字符串形式返回结果，并接收这个结果
用请求对象的 req.responseText; 引用来接收。
* 具体代码实现：
function callback(){
if(req.readyState == 4 && req.status == 200){
var data = req.responseText; //响应内容，是字符串类型。
if(data == "true"){
$("#nameDiv").html("您输入的用户名已存在！");
}else{
$("#nameDiv").html("用户名可以使用。");
}
}
}
服务器端代码：
* dopost方法中内容。
request.setCharacterEncoding("utf-8");
doGet(request, response);
* doGet方法中的内容。
//接收用户端发送过来的异步请求，根据情况，来分析用户的请求，返回结果给用户。
//先要拿到请求的 参数。name 参数通过get 请求的放回，传过来了。
String name = request.getParameter("name");
boolean used = false;
if(name =="ajax"){
//提示给客户端，用户名已被占用。
used = true;
}else{
//可以使用。
used = false;
}
//给客户端响应回去。used的状态。让客户端自己根据used状态，逻辑处理。
//设置响应的内容文本格式，和字符编码
response.setContentType("text/html;charset=utf-8");
//获取输出打印对象。
PrintWriter out = response.getWriter();
//调用print方法，输出used 状态。
out.print(used);
//刷新输出流和关闭输出流。
out.flush();
out.close();
456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
