XMLHttpRequest、prototype实现ajax

最新推荐文章于 2023-01-07 00:56:21 发布

xqh2168

最新推荐文章于 2023-01-07 00:56:21 发布

阅读量688

点赞数 2

分类专栏： javascript 文章标签： xmlhttprequest prototype callback ajax function input

本文链接：https://blog.csdn.net/xqh2168/article/details/4212724

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

注释很详细，不用单独说明。

其中index.jsp文件为：

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
<head>
    <title>xmlhttprequest ajax demo</title>
    <script src="prototype-1.6.0.2.js"></script>
    <script type ="text/javascript" language ="javascript" >
        var req; //定义变量，用来创建xmlhttprequest对象
        function creatReq() // 创建xmlhttprequest,ajax开始
        {
        var username=document.getElementById("form1").username.value;
            var url="check.jsp?user="+username; //要请求的服务端地址
            //XMLHttpRequest实现ajax
            if(window.XMLHttpRequest) //非IE浏览器，用xmlhttprequest对象创建
            {
                req=new XMLHttpRequest();
            }
            else if(window.ActiveXObject) //IE浏览器用activexobject对象创建
            {
                req=new ActiveXObject("Microsoft.XMLHttp");
            }

            if(req) //成功创建xmlhttprequest
            {
                req.open("GET",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步)
                req.onreadystatechange = callback; //指定回调函数
                req.send(null); //发送请求
            }


            //prototype实现ajax
         /*var myAjax = new Ajax.Request(
        url,
        {
        method: 'get',
        //parameters:"user="+username,
       onComplete: callback
       });*/

        }
        //用prototype时，函数必须传一个参数，如：function callback(req)
        function callback() //回调函数，对服务端的响应处理，监视response状态
        {
            if(req.readyState==4) //请求状态为4表示成功
            {
                if(req.status==200) //http状态200表示OK
                {
                    document.getElementById ("myTime").innerHTML =req.responseText;//所有状态成功，执行此函数，显示数据
                }
                else //http返回状态失败
                {
                    alert("服务端返回状态" + req.statusText);
                }
            }
        }
    </script>
</head>
<body>
<form id="form1" action="" >
     用户名：<input id="username" name="username" type="text" οnblur="creatReq()"/><div id="myTime" style="display:inline"></div><br>
     密码：<input id="password" name="password" type="text" />
     <input type="submit" value="submit">
   </form>
</body>
</html>

check.jsp文件为：

<%@ page contentType="text/html;charset=utf-8"%>
<%
String username = request.getParameter("user");
if(username==null||username=="")
out.print("不能为空");
else{
if("xin".equals(username))
  out.print("用户名已经被注册");
else
  out.print("用户名尚未被使用");
}
%>

xqh2168

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XMLHttpRequest、prototype实现ajax

注释很详细，不用单独说明。其中index.jsp文件为： xmlhttprequest ajax demo var req; //定义变量，用来创建xmlhttprequest对象 function creatReq() // 创建xmlhttprequest,ajax开始 { var user
复制链接

扫一扫

专栏目录