• 未封装的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);
    }

  • 相关阅读:
    未来十年Python的前景会怎样?
    mysql配置mha高可用防火墙未关闭报错
    Cenos7 切换单用户模式
    奇葩问题: lsattr -d /data 显示:----------I--e- /data/
    在Vue 的main.js 文件使用Element-UI的this.$message('msg')
    IIS上部署项目,网页控制台报错,.svg 等文件类型找不到
    git commit 格式
    Entity Framework 插入带有外键的数据,重新添加了外建表里的数据
    element-ui Select 组件传递对象
    Entity Framework Code First实体关联数据加载
  • 原文地址:https://www.cnblogs.com/zihuwuyu/p/4324665.html
Copyright © 2020-2023  润新知