AJAX 教程

分步解析

工具版本兼容问题

通过AJAX Asynchronous JavaScript And XML 实现异步刷新

纠

示例 1 : 用于用户名校验的页面
示例 2 : 不使用AJAX 通过刷新页面验证账号是否存在
示例 3 : 使用AJAX 通过无刷新验证账号是否存在

示例 1 :

用于用户名校验的页面

edit 顶折

纠问

准备一个JSP页面，叫做checkName.jsp用于校验提交的用户名是否存在
如果提交的用户名是abc就打印存在，否则就可以使用

提示：使用F5回到原来页面

运行效果

<html>

<a href="https://how2j.cn/study/checkName.jsp?name=abc">checkName.jsp?name=abc</a>
<br>
<a href="https://how2j.cn/study/checkName.jsp?name=def">checkName.jsp?name=def</a>

</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

不使用AJAX 通过刷新页面验证账号是否存在

edit 顶折

纠问

如果不使用AJAX，传统的方法需要通过提交数据刷新页面来获知用户名是否存在。
提示：使用F5回到原来页面

运行效果

<form action="https://how2j.cn/study/checkName.jsp">

输入账号 <input name="name" type="text" value="abc"> 

<input type="submit" value="验证账号是否存在">

</form>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

使用AJAX 通过无刷新验证账号是否存在

edit 顶折

纠问

运行效果

代码行数较多，请点击查看

<span>输入账号 :</span>
<input id="name" name="name" onkeyup="check()" type="text">  
<span id="checkResult"></span>

<script>
var xmlhttp;
function check(){
  var name = document.getElementById("name").value;
  var url = "https://how2j.cn/study/checkName.jsp?name="+name;

  xmlhttp =new XMLHttpRequest(); 
  xmlhttp.onreadystatechange=checkResult; //响应函数
  xmlhttp.open("GET",url,true);   //设置访问的页面
  xmlhttp.send(null);  //执行访问
}

function checkResult(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
 
}

</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

分步解析

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2024-03-31 示例2

起个名

关于前端部分-Ajax-Hello AJAX 的提问

不使用AJAX 通过刷新页面验证账号是否存在准备两个文件 checkCount.jsp not use AJAX through fresh the page to verify the account exist or not.html

//html
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<form action="http://127.0.0.1/checkCount.jsp">

输入账号 <input name="name" type="text" value="abc"> 

<input type="submit" value="验证账号是否存在">

</form>
//jsp
checkCount.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"%>
<%
	String name = request.getParameter("name");
	String res = null;
	if(name.equalsIgnoreCase("abc"))
		res = "<font color='red'>账号存在</font>";
	else if(name.equalsIgnoreCase("def"))
		res = "<font color='green'>可以使用</font>";
%>

<%=res%>

//跳转代码
<script>
	var num = 0
	document.addEventListener("keydown", function(event) {
		var e = event || window.event || arguments.callee.caller.arguments[0];
		event.preventDefault(); 	// 阻止默认的刷新行为
	    // 将键码显示在控制台上
	        if(e && e.keyCode==116) {	//116代表F5
			//重新打开链接not use AJAX through fresh the page to verify the account exist or not.html即可
		}
	});
</script>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2023-11-20 关于示例1的理解

Shu_Enryu

关于前端部分-Ajax-Hello AJAX 的提问

我觉得站长想说的意思是，准备一个checkName.jsp和一个checkName.html 用checkName.jsp来判断账号是否存在，用checkName.html来输入账号。附上代码了

//checkName.html  超链要根据自己情况设置
<html>
 
<a href="checkName.jsp?name=abc">checkName.jsp?name=abc</a>
<br>
<a href="checkName.jsp?name=def">checkName.jsp?name=def</a>
 
</html>
//-------------------------------------------------------------------------------------------------------------------------
//checkName.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
 
<%
    String name = request.getParameter("name");
    if(name==null){
        out.print("<font color='red'>请输入:</font>");
    }
    else if ("abc".equals(name)) {
        out.print("<font color='red'>已经存在</font>");
    } else
        out.print("<font color='green'>可以使用</font>");
%>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-04-23 翻译很奇怪

up-bear

关于前端部分-Ajax-Hello AJAX 的提问

synchronous是同步的意思，A synchronous JavaScript And XML竟然能翻译成异步刷新?正确的意思应该是同步实现”刷新“，此刷新非彼刷新，即不需要刷新就能实现”刷新“。

3 个答案

luodawei
答案时间：2022-03-06

站长只是为了体现缩写而已，这也杠？？？

飞鸟
答案时间：2021-06-11

asynchronous是异步的意思 synchronous是同步的意思只差一个字母站长这里写A synchronous JavaScript And XML是为了突出首字母缩写AJAX，不应该把asynchronous分开看成a synchronous

DDQ
答案时间：2021-05-13

同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-12-29 有没有同学知道python版本的jsp咋实现呀，有没有什么教学资料推荐亿下下

2020-10-28 name

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 12 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-Ajax-Hello AJAX 的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图