[JavaScript知识库] Ajax知识点

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Ajax知识点 -> 正文阅读

[JavaScript知识库]Ajax知识点

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

问题：如何建立一个JSP页面，步骤过程？这里留疑? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

——已解决，利用eclipse，收藏问题里有详细答题

一、认识AJAX

用于用户名校验的页面

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

<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>

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

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

<span>输入账号 :</span>
<input id="name" name="name" οnkeyup="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>

二、分布分析AJAX每个步骤（学习与网页，已标注）

AJAX 请求和相应图示
创建XHR 创建XHR对象?XMLHttpRequest XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互 AJAX就是通过它做到无刷新效果的	<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的内容为服务端传递回来的文本
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>"); ? ? ? %>