Ajax

最新推荐文章于 2024-09-16 13:10:48 发布

chenenxiong

最新推荐文章于 2024-09-16 13:10:48 发布

阅读量82

点赞数

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

本文链接：https://blog.csdn.net/chenenxiong/article/details/103842960

版权

前端部分专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、Hello Ajax

1、不使用ajax，通过刷新页面验证

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

验证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>");
     
%>

2、使用ajax

<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、创建XHR

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

AJAX就是通过它做到无刷新效果的

<script>
var xmlhttp =new XMLHttpRequest();
document.write(xmlhttp);
</script>

3、设置响应函数

XHR对象的作用是和服务器进行交互，所以既会发消息给服务器，也能接受服务器返回的响应。当服务器响应回来的时候，调用怎么处理呢？

通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理

4、设置请求

通过open函数设置背后的这个小线程，将要访问的页面url ：xmlhttp.open("GET",url,true);

通过send函数进行实际的访问：xmlhttp.send(null);

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的内容为服务端传递回来的文本