未封装的Ajax与中文乱码问题

Ajax对象属性和方法：
abort()--取消请求
getAllResponseHeaders()--获取响应的所有HTTP头
getResponseHeader()--获取指定的HTTP头
open(method,url)--创建请求,method为请求类型GET/POST
send()--发送请求
setRequestHeader()--指定请求的HTTP
onreadystatechange--发生任何状态变化时的事件控制对象
readyState--请求的状态:(1) 0-尚未初始化;(2) 1-正在发送请求;(3) 2-请求完成;(4) 3-请求成功，正在接受数据;(5) 4-数据接收成功
responseText--服务器返回的文本
responseXML--服务器返回的XML，可以当做DOM处理
status--服务器返回的HTTP，请求响应状态，常用的有：
200-表示请求成功
202-请求被接受但处理未完成
400-错误的请求
404-未找到资源
500-服务器内部错误，如JSP代码错误或java代码等

****Ajax发送一部请求步骤代码：****
1.获取Ajax对象
var xhr = getXhr（）
function getXhr(){
var xhr = null;
if(window . XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
return xhr;
}
2.1:发送get请求
xhr.open(‘get‘,URI,true);
open（）方法可以理解为准备工作，填写发送请求前的信息的准备。
第一个参数位置，使用“get”即发送GET请求。
第二个参数位置，填写发送请求的地址，如果在发送GET请求时需要在地址中携带参数值，可以通过“？”的方式来追加“name=value”对象
第三个参数位置，为boolean类型的值。当该boolean值为true时，服务器请求是异步进行的，也就是脚本执行send（）方法后不等待服务器的执行结果，而是继续执行脚本代码；当该boolean值为false时，服务器请求是同步进行的，也就是脚本执行send（）方法后等待服务器的执行结果的返回，若在等待过程中超时，则不再等待，继续执行后面的脚本代码！
注意：该方法还没有真正的发送请求。
xhr.open（‘get‘,‘xx.do?uname=Bear‘,true）;
xhr.onreadystatechange = fn;
xhr.send(null);
2.2:发送post请求--前三步与发get请求相同，post请求将请求参数作为send()的参数发送。
(1)创建AJAX对象
(2)通过open()方法设置AJAX对象发请求前的必要数据
(3)指定事件响应的方法
(4)调用send()方法发起请求
xhr.open(‘post‘,‘ xx.do‘ , true);
xhr.setRequestHeader(‘content-type‘,‘applicaton/x-www-form-urlencoded‘);
xhr.onreadystatechange = fn;
xhr.send(‘uname = Bear‘);
4.编写后台java代码
public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType(
"text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String uri = request.getRequestURI();
String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(action.equals("/check_username")){
String username = request.getParameter("username");
if("王小熊".equals(username)){
out.println("用户名已经存在");
}else{
out.println("可以使用");
}
}
out.close();
}
}
5.编写事件处理函数
xhr.onreadystatechange=function(){
if(xhr.readyState == 4 && xhr.status==200){
var txt = xhr.responseText;
//定位DOM节点，添加文本，实现刷新
$(‘s2‘).innerHTML = ‘‘;

}
};
解决get请求时的乱码问题：
step1.指定字符集进行解码--Tomcat安装路径中可以修改conf/server.xml文件中<Connector URIEncoding="UTF-8">(70行左右) ,使得tomcat按UTF-8方式解码。
step2.使用encodeURI对请求地址进行编码。encodeURI会使用utf-8对请求地址中的中文参数进行编码,针对 IE
var uri = ‘xxx.do?uname=‘+$F(‘username‘);
xhr.open(‘get‘ , encodeURI(uri) , true);
解决post请求时的乱码问题：
step1.服务端
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
step2.客户端
function check_username(){
//获得ajax对象
var xhr = getXhr();
//发送请求
var uri = ‘check_username.do?username=‘ + $F(‘username‘);
xhr.open(‘get‘,encodeURI(uri) ,true);
xhr.onreadystatechange=function(){
/*只有xhr的readyState等于4时，hr才获得了服务器返回的所有数据。*/
if(xhr.readyState == 4 && xhr.status == 200){
//正确数据
var txt = xhr.responseText;
$(‘username_msg‘).innerHTML = txt;
}else{
//发生了错误
$(‘username_msg‘).innerHTML =‘验证用户名出错‘;
}
};
$(‘username_msg‘).innerHTML = ‘正在检查...‘;
xhr.send(null);
}