原生的ajax

ajax:异步的js和xml

onreadystatechange：当XMLHttpRequest的状态改变的时候触发的一个函数

status：获得响应的状态码

responseText：获得响应的文本数据

responseXml：获得响应的xml数据

功能的实现主要依赖于js中的XMLHttpRequest对象，他可以像服务器异步的发送请求

后台简单模拟：

String name = req.getParameter("name") ;
  System.out.println(name);
  resp.setContentType("text/html;charset=utf-8");
  //模拟数据
  if("admin".equals(name)){
   resp.getWriter().print("账号已经存在");
  }else{
   resp.getWriter().print("恭喜你");
  }

　　jsp页面的get方式

<input type="text" name="user" onblur="ajax_post()" id="name">
<div id="info" ></div>
<script type="text/javascript">
    function ajax_get(){
        var uname = document.getElementById("name").value ;
        //1，创建异步的对象,这里省略了判断浏览器，像ie的这个对象是在activexobject中
        var ajax = new XMLHttpRequest() ;
        //2，设置状态改变的监听，相当于回调函数
        ajax.onreadystatechange = function(){
            if(ajax.readyState == 4){ //请求发送成功
                if(ajax.status == 200 ){ //响应也成功
                    //获取响应数据
                    var data = ajax.responseText ;
                    //alert(data) ;
                    document.getElementById("info").innerHTML = data ;
                }

            }
        }
        //3，设置请求的路径参数1：请求的方式 参数2：请求的地址，参数3：是否异步
        ajax.open("get","ajax?name="+uname,true) ;
        //4，发送请求,因为这是get请求方式，所以请求参数是null
        ajax.send(null) ;
    }

　　post请求方式

 function ajax_post(){
        var uname = document.getElementById("name").value ;
        //1，创建异步的对象,这里省略了判断浏览器，像ie的这个对象是在activexobject中
        var ajax = new XMLHttpRequest() ;
        //post请求要加上请求头
        
        //2，设置状态改变的监听，相当于回调函数
        ajax.onreadystatechange = function(){
            if(ajax.readyState == 4){ //请求发送成功
                if(ajax.status == 200 ){ //响应也成功
                    //获取响应数据
                    var data = ajax.responseText ;
                    //alert(data) ;
                    document.getElementById("info").innerHTML = data ;
                }

            }
        }
        //3，设置请求的路径参数1：请求的方式 参数2：请求的地址，参数3：是否异步
        ajax.open("post","ajax",true) ;
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //4，发送请求,因为这是post请求方式，参数不能跟在地址后
        ajax.send("name="+uname) ;
    }

　　post请求的注意点：ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

要有请求的头信息，位置要放在open后面，不然可能会报错

猜你喜欢