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

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

原创最新推荐文章于 2023-04-01 22:00:38 发布 · 2.5k 阅读

11 ·

CC 4.0 BY-SA版权

HTML/JS/JSP等前端开发知识专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨Ajax技术，包括其概念、特点及异步通信原理，对比同步与异步的区别，详细介绍了如何利用Ajax改善表单验证和局部更新网页内容，减少用户等待时间。文章还提供了使用原生JavaScript和jQuery实现Ajax的示例代码，展示了数据交换过程。

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();//非IE浏览器
	    }else
	    {
	       	xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
	    }
	    /*2.发送请求
	    参数：1.请求方式：GET,POST
	    	GET：请求参数拼接在URL后，send()空参
	    	POST：请求参数在send()方法中定义
	      2.请求的URL
	      3.同步或异步请求：true（异步），false（同步）
	    
	    */
	    xmlhttp.open("GET","ajaxServlet?username=tom",true);
	    
	    //3.发送请求
	    xmlhttp.send();
	    
	    //4.接收并处理来自服务器的响应结果
	    //获取方式：xmlhttp.responseText
	    //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange
	    xmlhttp.onreadystatechange=function()
	    {
	    	//判断readyState就绪状态是否为4，判断status响应状态是否为200
	    	if(xmlhttp.readyStatus==4 && xmlhttp.status==200){
	    		//获取服务器的响应结果
	    		var responseText=xmlhttp.responseText;
	    		alert(responseText);
	    	}
	    }
	}

</script>
  
  <body>
    <input type="button" value="发送异步请求" onclick="fun()">
  </body>
 
</html>

注意：要配置web.xml文件，添加下面这段代码进去

<servlet>
 	<servlet-name>ajaxServlet</servlet-name>
    <servlet-class>com.ajaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxServlet</servlet-name>
<url-pattern>/ajaxServlet</url-pattern>
</servlet-mapping>

服务器端servlet的doPost方法：

protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException{ 
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=utf-8");
		//获取请求参数
		String username=request.getParameter("username");
		PrintWriter out=response.getWriter();
		out.write("hello!"+username);
}

2. JQuery实现方式

$.ajax()、$.post()、$.get()

jQuery简介

jQuery是一个封装了很多JS的库，提供多个与Ajax有关的方法。通过jQuery Ajax方法，我们能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON，同时可以把这些外部数据直接载入网页的被选元素中。

jQuery Ajax本质就是XMLHttpRequest，对他进行了封装，方便调用！
下载地址：https://jquery.com/，下载之后，复制到web工程的js文件夹（自定义的）中就可以用了。

jQuery的几个方法（$可以代替jQuery）：

$.get（…）
所有参数：
url：待载入页面的URL地址
data: 待发送Key/value参数。
success：载入成功时回调函数
datatype：返回内容格式，xml，json，script，text，html
$.post（…）
所有参数：
url：待载入页面的URL地址
data：待发送Key/value参数
success：载入成功时回调函数
datatype：返回内容格式，xml，json，script，text，html
$.ajax(…)
部分参数：
url：请求地址
type：请求方式，GET，POST(1.9.0之后用method）
data：要发送的数据
success：成功之后执行的回调函数（全局）

其余的很少用到，就不列了。。。

举例：
语法：$.ajax( {键值对} )

//使用$.ajax发送异步请求
	$.ajax({
		url:"ajaxServlet",//请求路径
		type:"POST",//请求方式
		//data:"username=jack&age=23",  //请求参数
		data:{"username":"jack","age":23},//json格式
		success:function(data){//响应成功后的回调函数
			alert(data);
		},
		error:function (){
			alert("出错啦……")
		},//表示请求响应如果出错，会执行的回调函数
		dataType:"text"
	})

$.get()方法：

function fun(){
	$.get("ajaxServlet",{username:"rose"},function(data){
		alert(data);
	},"text");
}

$.post()方法：

function fun(){
	$.post("ajaxServlet",{username:"rose"},function(data){
		alert(data);
	},"text");
}

get和post方法的最大区别在于get方法提交的参数在URL可见，而post要打开控制台才能看到。
get方法：
在这里插入图片描述

post方法：
在这里插入图片描述

瓶颈o(╥﹏╥)o

我想要实现使用Ajax实现，输入框输入学生的学号，然后提交到servlet去查询数据库，然后返回结果到当前页面上来。用JS可以实现了，但是jQuery方法就是不行，测试发现当前页面的学号参数传到servlet里面是null，试过了很多种方法就是传不了输入框的学号过去，wtcl o(╥﹏╥)o
emmm大学生学业繁忙（大作业截止时间要到了），没太多时间耗在这上面了，就先用JS实现的方法吧。。。
下面附上相应功能的JavaScript代码，如果有路过的大佬会jQuery方法评论区教菜鸡一下呗。。。
JS方法：

var xmlHttpReq;
//创建一个XmlHttpRequest对象
function createXmlHttpRequest()
{
    //window.alert("进入到createXmlHttpRequest()函数");
    if(window.XMLHttpRequest)
    {
       xmlHttpReq = new XMLHttpRequest();//非IE浏览器
    }else
    {
       xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
    }
}
//检测用户名是否已经被注册
function checkSno()
{
	//window.alert("进入到checkSno()函数");
	var sno = document.getElementById("sno").value;//获取输入框参数
	if(sno=="")
	{
	    alert("学号输入为空！");
	    return false;
	}
	//首先创建对象
	createXmlHttpRequest();
	//指明准备状态改变时回调的函数名
	xmlHttpReq.onreadystatechange=handle;
	//尝试以异步的get方式访问某个URL,get请求参数
	//请求服务器端的一个servlet
	var url = "./snoSelect_servlet?sno="+sno;//+Math.random();
	//window.alert(sno);
	xmlHttpReq.open("get",url,true);
	//向服务器发送请求
	xmlHttpReq.send();
	//window.alert("已经发送数据");
}
//状态发生改变时回调的函数
function handle()
{
	//准备状态为4
	//window.alert("进入到handle()函数");
    if(xmlHttpReq.readyState==4)
    {
    //window.alert("响应已完成，您可以获取并使用服务器的响应了。");
    //响应状态码为200，代表一切正常
       if(xmlHttpReq.status==200)
       {
           window.alert("响应完成！ ");
           var res = xmlHttpReq.responseText;//获得返回值
           var result = document.getElementById("result");
           result.innerHTML = "<font color=red>"+res+"</font>";//将res写入到result中
       }
    }
}

jQuery方法：

function checkSno(){
	$.ajax({
		url:"snoSelect_servlet",//请求路径
		type:"GET",//请求方式
		async:false,//异步
		//data:"username=jack&age=23",  //请求参数

		//测试之后，发现数据库接收参数sno=null
		data:{sno:$("input[name='sno']").val()},//json格式
		processData: false,   // jQuery不要去处理发送的数据
		  contentType: false,   // jQuery不要去设置Content-Type请求头
		success:function(data){
			alert(data);
			var result = document.getElementById("result");
	        result.innerHTML = "<font color=red>"+data+"</font>";//将res写入到result中
		},
		error:function (){
			alert("出错啦……")
		}//表示请求响应如果出错，会执行的回调函数
	});
}