前端 -- Ajax

最新推荐文章于 2024-08-02 18:52:04 发布

太白的梳妆镜

最新推荐文章于 2024-08-02 18:52:04 发布

阅读量204

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_41361296/article/details/104361337

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、Ajax
二、XMLHttpRequest
三、后端获取系统时间在前端展示（相当于双十一时淘宝页面上的某商品交易额实时变动）
四、注册用户名时判断该用户名是否已存在

一、Ajax

1.1 定义

Ajax，是 Asynchronous JavaScript + XML 的简写。这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。、

1.2 同步、异步现象

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

1.3 Ajax的运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的JS逻辑代码完成某种页面功能。

二、XMLHttpRequest

2.1 定义

Ajax 的技术核心是 XMLHttpRequest 对象（简称XHR），这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。

在 XHR 出现之前，Ajax 式的通信必须借助一些 hack 手段来实现，大多数是使用隐藏的框架或内嵌框架。XHR 的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。

虽然 Ajax 中的 x 代表的是 XML，但 Ajax 通信和数据格式无关，也就是说这种技术不一定使用 XML。

2.2 不同浏览器对于XMR的支持

IE7+、Firefox、Opera、Chrome 和Safari 都支持原生的XHR 对象，在这些浏览器中创建 XHR 对象可以直接实例化 XMLHttpRequest 即可。

var xhr = new XMLHttpRequest();

如果是 IE6 及以下，那么我们必须还需要使用 ActiveX 对象通过 MSXML 库来实现。在低版本IE 浏览器可能会遇到三种不同版本的 XHR 对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。我们可以编写一个函数。

// 得到ajax对象，不同浏览器方式可能不同，但格式固定
function GetXmlHttpObject() {
	var xmlHttp=null;
	try{
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest()
	} catch (e){
		// Internet Explorer
		try{
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e){
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

2.3 使用XHR 对象步骤

JS 原生的 Ajax 其实就是围绕浏览器内内置的 Ajax 引擎对象进行学习的，要使用 JS 原生的 Ajax 完成异步操作，有如下几个步骤：

创建 Ajax 引擎对象
为 Ajax 引擎对象绑定监听（监听服务器已将数据响应给引擎）
绑定提交地址
发送请求
接受响应数据

以下为详细讲解：

在使用XHR 对象时，先必须调用open()方法，它接受三个参数：要发送的请求类型（get、post）、请求的URL 和表示是否异步（false 同步，true异步）。

GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL 的末尾，以便提交给服务器。

xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);

而发送POST 请求的数据，字符串参数不会跟在URL 的尾巴上，而是通过send()方法向服务器提交数据。

xhr.send('name=Lee&age=100');

一般来说，向服务器发送POST 请求由于解析机制的原因，需要进行特别的处理。因为POST 请求和Web 表单提交是不同的，需要使用XHR来模仿表单提交。

// 这行代码放在 open()和 send()之间
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

open() 方法并不会真正发送请求，而只是启动一个请求以备发送。还需通过 send() 方法进行发送请求，send() 方法接受一个参数，作为请求主体发送的数据。如果不需要则必须填 null。

执行 send() 方法之后，请求就会发送到服务器上。

xhr.send(null); //发送请求

当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属性。一共有四个属性：
在这里插入图片描述
接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般而已HTTP 状态代码为200 作为成功的标志。

使用异步调用的时候，需要触发 xhr.onreadystatechange 事件，然后检测 readyState 属性即可。这个属性有五个值：
在这里插入图片描述
最后获取返回数据传输的值xhr.responseText即可。

三、后端获取系统时间在前端展示（相当于双十一时淘宝页面上的某商品交易额实时变动）

index.jsp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p id="ppp"></p>
	<script type="text/javascript">
		// 每2毫秒执行一次该函数，获取实时时间
		setInterval(function(){
			ajaxFun();
		},2);
	
		function ajaxFun(){
			var xhr = new XMLHttpRequest();
			// open()方法并不会真正发送请求，而只是启动一个请求以备发送
			// post请求唯一的方式就是表单提交
			xhr.open('post','/day_0911_web8/ajaxTextServlet',true);		
			
			// 一般来说，向服务器发送POST 请求由于解析机制的原因，需要进行特别的处理。
			// 因为POST请求和Web 表单提交是不同的，需要使用XHR来模仿表单提交
			// 这行代码就使用在post方式提交“骗”过服务器是以表单的方式提交过去
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			
			// 发送请求，send()方法接受一个参数，作为请求主体发送的数据
			// 如果不需要则必须填null。执行send()方法之后，请求就会发送到服务器上
			xhr.send("name=rose");	
			
			//xhr.open('get','/day_0911_web8/ajaxTextServlet?name=jack',true);	
			//xhr.send(null);	
			// 使用异步调用的时候，需要触发xhr.onreadystatechange 事件，然后检测readyState属性即可
			xhr.onreadystatechange=function(){	
				if(xhr.status==200){	// 服务器的响应状态码
					// 说明服务器正常响应了
					if(xhr.readyState==4){	// ajax的状态码
						// ajax正常拿到数据了
						var date = xhr.responseText;
						ppp.innerHTML = date;
					}
				}
			}
		}
		</script>
</body>
</html>

AjaxTextServlet.java

package com.java.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxTextServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setCharacterEncoding("utf-8");
		
//		String name = req.getParameter("name");
//		PrintWriter writer = resp.getWriter();
//		writer.write("你好！"+name);
		
		PrintWriter writer = resp.getWriter();
		writer.write(System.currentTimeMillis()+"");
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

效果：
在这里插入图片描述

四、注册用户名时判断该用户名是否已存在

regist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
	<form action="/day_0910_web7/insertCustomerServlet" method="post" onsubmit="return check()" >
		用户名称：<input type="text" name="cu_name" id="name1" /><br />
		用户电话：<input type="text" name="cu_phone" /><br />
		用户性别：
		<select name="cu_gender">
		<option value="1" selected>男</option>
		<option value="0">女</option>
		</select><br />
		用户地址：<input type="text" name="cu_address" /><br />
		<input type="submit" value="注册" /><a href="/day_0910_web7">已经注册了</a>
	</form>
	<script type="text/javascript" src="js/regist.js"></script>
</body>
</html>

CheckCustomerNameServlet.java

package com.ishopn.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.ishopn.controller.CustomerController;

public class CheckCustomerNameServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setCharacterEncoding("utf-8");
		
		String cu_name = req.getParameter("cu_name");
		
		int c = new CustomerController().getCountCustomerByName(cu_name);
		
		PrintWriter writer = resp.getWriter();
		writer.write(c+"");
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

regist.js

var flag=true;
var inputs=document.getElementsByTagName("input");

function check(){
	for(var i=0;i<inputs.length;i++){
		if(inputs[i].value==null || inputs[i].value.trim().length==0){
			flag=false;
			alert("所有信息不能为空！");
			break;
		}
	}
	
	return flag;
}

// 用户名输入框失去焦点时触发该函数
name1.onblur=function(){
	
	var t = this.value;
	
	if(t.length>0){
		var xhr = new XMLHttpRequest();
		xhr.open('post','/day_0910_web7/checkCustomerNameServlet',true); 
		//这行代码就使用在post方式提交 “骗”过服务器是以表单的方式提交过去的
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
		xhr.send("cu_name="+t);
		
		xhr.onreadystatechange=function(){
			if(xhr.status==200){  //服务器的响应状态码
				// 说明服务器正常相应了
				if(xhr.readyState==4){  //ajax的状态码
					var c = xhr.responseText;
					if(c>0){
						alert("用户名已经存在");
						flag=false;
					}else{
						flag=true;
					}
				}
			}
		}
	}
}

效果：
在这里插入图片描述

推荐一篇更详细的博客：https://blog.csdn.net/wu_Duo/article/details/52627193

太白的梳妆镜

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端 -- Ajax

文章目录一、Ajax1.1 定义1.2 同步、异步现象1.3 Ajax的运行原理二、XMLHttpRequest2.1 定义2.2 不同浏览器对于XMR的支持2.3 使用XHR 对象步骤三、后端获取系统时间在前端展示（相当于双十一时淘宝页面上的某商品交易额实时变动）四、注册用户名时判断该用户名是否已存在一、Ajax1.1 定义Ajax，是 Asynchronous JavaScript + ...
复制链接

扫一扫

专栏目录