how2j.cn


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


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

步骤 1 :

AJAX 请求和相应图示

edit
AJAX 请求和相应图示
创建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 :

设置响应函数

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

设置并发出请求

edit
通过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 :

处理响应信息

edit
在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 :

再完整的演示一遍

edit
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 = "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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
最后附上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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2021-08-18 大伙都是怎么学的啊?代码都是要必须全部记住吗
黑昭

大伙都是怎么学的啊?代码都是要必须全部记住吗




1 个答案

anuii
答案时间:2021-08-20
跟着写一遍,能大体有印象是怎么写就行,ide都会有提示 之后用的多写得多就熟练了



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2021-04-07 前端部分-Ajax-分步解析
mf_java

这个是不是还需要重后台那数据啊,只不过不用刷新页面而已?




1 个答案

up-bear
答案时间:2021-04-23
是的吧,xmlhttp.responseText不就是从服务器返回的数据吗



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2021-03-31 结合网上查询的资料,总结一下AJAX
2021-02-01 Ajax真的比传统方法更方便吗?我咋看不出来
2020-12-27 为什么在进行输入后,会生成一个新的输入框


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

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-Ajax-分步解析 的提问

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

上传截图