Ajax使用

最新推荐文章于 2024-09-28 10:45:27 发布

fan__lee

最新推荐文章于 2024-09-28 10:45:27 发布

阅读量94

点赞数

分类专栏：前端笔记文章标签： ajax

本文链接：https://blog.csdn.net/fan__lee/article/details/109310195

版权

前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

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

用于用户名校验的页面

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

'第一种写法：'
<%--
  Date: 2020/10/27
  Time: 12:34
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" import="java.util.*" %>
<%@ page import="java.io.PipedWriter" %>
<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <%--<h1>JSP</h1>--%>
        <% String name = request.getParameter("name");%>
        <%--<%=name %>--%>
        <% if(name.equals("abc")) {request.getRequestDispatcher("已经存在.jsp").forward(request,response);}else {response.getWriter().println("可以使用");} %>
    </body>
</html>

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

<html>
<a href="checkName.jsp?name=abc">checkName.jsp?name=abc</a>
<br>
<a href="checkName.jsp?name=def">checkName.jsp?name=def</a>
</html>

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

如果不使用AJAX，传统的方法需要通过提交数据刷新页面来获知用户名是否存在。
启动服务器访问login.html

<html>
    <head>
        <meta charset="UTF-8" content="text/html" http-equiv="Content-Type"/>
    </head>
    <body>
        <form action="checkName.jsp">

            输入账号 <input name="name" type="text" value="abc">

            <input type="submit" value="验证账号是否存在">

        </form>
    </body>
</html>

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

<html>
    <head>
        <meta charset="UTF-8" content="text/html" http-equiv="Content-Type"/>
    </head>
    <body>
    <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>
    </body>
</html>

代码分步解析

在这里插入图片描述

创建XHR

创建XHR对象 XMLHttpRequest
XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互
AJAX就是通过它做到无刷新效果的

<script>
var xmlhttp =new XMLHttpRequest();
document.write(xmlhttp);
</script>
'运行结果：'
[object XMLHttpRequest]

设置响应函数

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

设置并发出请求

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

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

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

//null表示没有参数，因为参数已经通过“GET" 方式，放在url里了。
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的内容为服务端传递回来的文本