首页 > 开发 > AJAX > 正文

ajax实现简单实时验证功能

2024-09-01 08:26:58
字体:
来源:转载
供稿:网友

什么是ajax

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

这是百度对它的定义,足够详细。
 值得补充的一点是对异步的理解,异步是相对于同步来说的,在这里他们指的是服务器和浏览器的交互模式。

 同步,每次请求发出之后,用户操作即被阻塞,必须要求返回响应后继续操作。而异步指的是发出请求后,用户无需等待响应,一切由ajax来实现,无需进行刷新网页就可以局部更新数据。提高了俩端的沟通效率。

来个小demo

做一个无刷新验证表单的demo,在对话框中输入用户名,在后台进行验证,使用ajax技术。

项目结构,使用maven构建

login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %><html><head>  <title>login</title></head><body>

欢迎登陆:

    用户名:<input type="text" name="username" id="username" onchange="CallServer()"/>    <!-- 显示提示信息 -->    <div id="msg"></div>    <!-- 在jsp页面中引入js,绝对路径的方式 -->    <script src="${pageContext.request.contextPath}/js/main.js"></script></body></html>

main.js

alert("use ajax!")//创建XMLHttpRequest对象,在不同浏览器function createXMLHTTP() {  if(window.XMLHttpRequest){    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码    xmlhttp = new XMLHttpRequest();  }else {    // IE6, IE5 浏览器执行代码    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  }  return xmlhttp;}function CallServer() {  var username = document.getElementById("username").value;  // 判断为空  if ((username == null) || (username == "")) return;  var xmlhttp = createXMLHTTP();  // 构建请求url  var url = "/loginServlet"+"?"+"username="+username;  //状态码改变调用事件  xmlhttp.onreadystatechange = function () {    //正常返回,替换msg内容    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){      document.getElementById("msg").innerHTML = xmlhttp.responseText;    }  }  //异步提交请求  xmlhttp.open("GET",url,true);  //发送请求  xmlhttp.send();}
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表