|
|
|
|
步骤 2 : 创建XHR 步骤 3 : 设置响应函数 步骤 4 : 设置并发出请求 步骤 5 : 处理响应信息 步骤 6 : 再完整的演示一遍 步骤 7 : checkName.jsp
创建XHR对象 XMLHttpRequest
XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互 AJAX就是通过它做到无刷新效果的 <script>
var xmlhttp =new XMLHttpRequest();
document.write(xmlhttp);
</script>
<script> var xmlhttp =new XMLHttpRequest(); document.write(xmlhttp); </script>
XHR对象的作用是和服务器进行交互，所以既会发消息给服务器，也能接受服务器返回的响应。
当服务器响应回来的时候，调用怎么处理呢？ 通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。
通过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)
在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的内容为服务端传递回来的文本
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>
最后附上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公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2023-11-20
总结学这一节课所需要的知识
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2021-08-18
大伙都是怎么学的啊？代码都是要必须全部记住吗
2 个答案
Javeson 跳转到问题位置 答案时间：2022-06-08 我也是尽量跟着写一遍
anuii 跳转到问题位置 答案时间：2021-08-20 跟着写一遍，能大体有印象是怎么写就行，ide都会有提示
之后用的多写得多就熟练了
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2021-04-07
前端部分-Ajax-分步解析
2021-03-31
结合网上查询的资料，总结一下AJAX
2021-02-01
Ajax真的比传统方法更方便吗？我咋看不出来
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 30 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
