Ajax技能：
紧张是把html、css、js、dom 技能结合在一起利用。
在页面不刷新的情形下，和后台的做事器，以及程序进行数据的传输。
页面不刷新：用户在操作页面的时候，当某个操作结束之后，利用AJAX技能和做事器进行交互，但是用户还可以连续再页面上进行其他的操作。用户并不会觉得到页面在和后台交互。
ajax常见运用：
舆图、注书页面光标离焦之后验证某些数据是否可用等（用户可用，用户存在，都是到后台进行交互）。
1.2.ajax的浸染
ajax：在页面不刷新的情形下和做事器进行交互。获取做事器中的任何数据。
1.3.ajax快速入门案例
1.3.1.ajax和做事器交互的实质
1.3.2.获取XMLHttpRequest工具
XMLHttprequest工具是所有浏览器内置的工具。这个工具卖力和做事器之间进行数据的交互。我们在JS代码中，先得到XMLhttprequest工具，然后通过这个工具的向做事器发送数据，同时还要利用这个工具吸收做事器的相应数据，在获取到相应数据之后，利用JS和dom技能，把数据添加到当前的页面上。
function createXMLHttp(){
var xmlhttp;
/
在JS中所有的 非 零、 非null 、 非undefined 都可以任务是 true
window.XMLHttpRequest 利用window工具，调用XMLHttpRequest，
如果当前window工具有XMLHttpRequest，这时就会得到XMLHttpRequest，
如果当前的window工具没有XMLHttpRequest，这时会得到undefined
/
if (window.XMLHttpRequest){//如果能拿到就表示有这样一个工具、如果没有拿到就认为是nudinfed
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp=new ActiveXObject(\公众Microsoft.XMLHTTP\"大众);
}
return xmlhttp;
}
1.4.XMLHttpRequest API 详解
1.4.1.onreadystatechange属性
在xmlhttprequest工具中，供应onreadystatechange属性。这个属性会随着客户端和做事器之间的交互变革供应不同的内容。
onreadystatechange 它须要和一个函数进行绑定，在客户端和做事器之间的状态在改变的时候，都会导致onreadystatechange绑定的函数运行。
1.4.2.open方法
在获取到xmlhttprequest工具之后，我们可以利用这个工具和做事器进行交互，页面不刷新。
获取到xmlhttprequest工具之后，须要和做事器建立连接通道。在xmlhttprequest工具中供应的open方法
open方法中的第一个参数：
设置向做事器发送要求时提交数据的办法：get和post
open方法中的第二个参数：
本次要求的做事器的资源路径。
open方法的第三个参数：
true：表示页面的处理和后台发送要求是异步进行。一样平常都设置true。
false：页面的处理和后台是同步。
1.4.3.Send（）方法
send是将要求的数据发送给做事器。send方法中的参数，只有在post要求时才能书写。
如果get办法，直接书写send，括号中不要书写任何内容。
1.4.4.setRequestHeader方法
如果利用post办法和做事器交互，并且在send中携带参数，须要通过xmlhttprequest中的setRequestHeader设置要求头信息。
1.4.5.readyState属性
onreadystatechange 事宜是针对xmlhttprequest工具和做事器之间交互的
每个状态改变的时候，都会导致onreadystatechange实行。
测试 它xmlhttprequest和做事器之间的状态改变：
xmlhttprequest中供应其余的两个属性：
readyState：记录客户端和做事器之间每步状态变革
status：记录做事器和客户端之间相应的信息变革
1.4.6.status属性
1.4.7.responseText属性
xmlhttprequest工具中供应的2个属性来获取做事器相应的数据：
responseText：它吸收做事器相应的所有文本数据。
responseXML：它吸收做事器相应的xml格式的数据。
后台相应数据的时候，设置如下：
ajax中利用responseText吸收相应的数据。
1.4.8.responseXML属性-理解
ajax中利用responseXML吸收数据。
这时吸收到的数据之后，须要利用JS和xml DOM技能解析相应的xml文档数据。
1.5.ajax技能和做事器交互模版代码：
【XMLHttpRequest】：
Ø属性:
readyState :XMLHttpRequest的状态
onreadystatechange :当XMLHttpRequest状态改变的时候触发一个函数.
status :得到相应的状态码. 200 , 404 ...
responseText :得到相应的文本数据.
responseXML :得到相应的XML的数据.
Ø方法:
open(要求办法,要求路径,是否异步) :异步去向做事器发送要求.
send(要求参数) :发送要求.
setRequestHeader(头信息,头的值) :处理POST要求办法的中文问题.
Ø创建XMLHttpRequest工具:
IE :将XMLHttpRequest工具封装在一个ActiveXObject组件.
Firefox :直接就可以创建XMLHttpRequest工具.
function createXMLHttp(){
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp=new ActiveXObject(\"大众Microsoft.XMLHTTP\公众);
}
return xmlhttp;
}
【AJAX的入门】
ØAJAX的编写的步骤:
Ø 第一步：创建一个异步工具.
第二步：设置工具状态改变触发一个函数.
第三步：设置向后台提交的路径
第四步：发送要求.
ØGET办法提交要求:
function ajax_get() {
// 1.创建异步工具
var xhr = createXMLHttp();
// 2.设置状态改变的监听 回调函数.
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){ // 要求发送成功 // 相应也成功
// 得到相应的数据:
var data = xhr.responseText;
// 将数据写入到DIV中:
document.getElementById(\"大众d1\公众).innerHTML = data;
}
}
// 3.设置要求路径
xhr.open(\"大众GET\公众,\公众/day15/ServletDemo1?name=aaa&pass=123\"大众,true);
// 4.发送要求
xhr.send();
}
ØPOST办法提交要求:
function ajax_post(){
// 创建异步工具:
var xhr = createXMLHttp();
// 设置监听:
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){ // 要求发送成功 // 相应也成功
// 得到相应的数据:
var data = xhr.responseText;
// 将数据写入到DIV中:
document.getElementById(\公众d1\"大众).innerHTML = data;
}
}
// 打开路径:
xhr.open(\"大众POST\"大众,\"大众/day15/ServletDemo1\"大众,true); xhr.setRequestHeader(\"大众Content-Type\"大众,\公众application/x-www-form-urlencoded\公众);
// 发送要求 post携带参数:
xhr.send(\"大众name=张三&pass=123\"大众);
}
1、获取xmlhttprequest工具
将获取xmlhttprequest工具的js代码单独封装到一个js文件，在须要的jsp页面中导入
var xhr = getXMLHttpRequest();
2、打开连接
xhr.open(“get|post”,”要求的资源路径”,true);
3、发送数据
xhr.send(“携带 参数，仅限于post办法”);
4、设置onreadystatechange事宜对应的函数
5、在函数中止定readyState==4 && status == 200
6、利用responseText获取相应的数据
1.6.案例：
1.6.1.面页准备：
1.6.2.Ajax代码
后台servlet代码
1.7.案例：
1.7.1.Jquery代码：
<script type=\公众text/javascript\公众>
$(function(){
//获取input标签
$(\"大众#username\公众).blur(function(){//给用户名绑定一个离焦事宜
// alert(000);
//获取用户输入的信息
var username = $(this).val();
// alert(username);字母 数字 下划线
if( !username.match(\"大众^\\w{4,12}$\公众)){
//如果用户输入的不符合校验就给用户一个缺点提示。把缺点提示写到span里
$(\"大众#username_res\"大众).html(\"大众<font color='red'>用户名必须由4~12位字母，数字，下划线组成</font>\"大众);
}else{
$.ajax({
type: \"大众POST\公众,
url: \"大众${pageContext.request.contextPath}/demo\"大众,
data: \"大众username=\公众+username,
success: function(data){
$(\"大众#username_res\"大众).html(data);
}
});
}
});
});
//清楚请输入用户名
function clearUserName(){
//获取input标签
var input_name = document.getElementById(\"大众username\"大众);
//判断value值里的内容（请输入用户名）
if(input_name.value == \"大众请输入用户名\"大众){
input_name.value=\"大众\公众;
}
}
</script>
1.7.2.Servlet代码:
