zoukankan      html  css  js  c++  java
  • 未封装的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);
    }

  • 相关阅读:
    SET TEXTSIZE number
    Oracle 参数之_small_table_threshold
    Oracle等待事件db file parallel read
    ORA-12631 / TNS-12631: Username retrieval failed
    Oracle的Connect By理解
    ORA-01436: 用户数据中的CONNECT BY 循环
    Cortex-M3启动深度解析
    【SmartOS】轻量级多任务调度系统
    物联网智能硬件设备身份验证机制
    物联网智能硬件设备常见攻击方法
  • 原文地址:https://www.cnblogs.com/zihuwuyu/p/4324665.html
Copyright © 2011-2022 走看看