Ajax基本使用，实现方式以及与数据库交互

最新推荐文章于 2023-04-01 22:00:38 发布

VIP文章 ChanCherry、

最新推荐文章于 2023-04-01 22:00:38 发布

阅读量2.3k

点赞数 1

分类专栏： HTML/JS/JSP等前端开发知识

本文链接：https://blog.csdn.net/ITmincherry/article/details/106343734

版权

Ajax概念

Ajax：Asynchronous JavaScript and XML（以及DHTML等）的缩写。详细可参考w3school关于Ajax介绍

异步和同步

这两个概念是建立在客户端和服务器端相互通信的基础上。
同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作。

异步：客户端不需要等待服务器的响应，在服务器处理请求的过程中，客户端可以进行其他的操作。

Ajax的特点

改善表单验证方式，不再需要打开新页面，也不再需要将整个页面数据提交；
不需刷新页面就可改变页面内容，减少用户等待时间；
按需获取数据，每次只从服务器端获取需要的数据。
读取外部数据，进行数据处理整合。
异步与服务器进行交互，在交互过程中用户无需等待，仍可继续操作

之前，我们在做web开发的时候想要验证输入或登录，只能用form表单提交到另一个jsp页面或者是servlet中去，（好像也可以用JavaScript方法判断，但是有时好像会失效，不知道怎么回事QAQ）

传统的网页（即不用ajax技术的网页），想要更新内容或者提交一个表单，都需要重新加载整个网页。

使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

我觉得Ajax框架一个最大的好处就是可以实现异步处理操作，比如说，在验证登录的时候就可以不用提交到其他地方，直接在当前页面就可以获取到信息，还有查询信息也可以在当前页面得到了，还节省了文件数量。

例子：

<body>
<span>Ajax实现用户验证</span>
<input type="username" type="text" >
<input type="button" value="检验" onclick="checkUsername()" ><br>
<input id="password" type="text" ><br>
<div id="result">服务器返回消息</div>
</body>

checkUser.jsp主要连接数据库以及查询数据

JSON

概念

JavaScript Object Notation 即JavaScript对象表示法。
json数据是由键值对构成的。
键用引号（单双都行），也可以不使用引号；
值的取值类型：

数字（整数或浮点数）
字符串（在双引号中）
数组（在方括号中）
逻辑值（true或false） {“persons”: [{},{}] }
对象（在花括号中） {“address”:{“province”: “山西”……}}
null

数据由逗号分隔：多个键值对由逗号分隔；
花括号保存对象：使用{}定义json格式；
方括号保存数组：[ ]

Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");

//json表示
var p={
   "name":"张三","age":23,"gender":"男"};

json现在多用于存储和交换文本信息的语法，比XML更小、更快、更易解析。

实现方式

1. 原生的JS实现方式

大致思路是这样的：
Ajax使用JavaScript实现，首先建立XmlHttpRequest对象，然后获取输入框的参数，用get方式向服务器端的servlet发送请求，然后当XmlHttpRequest对象的状态值为4，响应状态码为200的时候，代表一切正常，回调函数中使用XmlHttpRequest对象的responseText方法获取返回值，并输出到页面上，这样就实现了查询但页面不刷新，url也没有改变。

例子：
客户端html页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
<script>
	function fun(){
   
		//发送异步请求
		//创建核心对象
		var xmlhttp;
		if(window.XMLHttpRequest)
	    {
   
			xmlHttpReq = new XMLHttpRequest();

最低0.47元/天解锁文章

ChanCherry、

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
Ajax基本使用，实现方式以及与数据库交互

Ajax简介Ajax：Asynchronous JavaScript and XML（以及DHTML等）的缩写。Ajax的特点改善表单验证方式，不再需要打开新页面，也不再需要将整个页面数据提交；不需刷新页面就可改变页面内容，减少用户等待时间；按需获取数据，每次只从服务器端获取需要的数据。读取外部数据，进行数据处理整合。异步与服务器进行交互，在交互过程中用户无需等待，仍可继续操作之前，我们在做web开发的时候想要验证输入或登录，只能用form表单提交到另一个jsp页面或者是servlet中
复制链接

扫一扫