1.Ajax是什么

全称：Asynchronous Javascript And XML（异步JavaScript和xml）

并非新的技术，而实把原有的技术整合到一起：

1.使用CSS和XHTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。

2.Ajax有什么用

网页如果想要刷新局部内容。那么需要重新载入整个网页。用户体验不是很好(例如：当我们提交form表单的时候)。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

3.内部原理

诚如我们前面所说的， Ajax 并不是一项新技术。而是包装了现有的技术，然后使用他们来完成工作而已。

那么现在给大家举个例子，还是以咱们的判断用户名是否已被注册为例。

传统方式：

1. 输入用户名，

2. 点击一个按钮，校验。

3. 把数据提交给服务器

4. 服务器在后台帮助我们完成校验，并且反馈信息。

5. 我们在浏览器上提示用户，给出结果

Ajax方式：

ajax方式与前面的方式其实从要做的事情来说，是一样的。 ajax也没有牛到，不用去访问服务器就知道你的用户名是否已被占用。那么它是如何工作的呢?

1. 通过JS 获取咱们的输入框文本内容 document.getElementById(“username”).value
1. 通过XmlHttpRequest 去执行请求。 XmlHttpRequest 其实就是 XML + http + Request 的组合。
1. 请求结束后，收到结果，再使用 js 去完成提示。
1. 可以在顺便配合 css 样式来增加提示效果。

4.使用

前面介绍的都是概念性的，只需要知道Ajax是干啥的就欧克了（后面直接用Jquery）且提交数据有两种方式：

4.1 get方式

总结一下下面的代码内容（注释解释的已经很详细了）：总共分为三步:

1.创建XmlHttpRequest对象这部分创建的对象，由于需要针对不同的浏览器，需要做出判断，所以不用直接写，以后直接拷贝即可。
2.发送请求注： request对象通过第一步的XmlHttpRequest得到。 request.open(“GET”,”/AjaxAndJQuery/demoServlet01?name=’eric’&password=’123′”,true); request.send();
3.响应服务器发送过来的数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //创建XmlHttpRequest对象
    function  ajaxFunction(){
       var xmlHttp;
       try{ // Firefox, Opera 8.0+, Safari
            xmlHttp=new XMLHttpRequest();
        }
        catch (e){
           try{// Internet Explorer
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
              }
            catch (e){
              try{
                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
              catch (e){}
              }
        }
        return xmlHttp;
     }
     //在发送请求的同时，获取服务器响应的内容
    function get() {
        //1.创建xmlhttprequest 对象
        var request=ajaxFunction();
        //2.发送请求
        /*
        参数一： 请求类型  GET or  POST
        参数二： 请求的路径
        参数三： 是否异步， true  or false
        */
        // request.open("GET","/AjaxAndJQuery/demoServlet01",true);
        //带数据的去请求服务器
        request.open("GET","/AjaxAndJQuery/demoServlet01?name='eric'&password='123'",true);
        request.send();
        //3.响应服务器发送过来的数据
        /*
        注册监听的意思，有点像注册一个监听器，一会准备的状态发生了改变
        那就执行=右边的方法
        */
        request.onreadystatechange=function() {
            //前半段表示readyState==4求已完成，且响应已就绪
            //status==200
          if (request.readyState==4 && request.status==200)
            {
           //显示响应的信息
           alert(request.responseText);
            }
          }
    }
</script>
</head>
<body>
    <a href="" onclick="get()">Ajax通过Get发送数据</a>
</body>
</html>

4.1 post方式

Post请求和 Get请求基本相似，区别就在于数据传输方式不同。 Get方式是直接在地址的后面拼接的。但是Post的方式是通过send 方法传输过去的。并且还要设置一个请求头。

同上总结一下以下代码：

1.创建XmlHttpRequest对象
2.发送请求 不携带数据： request.open(“POST”,”/AjaxAndJQuery/demoServlet01″,true); request.send(); 携带数据：
request.open(“POST”,”/AjaxAndJQuery/demoServlet01″,true); request.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”); request.send(“name=eric&password=123456”);
3.接收数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//创建XmlHttpRequest对象
function  ajaxFunction(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
       try{// Internet Explorer
             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
        catch (e){
          try{
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch (e){}
          }
    }
    return xmlHttp;
 }
    function Post() {
        //1.注册XmlHttpRequest对象
        var request=ajaxFunction();
        //2.发送数据
        request.open("POST","/AjaxAndJQuery/demoServlet01",true);
        //request.send();
      //注意：如果我需要带参数请求呢？如果需要带参访问，则需要加上这两行
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      //解释：如果使用的是POST方式带数据，那么这里要添加请求头，并说明提交的数据类型是一个经过URL编码的form表单数据
        request.send("name=eric&password=123456");

        //3.接收数据
        /*
        注册监听的意思，有点像注册一个监听器，一会准备的状态发生了改变
        那就执行=右边的方法
        */
        request.onreadystatechange=function() {
            //前半段表示readyState==4求已完成，且响应已就绪
            //status==200
          if (request.readyState==4 && request.status==200)
            {
           //显示响应的信息
           alert(request.responseText);
            }
          }
    }
</script>
<title>Insert title here</title>
</head>
<body>
    <a href="" onclick="Post()">Ajax通过Post发送数据</a>
</body>
</html>

4.2获取服务器端的响应

数据提交到的两种请求Get 和 Post基本上都会使用后，就应该想想获取数据的问题了。前面我们都一直很无私的往服务器提交数据，那么服务器返回的那些数据，我们又该怎么通过Ajax去拿呢? 这里就要靠xmlhttprequest的事件 onreadystatechange ，这是用来监听我们请求的一些状态，比如：成功了还是失败了。如果成功，想获取数据，得靠xmlhttprequest的responseText 或 responseXML 属性

/*
    注册监听的意思，有点像注册一个监听器，一会准备的状态发生了改变
    那就执行=右边的方法
        */
        request.onreadystatechange=function() {
            //前半段表示readyState==4求已完成，且响应已就绪
            //status==200
          if (request.readyState==4 && request.status==200)
            {
           //显示响应的信息
           alert(request.responseText);
            }
          }

案例：校验用户名

需求：在登录页面，当我输入用户名的时候，能够去数据库判断该用户名是否存在。

直接上代码了… Controller类

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  //获取从页面传输过来的name，调用持久层的方法，将返回结果传输到表现层
  request.setCharacterEncoding("UTF-8");
  //作用是设置对客户端请求进行重新编码的编码。
  String username = request.getParameter("username");
  userDao dao = new userDaoImpl();
  System.out.println(username);
  try {
    Long result = dao.getUserName(username);
    response.getWriter().println(result);
  } catch (SQLException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
  }
}

前端页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//创建XmlHttpRequest对象
    function  ajaxFunction(){
       var xmlHttp;
       try{ // Firefox, Opera 8.0+, Safari
            xmlHttp=new XMLHttpRequest();
        }
        catch (e){
           try{// Internet Explorer
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
              }
            catch (e){
              try{
                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
              catch (e){}
              }
        }
        return xmlHttp;
     }
    function checkUserName() {
        //1.获取XMLHttpRequest对象
        var request=new ajaxFunction();
        //获取文本框的name值
        var name=document.getElementById("name").value;
        //2.发送消息
        /*想尝试一下已get方式，但是失败了
        String str="/AjaxAndJQuery/userServlet?username="+"'"+name+"'";
        alert(str);
        request.open("GET",str,true);
        request.send(); */
        request.open("POST","/AjaxAndJQuery/userServlet",true);
      //注意：如果我需要带参数请求呢？如果需要带参访问，则需要加上这两行
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      //解释：如果使用的是POST方式带数据，那么这里要添加请求头，并说明提交的数据类型是一个经过URL编码的form表单数据
        request.send("username="+name);
        //3.接收数据
        /*
        注册监听的意思，有点像注册一个监听器，一会准备的状态发生了改变
        那就执行=右边的方法
        */
        request.onreadystatechange=function() {
            //前半段表示readyState==4求已完成，且响应已就绪
            //status==200
          if (request.readyState==4 && request.status==200)
            {
               //显示响应的信息
               //alert(request.responseText);
               var result=request.responseText;
               if(result==1){
                   document.getElementById("span01").innerHTML="<font color='red'>该用户名已存在</font>";
               }else{
                   document.getElementById("span01").innerHTML="<font color='green'>合法!</font>";
               }
            }
          }

    }
</script>
<title>Insert title here</title>
</head>
<body>
<table border="1" width="500">
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="text" name=""></td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td><input type="text" name=""></td>
        </tr>
        <tr>
            <td>简介</td>
            <td><input type="text" name=""></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="注册"></td>
        </tr>
    </table>
</body>
</html>

文章永久链接：https://tech.souyunku.com/36614

Ajax的使用，内部原理的介绍，get/Post提交数据