前端知识:js原生态ajax异步处理

前言: 
js通过元素id获取元素及元素值的方法


document.getElementById("元素的id");
//找到该id元素的对象
document.getElementById("元素的id").value;的value值

下面就开始吧 
一、客户端处理(即前端处理)

    //声明变量,用于保存异步传输对象XMLHttpRequest  
    var xhr; 

     //首先判断浏览器内核
     //返回 true 为ie浏览器内核,否则不是ie内核
     if(window.ActiveXObject){

        //为ie内核创建传输对象的方式 
        xhr=new window.ActiveXObject("Microsoft.XMLHTTP"); 
     }else{

        //为非ie 内核浏览器创建传输对象的方式
        xhr=  new  XMLHttpRequest();
     }

     //定义处理请求的url路径    
     // get方式提交请求路径后面可以直接跟参数,如:/servlet/test?name=1” ;
     //post 提交请求 url 后面不能跟参数
     var url=”/servlet/test.do” ;  


    //如果是get方式发送请求还需编码处理,post则不需要
    //get方式发送请求的编码处理方式 
    //客户端两次编码 服务端一次解码 
    //encodeURI方法用来编码的系统函数
    //第一个参数表示需要编码的字符串
    //第二个参数表示编码格式
    url = encodeURI(url ,” UTF-8” );
    url = encodeURI(url ,” UTF-8” );


    //定义回调函数 
    //xhr是XMLHttpRequest 对象 
    //xhr.onreadystatechange异步传输对象状态改变事件
    xhr.onreadystatechange=function (){

        //xhr.readyState异步传输状态属性,
        //异步传输就绪状态一共有5个值,分别为0、1、2、3、4
        //xhr.readyState==4 表示服务端已经 处理完 请求
        //xhr.status==200 表示服务端 成功 处理请求
        if(xhr.readyState==4 && xhr.status==200){

            xhr.responseText;//获取服务端写回来的字符串

            /*然后在这里写处理代码*/
        }
     }

    //建立连接,open()方法用来建立连接
    //第一个参数表示发送请求的方式(get或者post)
    //第二个参数表示处理此次请求的url路径
    //第三个参数表示是不是异步的(true是异步的)
    xhr.open(“get”,url,true);

    //如果是post提交请求,想要把参数发送给服务端,
    //必须要在发送请求前加如下代码  
    //xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");


    //get方式发送请求,send()方法中的参数填null
    xhr.send(null);

    //如果用post方式发送请求,send()方法中参数写要发送给服务端的数据
    //xhr.send("name=1&pass=2");

二,服务端处理(及后台处理)

//在doget()方法中调用post()方法,这里用的是servlet
public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request,response);
}

//在post()方法中编写处理程序
public void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {

    //设置服务端的中文编码,不设置此编码 发送中文给客户端会乱码
    response.setContentType("text/html;charset=utf-8");

    //获取客服端传过来的数据
    request.getParameter("name");  

    String mess="这里是写发送给客服端的数据";

    //客户端是get方式提交需要解码,
    //如果客户端是post方式提交请求则不需要此解码,
    //第一个参数表示要解码的字符串
    //第二个参数表示解码的格式  
    URLDecoder.decode(mess,"UTF-8"); 

    //发送数据给客户端(将数据写回到客户端)
    response.getWriter().println(mess);

}
web前端学习;http://www.zhihaijiangku.com
posted @ 2018-02-22 15:47  知了乐了  阅读(170)  评论(0编辑  收藏  举报