ajax相关知识点-蒲公英云

ajax相关知识点

什么是ajax呢？

ajax是一种用于创建快速动态网页的技术
全称为：Asynchronous Javascript And XML 异步JavaScript或XML
可以在不加载整个网页的情况下，对网页的部分内容进行更新

ajax开发步骤
1.创建xmlHttpRequest对象（ajax引擎）
2.设定ajax引擎相关参数：
open
onreadystatechange
send

光看这些可能有点懵，那我们来写个例子快速上手

首先

jsp页面内容

<script type="text/javascript">
function validateName(){
    //创建对象
    var xmlhttp;
    if(window.XMLHttpRequest){
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }else{
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //获得页面中的username
    var username = document.getElementById("username").value;
    //将请求发送到服务器
    xmlhttp.open("GET","ValidateNameServlet?username="+username,true);
    //响应   定义请求状态改变时调用函数，获取相应数据后，将响应结果放到页面
    xmlhttp.onreadystatechange=function(){
        //如果请求成功
        if(xmlhttp.readyState==4&xmlhttp.status==200){
            //把响应结果放进页面
            document.getElementById("result").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.send();
}
</script>
username:<input type="text" name="username" id="username" onblur="validateName()"/>
<p id="result"></p>

然后，我们需要有一个Servlet

在Servlet中写下面的内容

@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //获取username
    String username = request.getParameter("username");
    //如果username不是空 或者 等于xiaoming 在页面输出Ok 在页面否则输出No
    if(username!=null&&"xiaoming".equals(username)) {
        response.setContentType("text/plain;charset=utf-8");
        response.getWriter().println("Ok");
    }else {
        response.setContentType("text/plain;charset=utf-8");
        response.getWriter().println("No");
    }
}