第一：概念
Ajax技术和jquery技术
1.这两个是客户端编程
2.ajax的含义：asynchronous javascript and xml：异步的javascript和xml
----异步通讯：单独的启动一个线程访问服务器。
----实现页面的局部更新。（也是通过线程）
----浏览器进行异步通讯的内置对象是xmlHttpRequest,其实这是个函数，也是ajax的类型
xmlHttpRequest对象的属性有readStart是就绪状态,有01234。status:是状态码200,404等 responseTExt:是响应的数据
3.如果是ie6之前的浏览器没有ajax 的内置对象，因此创建了一个和ajax内置对象功能上相同的对象
onreadystatechange:就绪状态改变，相当于onclick
4.异步提交要用到onblue失去焦点事件，失去焦点的时候提交部分内容，而不是提交整个表单，因此部分内容异步提交了。
而且异步提交的好处是不改变当前页面（不会跳转到其他页面），而是还在当前页面
5.ajax能够单起一个线程，实施异步通讯。
6.ajax能够发送请求，也能够获得处理响应
三个属性xhr.readyState，xhr.status==200，xhr.responseText
ajax的对象xhr的字符串形式：object XMLHttpRequest，说明这个是一个object（也就是一个对象），后面这个单词表示创建这个对象的类型，他是个函数
7.typeof XMLHttpRequest表示判断当前浏览器是否支持这个XMLHttpRequest函数（是不是能用这个）。目的是创建一个兼容浏览器的ajax内置对象
8.响应信息先会到达ajax对象xhr中，内容放在ajax对象里面的responseTest属性里，响应状态码放在status属性里
第二：进一步理解：
面试ajax的请求状态：1.创建对象 2.初始化。3.发送请求。4，等待。5，响应结束
ajax的作用：异步刷新，局部刷新
1.Ajax:异步的javascript and xml。。。其实Ajax就是XMLHTTPRequest对象
进一步理解：
---1.在哪用到xml?答：在调用数据库的时候使用xml封装数据库，然后页面上解析xml里面的内容，但是我们平时用不到xml，当没有用xml的时候其实就成了异步的js了。
---2.在jsp页面上使用浏览器内置对象当做客户端和服务器端的中间桥梁，也就实现了客户端可以重复发送功能的目的，因此此时客户端发送的请求不是给了服务器端，而是先给了浏览器对象。
2.加入线程，调用等待的方法，也就是说在页面发送请求的时候，如果服务器端没有响应回来的时候该页面无法操作呢。也就是说如果某个地方没有响应结束的时候整个页面都要等待（看到一个空白的网页）。
3同步：客户端向服务器发送请求的时候，只有等到服务器响应之后客户端才能发送下一个请求（同步通讯能够保证质量）
4.异步通讯：客户端可以连续向服务器端发送请求，不用等待服务器的响应，不管服务器端的响应问题。
那么谁来接收服务器端的响应（数据）呢，答：客户端不在等待服务器的响应了，把等待和接收服务器端的响应的工作交给了第三方对象（注意是个对象）。
5.异步工作的工程：浏览器不直接向服务器端发送请求，浏览器把请求交给一个对象，这个对象在把请求给服务器。（因此客户端不管服务器是否给我响应了，因为响应不再交给客户端了，而是交给了第三方对象）
然后由第三方对象把服务器端的响应交给客户端（第三方对象有个监听的功能，当接受到响应的时候自动把响应交给客户端）。减少了延时。
6.这个第三方对象就是浏览器对象，在本地放着，是个Bom（window浏览器,例如window的location对象）对象（Bom对象就是在javascript中的知识）。由于使用的是javascript响应的，因此看不到浏览器跳一下（就像dom模型中的刷新，或者说是<a href="javascript:add.action"></a>）。
页面不跳转但是把内容响应给了客户端（客户端的局部变了），因此是局部刷新。（局部刷新就是看不到整个页面在刷新，但是服务器完成了响应）
7.好处：改善客户端体验（其实响应时间没有改变，只是客户端感觉变了）
8.用处：局部刷新，登陆验证。
9步骤：1.创建对象（这个对象是在js中创建的js的对象）、2发送请求，3.回调函数（回调函数是检查状态码是否为4，是4的时候响应给客户端，也就证明了浏览器对象接收响应之后自动发送给客户端，因此有if判断） 4,发送
10、创建第三方对象：也就是window浏览器对象XMLHttprequest
判断：如果是ie浏览器（activeXobject是ie的控件）,就传入ActiveXObject("")：里面的参数是符合微软的（因为ie是微软的）
如果不是ie就直接new这个浏览器对象
11.发送请求：
-----1.获得对象，
-----2.初始化（open方法）
-----3.回调函数：（当状态发生变化的时候就会调用回调函数）在客户端发送请求到响应的这个（过程），浏览器对象的状态在一直改变。onreadystatechange()事件是当状态发送改变的时候（注意是事件），这个事件调用一个回调函数。
因此只要状态发生变化的时候都会调用这个函数，但是由于状态为4的时候才响应结束，因此我们要进行判断，判断状态码是否为4，如果为4在响应给客户端。
一共有五个状态：0：对象的创建。1：对象初始化。2：客户端发送请求。3：服务器端做出响应。4：响应结束
常用的：内置对象的1个事件（也称函数）：onreadystatechange()是状态改变的时候，
内置对象的三个属性：status是状态码。readeyState:就绪状态。responesTest是获得服务器端响应给客户端的数据
-----4.发送 ，get是null,post是具体的内容。响应结束并且服务器端没有异常的时候xhr.responesTest
12：注意：get提交要注意两点：
----1.get提交的中文乱码处理：urlencoder是编码。urldecoder是解码。
send发送的是时候按gbk编码，服务器默认的把数据按照iso-8859-1解码。因此我们先要按iso-8859-1编码（也就是给他后退一步），然后我们就得到原来的gbk编码了，然后我们在重新解码。
其实就是提交的时候编码两次（第一次编码是tomcat使用iso编码的，第二次是在send提交的时候使用gbk编码的），因此我们要解码两次
-----2.缓存：get提交产生缓存，以前提交的内容放入缓存，如果下次使用相同的数据就不在走action了，而是直接访问本地缓存。
方法1客户端解决缓存：所为要提交的内容改变，其实也就是url改变了，因为url里面就有要提交内容。因此为了解决缓存问题，我们在url后面加一个动态的时间毫秒数，这样就保证每次都会改变url路径。
方法2服务器端解决缓存：在servlet中写resp.setHeader("cache-control","no-cache");是设置响应报头。第一个参数是缓存设置的意思，第二个参数是不产生缓存的意思
注意：相当于jsp中的：<meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> 这三个。
说明：不管是什么请求都会产生缓存，只是用不用这个缓存的问题
方法1的说明.get提交的时候，首先检查url的变化，如果url没有变化，就认为当前请求是原来的请求，因此我们修改url路径，加上一个时间的毫秒数
方法2的说明.get提交的时候，首先检查url的变化，如果url没有变化，就认为当前请求是原来的请求，因此不会进入服务器而是直接访问缓存，因此我们在action层写去除缓存的代码。
-------------------------------------
第三：get提交
1.web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>u</servlet-name>
<servlet-class>com.action.UserInfoAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>u</servlet-name>
<url-pattern>/userInfoaction</url-pattern>
</servlet-mapping>
</web-app>
2.jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
function createXmlHttpRequset(){
if(window.ActiveXObject){//如果是IE浏览器
return new ActiveXObject("Microsoft.XMLHTTP");//创建IE的浏览器对象
}else{
return new XMLHttpRequest();//创建其他浏览器对象
}
}
var xhr;
function sendRequest(){
alert("发送");
xhr=createXmlHttpRequset();//获得浏览器内置对象
var uname=document.getElementById("u").value;
alert("uname="+uname);
xhr.open("get","userInfoaction?uname="+uname,true);//发送请求,第三个参数表示是否异步，是。默认情况下也是true，因此第三个参数可以省略
alert("连接成功");
xhr.onreadystatechange=callback;//从发送到响应完成这整个过程受onreadystatechange事件监听，因此发送的代码写完之后立马写监听的代码，也就是回调函数。
xhr.send(null);//发送。get提交传入的参数是null,因为get提交把要提交的内容写在url里了,post提交由于不能问号传参所以只能把要提交的内容在send里写
}
function callback(){//回调函数，用来监听状态码的变化，并接收服务器端响应之后自动给客户端浏览器
var span=document.getElementById("msg");
alert("进入回调函数，就绪状态为："+xhr.readystate);//这里会弹出四次，分别对应着状态码为1，2，3，4。之所以没有输出0,是因为我们把回调函数放在了创建内置对象的后面了，所以他无法监听到创建内置对象的过程
if(xhr.readystate==4&&xhr.status==200){//回调函数用来监听所有状态的变化，但是我们在这里进行判断之后就只监听响应状态了。
alert("回调函数此时状态为4，正在进行响应");
var flag=xhr.responseText;//接收服务器端的响应
if(flag=="true"){
span.innerText="用户名可用.....";
}else{
span.innerText="用户名已经被占用.....";
}
}
}
</script>
</head>
<body>
<embed src="music/frx.mp3"/>
<form action="" method="post">
<input type="text" id="u" name="uname"><span id="msg"></span>
<input type="button" value="提交" onclick="sendRequest()">
</form>
</body>
</html>
3.action层
public class UserInfoAction extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String uname=req.getParameter("uname");
System.out.println("---------"+uname);
UserInfoDao udao=new UserInfoDaoImpl();
boolean flag=udao.checkUnameExists(uname);
PrintWriter out=resp.getWriter();
out.print(flag);
}
第四：post提交
1.action层
package com.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.dao.UserInfoDao;
import com.dao.impl.UserInfoDaoImpl;
import com.entity.UserInfo;
public class UserAction extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String uname=req.getParameter("uname");
UserInfoDao udao=new UserInfoDaoImpl();
List<UserInfo> userlist=udao.findAll(uname+"%");//通过姓名找学生（通过关键字找学生）
PrintWriter out=resp.getWriter();
StringBuffer sb=new StringBuffer();//Stringbuffer接收一个长度可变的字符串，也就是把遍历出来的集合放在长度可变的字符串里
/* for(UserInfo u:userlist){
sb.append(u.getUname()+",");//把集合放在字符串里了，为什么要放在字符串里而不是放在集合里，因为有逗号
}*/
for(int x=0;x<userlist.size();x++){
if(x==userlist.size()-1){
sb.append(userlist.get(x).getUname());
}else{
sb.append(userlist.get(x).getUname()+",");
}
}
out.write(sb.toString());//write里面要写入一个字符串
}
}
2.jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
function createrXmlHttpRequest(){
if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}else{
return new XMLHttpRequest();
}
}
var xhr;
var d=new Date();
function isExists(){//检查用户名的
//alert("进入ajax");
var uname=document.myform.uname.value;
xhr=createrXmlHttpRequest();
xhr.open("post","userAction");
xhr.onreadystatechange=callback;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//发送请求之前要写这句话
xhr.send("uname="+uname);
}
function callback(){
//alert("进入回调函数");
if(xhr.readyState==4&&xhr.status==200) {
var mydiv=document.getElementById("message");
var res=xhr.responseText;//接收服务器端的响应结果
//alert(res);
mydiv.innerHTML="";//由于是循环，因此每输入一个数都会有一次响应结果，这里是把上一次的响应结果清空，从而接收这次的响应。
var arr=res.split(",");//把响应结果按照逗号分开，并保存在一个数组中
for(var x=0;x<arr.length;x++){
var div=document.createElement("div");
div.onmouseover=changeColor;//鼠标划过的时候给个颜色
div.onmouseout=changeColor2;//鼠标离开的时候变成白色
div.onclick=changeTxt;//点击的时候给文本框赋值
var txt=document.createTextNode(arr[x]);
div.appendChild(txt);
mydiv.appendChild(div);
// mydiv.onmouseout=kong;//文本框失去焦点的时候清空下面的数据
}
}
}
function changeColor(){//改变颜色并把值显示在文本框上面
this.style.backgroundColor="blue"; //改变颜色，鼠标划过的时候的颜色
}
function changeColor2(){
this.style.backgroundColor="white";//鼠标离开的时候变成白色
}
function changeTxt(){//给文本框赋值
var res=xhr.responseText;
if(res.length!=0){
document.getElementById("uname").value= this.innerHTML;//赋值。把当前选择的内容的值当做文本框里的值;
}
isExists();
}
function kong(){//把下面的内容不显示
var mydiv=document.getElementById("message");
mydiv.innerHTML="";
}
</script>
</head>
<body>
<form action="" name="myform" method="post">
<h3>搜索用户名</h3>
<input type="text" name="uname" id="u" onkeyup="isExists()">
<div id="message"></div>
<%--<input type="button" value="提交" onclick="isExists()">
--%></form>
</body>
</html>