ajax基本应用示例

最新推荐文章于 2022-02-24 19:25:55 发布

爱技术爱外包

最新推荐文章于 2022-02-24 19:25:55 发布

阅读量866

点赞数 1

分类专栏： jsp/servlet ajax 文章标签： Java HTML

本文链接：https://blog.csdn.net/wjj99/article/details/10087973

版权

jsp/servlet 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
//xhr变量认为是XMLHttpRequest对象
var xhr;

//1、创建XMLHttpRequest对象
function createXMLHttpRequest(){
//判断浏览器的类型，ie和非ie
if(window.ActiveXObject){
//如果是ie，XMLHttpRequest对象是以插件的形式存在
//判读是ie浏览器
//alert("ie");
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else{
//如果是非ie，采用如下的方式创建XMLHttpRequest对象
//alert("非ie");
xhr = new XMLHttpRequest();
}
}

//发送请求的方法
function sendReqest(url){
createXMLHttpRequest();
//打开目标服务器
xhr.open("get",url,true);

//onreadystatechange
//意思是：在什么情形下将请求发送给后台服务器
//通常等于的是一个JavaScript函数
//“情形”通常指的是JavaScript事件
xhr.onreadystatechange = callBack;
xhr.send(null);
}

function callBack(){

if(xhr.readyState == 4){
//判断请求正常发送,4表示请求完成
if(xhr.status == 200){//判读服务器正常存在
//完成一些业务操作
//接收服务器返回的结果
var str = xhr.responseText;
var loadingdiv=document.getElementById('loading');
loadingdiv.innerHTML=str;
//alert(str);
}
}
}
function namecheck(){
var username = document.forms[0].rename.value;
var loadingdiv=document.getElementById('loading');
loadingdiv.innerHTML="<img src='../images/loading.gif'>验证中，请稍等。。。";
sendReqest("../registerServer.jsp?username="+username);
}
</script>

</head>

<body>
<h1>用户注册</h1>
<form action="register.do" method="post">
用户名:<input type=text name=rename οnblur="namecheck()"/><div id="loading"></div><br>
密码:<input type=password name=repwd /><br>
<input type=submit value="注册" />  <input type=reset value="重置" />

</form>
</body>
</html>