j2ee21：ajax01：get提交、post提交(完成用户名搜索)，两者的区别(中文乱码问题、缓存问题)

第一：概念

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>