how2j.cn


工具版本兼容问题
分步解析 AJAX 每个步骤

步骤 1 : AJAX 请求和相应图示   
步骤 2 : 创建XHR   
步骤 3 : 设置响应函数   
步骤 4 : 设置并发出请求   
步骤 5 : 处理响应信息   
步骤 6 : 再完整的演示一遍   
步骤 7 : checkName.jsp   

步骤 1 :

AJAX 请求和相应图示

AJAX 请求和相应图示
步骤 2 :

创建XHR

创建XHR对象 XMLHttpRequest
XHR对象是一个javascript对象,它可以在用户没有感觉的情况下,就像背后运行的一根小线程一般,悄悄的和服务器进行数据交互
AJAX就是通过它做到无刷新效果的
运行效果
<script> var xmlhttp =new XMLHttpRequest(); document.write(xmlhttp); </script>
<script>
var xmlhttp =new XMLHttpRequest(); 
document.write(xmlhttp);
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 3 :

设置响应函数

XHR对象的作用是和服务器进行交互,所以既会发消息给服务器,也能接受服务器返回的响应。
当服务器响应回来的时候,调用怎么处理呢?
通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。
步骤 4 :

设置并发出请求

通过open函数设置背后的这个小线程,将要访问的页面url ,在本例中就是
/study/checkName.jsp

xmlhttp.open("GET",url,true);

通过send函数进行实际的访问

xmlhttp.send(null);


null表示没有参数,因为参数已经通过“GET" 方式,放在url里了。
只有在用"POST",并且需要发送参数的时候,才会使用到send。
类似这样:
xmlhttp.send("user="+username+"&password="+password)
步骤 5 :

处理响应信息

在checkResult 函数中处理响应

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


xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本
处理响应信息
步骤 6 :

再完整的演示一遍

1. 创建XHR对象
2. 设置响应函数
3. 设置要访问的页面
4. 发出请求
5. 当服务端的响应返回,响应函数被调用。
6. 在响应函数中,判断响应是否成功,如果成功获取服务端返回的文本,并显示在span中。
运行效果
<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 = "http://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 7 :

checkName.jsp

最后附上checkName.jsp,现在看不明白不要紧,等学了JSP再来看,就会发现其实很简单。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <% String name = request.getParameter("name"); if("abc".equals(name)) out.print("<font color='red'>已经存在</font>"); else out.print("<font color='green'>可以使用</font>"); %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>

<%
	String name = request.getParameter("name");
	
	if("abc".equals(name))
	    out.print("<font color='red'>已经存在</font>");
	else 
		out.print("<font color='green'>可以使用</font>");
	
%>


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


问答区域    
2018-09-19 没有响应
Zero雨寂



使用eclipse 在输入框输入 没有响应
<form action="##">
		        <input name="loginname" id="name" onkeyup="name()" type="text" class="loginuser"    placeholder="用    户    名"   /><br /><br />
		        <input name="password" type="password" class="loginpwd"   placeholder="密      码"  />
		        <input id="login" type="button" class="loginbtn" value="登    录" />
 </form>

<script>
		var xmlhttp;
		function loginname(){
			var name = document.getElementById("name").value;
			var url = "http://localhost:8080/com.zero.pet/login1.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>


<body >
	<% String name =request.getParameter("name"); 
		if("abc".equals(name)){
			out.print("<font color='red'>已经存在</font>");
		}
		else{
			out.print("<font color='green'>可以使用</font>");
		}
	%>
	
</body>




							


1 个答案

hubspring 答案时间:2018-11-27
首先,你要启动Tomcat服务器吧 然后,你的input标签中的方法名和js中的方法名不对应,所以不会触发




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-09-07 checkResult不是一个函数吗 为什么不用加()呢
提莫队长前来报道



xmlhttp.onreadystatechange=checkResult; //响应函数
 xmlhttp.onreadystatechange=checkResult; //响应函数

							


2 个答案

淅淅细雨 答案时间:2018-11-04
http://www.runoob.com/ajax/ajax-tutorial.html

梦依凡 答案时间:2018-09-14
checkResult()表示执行这个函数,就意味着将checkResult()的执行结果赋给xmlhttp.onreadystatechange




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-08-21 使用火狐浏览器报xml解析错误格式不佳
2018-06-22 checkResult()
2018-04-15 函数keyup() 能不能换成onchange()
2018-04-10 在input框输入内容无法返回是否能使用
2018-01-22 不响应
2017-12-20 XHR能直接连接servlet吗?
2017-12-03 post是不是只会发送一次请求啊?
2017-11-06 可以用post提交参数嘛?我改成post方法并把参数写在send里面并没有用
2017-11-06 可以用post提交参数嘛?我改成post方法并把参数写在send里面并没有用
2017-11-01 有问题
2017-10-19 请问:如何连接数据库进行用户名验证?
2017-10-06 checkName()
2017-07-15 xmlhttp.onreadystatechange=checkResult; //响应函数
2017-07-14 url
2017-04-24 两个jsp直接提交
2017-04-13 url
2017-04-11 能解释一下 xmlhttp.open("Get", url,true);吗? 为什么不是var url=/study/checkName.jsp
2016-05-24 请问JSP页面在那里啊?




提问之前请登陆
关于 前端部分-Ajax-分步解析 的提问

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

上传截图