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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2017-12-20 XHR能直接连接servlet吗?
liubh
如题








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




2017-12-03 post是不是只会发送一次请求啊?
塑花kai不落



我把get改成了post,输入除了其他字母,显示“可以使用”,然后删掉,输入“abc”,没有再显示“已经存在“了
<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";

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

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

</script>

							


1 个答案

流云剑 答案时间:2017-12-05
不是的。POST和GET只是请求方式不同而已,并不会决定请求与否。判断是否请求的是input元素中的onkeyup属性,这个是你按键抬起之后就会触发的,按键几次就会触发几次。 我试了并没有你说的情况,看看是否你输入的问题。




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





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群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图