原生态Ajax异步请求

 

文章目录

• 一、Ajax原生态请求方式？
• 二、使用步骤
  • 1.添加文件
  • 2.在js文件中创建XMLHttpRequest文件
  • 3.服务器的书写
  • 4.录入回执
• 总结

---

一、.添加js文件

<input id="unameTxt" type="text" placeholder="请输入用户名"  name="uname" onblur="ckUname(this.value)"/>
添加onblur="ckUname(this.value)并传参数

二、在js文件中创建XMLHttpRequest文件

var xmlHttpRequest;//创建xmlHttpRequest
//套路写法
function createXMLHttpRequest() {
    if (window.XMLHttpRequest) {
        //符合DOM2标准的浏览器xmlHttpRequst的创建方式
        xmlHttpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) {//表示IE浏览器
        try {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP")
        }
    }
}
//这是方法执行功能区
function ckUname(uname) {
    createXMLHttpRequest();//书写createXMLHttpRequest
    var url = "user.do?operate=ckUname&uname="+uname ;
    //open传参数：GET:请求方法  url：向服务器发请求 true：确定发送
    xmlHttpRequest.open("GET",url,true);
    //设置回调函数
    xmlHttpRequest.onreadystatechange = ckUnameCB ;
    //发送请求
    xmlHttpRequest.send();
}
//创建回调函数
function ckUnameCB(){
     //一共有4个状态，当状态为4时，才能使用，所以我们只用4，并且200表示正常
    if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
        //xmlHttpRequest.responseText 表示 服务器端响应给我的文本内容
        //alert(xmlHttpRequest.responseText);
        var responseText = xmlHttpRequest.responseText;
        if(responseText=="{'uname':'1'}"){
            alert("用户名已经被注册！");
        }else{
            alert("用户名可以注册！");
        }
    }
}

2.服务器的书写

在Controller层
 public String ckUname(String uname) {
        User user = userService.getUser(uname);
        if (user != null) {
            //用户名已经被占用
            return "json:('uname':'1')";

        } else {
            //用户没有没注册
            return "json:('uname':'0')";
        }
    }
}


在DispatcherServlet
 if (methodReturnStr.startsWith("json:")) {
    String jsonStr = methodReturnStr.substring("json:".length());
    PrintWriter out = response.getWriter();
    ut.print(jsonStr);//删掉换行符
    out.flush();
    }

录入回执

在页面显示是否可以用

总结

Ajax：异步的javaScript and XML
目的：用来发送异步请求的，XML和hTTP结合提高用户的体验
目的：提高用户的体验
好处：局部刷新、减轻网络带宽压力、提高效率
创建：xmlHTTpRequst
调用open方法：设置GET和url还有trun
绑定执行的回调函数
发送请求send，如果是post请求就需要设置参数
编写回调函数，我们在回调函数中，我们只对XMLHTTP
xmlHttpRequest.readyState这是响应的内容，我们支队4感兴趣
 xmlHttpRequest.status==200我们只对200感兴趣
在回调函数中：我们用到OreadyState和xmlHttpRequest请求