原生ajax异步请求和跨域请求实例

最新推荐文章于 2022-08-27 15:26:43 发布

Jerry_sss

最新推荐文章于 2022-08-27 15:26:43 发布

阅读量3.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Aurora_sss/article/details/71102491

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

客户端:

实现注册的功能,对用户名进行验证

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册界面</title>
<script type="text/javascript">
	//验证用户名是否重复
	function checkName(obj) {
		//1.根据浏览器创建异步引擎对象
		xhr = createXMLHttpRequest();

		//2.设置异步引擎对象的属性
		//2.1设置回调方法
		xhr.onreadystatechange = callback;
		//2.2设置请求路径和请求方式
		xhr.open("POST", "http://localhost:8080/RegisterAjax03/system/checkName.do", true);
		//2.3设置请求的头文件信息
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

		//3.调用异步引擎对象的send方法请求,并传递请求的参数
		//3.1数据打包
		var data = "username=" + obj.value;
		//3.2发送请求
		xhr.send(data);

	}

	function createXMLHttpRequest() {
		//ie8以上的浏览器创建异步引擎对象
		if (window.XMLHttpRequest) {
			return new XMLHttpRequest();
		}
	}

	function callback() {
		if (xhr.readyState == 4 && xhr.status == 200) {

			var data = xhr.responseText.replace(/\r\n/g,'');
		
			if ("success" == data) {
				document.getElementById("message").innerHTML = "该用户名可以使用";
				flag = true;
			} else if ("fail" == data){
				document.getElementById("message").innerHTML = "对不起,该用户名已经被占用";
				flag = false;
			}
		}

	}

	function isLogin() {
		
		if (flag == true) {
			//1.根据浏览器创建异步引擎对象
			xhr = createXMLHttpRequest();

			//2.设置异步引擎对象的属性
			//2.1设置回调方法
			xhr.onreadystatechange = callbacklogin;
			//2.2设置请求路径和请求方式
			xhr.open("POST", "system/register.do", true);
			//2.3设置请求的头文件信息
			xhr.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");

			//3.调用异步引擎对象的send方法请求,并传递请求的参数
			//3.1数据打包
			var username = document.getElementById("username").value;
			var password = document.getElementById("password").value;
			var data = "username=" + username + "&password=" + password;
			//3.2发送请求
			xhr.send(data);
			
		}else{
			alert("请重新设置用户名");
		}

	}

	function callbacklogin() {

		if (xhr.readyState == 4 && xhr.status == 200) {
			
			var data = xhr.responseText;
			alert("注册成功");
		}

	}
</script>
</head>
<body>
	<table border="0">
		<tr>
			<td>用户名:</td>
			<td><input type="text" id="username" οnblur="checkName(this)" /></td>
			<td><span id="message"></span></td>
		</tr>
		<tr>
			<td>密码:</td>
			<td><input type="password" id="password" /></td>
			<td></td>
		</tr>
		<tr>
			<td colspan="2" align="center"><input type="button"
				οnclick="isLogin()" value="注册" /></td>
		</tr>

	</table>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录界面</title>
<script type="text/javascript">
	function isLogin() {
		xhr = createXMLHttpRequest();
		xhr.onreadystatechange = callBack;
		xhr.open("POST", "http://127.0.0.1:8080/LoginAjax03/system/login.do",
				true);
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		var username = document.getElementById("username").value;
		var password = document.getElementById("password").value;
		var data = "username=" + username + "&password=" + password;
		xhr.send(data);

	}
	function createXMLHttpRequest() {
		if (window.XMLHttpRequest) {

			return new XMLHttpRequest();
		}
	}

	function callBack() {

		if (xhr.readyState == 4 && xhr.status == 200) {
			var data = xhr.responseText.replace(/\r\n/g,'');
			if (data == "no") {
				alert("登录失败,请仔细核对用户名和密码");
			} else if (data == "yes") {
				alert("登录成功")
			}
		}
	}
</script>
</head>
<body>
	<table border="0">
		<tr>
			<td>用户名:</td>
			<td><input type="text" id="username" /></td>
		</tr>
		<tr>
			<td>密码:</td>
			<td><input type="password" id="password" /></td>
			<td></td>
		</tr>
		<tr>
			<td colspan="2" align="center"><input type="button"
				οnclick="isLogin()" value="登录" /></td>
		</tr>
		<tr>
			<td colspan="2" align="right"><a href="register.jsp">用户注册入口</a>
			</td>
		</tr>
	</table>

</body>
</html>

package com.system.controller;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

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

import com.util.DBUtil;

public class CheckNameController extends HttpServlet {
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String username = request.getParameter("username");

		// 数据库查询
		Connection conn = null;
		PreparedStatement pre = null;
		ResultSet rs = null;
		String data = "";

		try {
			conn = DBUtil.getConn();
			String sql = "select username from t_login where username=?";
			pre = conn.prepareStatement(sql);
			pre.setString(1, username);
			rs = pre.executeQuery();

			if (rs.next()) {
				data = "fail";
			} else {
				data = "success";
			}

		} catch (SQLException e) {
			e.printStackTrace();
		} finally {

			DBUtil.close(rs, pre, conn);
			request.setAttribute("data1", data);
			request.getRequestDispatcher("/checknamedata.jsp").forward(request, response);
		}
	}

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}
}

服务端:

跨域实现用户的登录

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
${data }

package com.system.controller;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

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

import com.util.DBUtil;

public class LoginController extends HttpServlet {

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Methods", "POST,GET");
		request.setCharacterEncoding("UTF-8");

		String username = request.getParameter("username");
		String password = request.getParameter("password");

		Connection conn = null;
		PreparedStatement pre = null;
		ResultSet rs = null;
		String data = "";

		try {
			conn = DBUtil.getConn();
			String sql = "select * from t_login where username = ? and password = ?";
			pre = conn.prepareStatement(sql);
			pre.setString(1, username);
			pre.setString(2, password);
			
			rs = pre.executeQuery();
			if (rs.next()) {
				data = "yes";
			}else{
				data = "no";
			}

		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			request.setAttribute("data", data);
			request.getRequestDispatcher("/data.jsp").forward(request, response);
		}

	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

}

注意的几个点:

1.ajax从后台返回的值默认带一行空白行,需要对数据进行处理

var data = xhr.responseText.replace(/\r\n/g,'');

2.跨域请求的关键代码

		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Methods", "POST,GET");

3.在写代码中发现不同程序的返回值要用不同的data.jsp去处理,否则没有效果

Jerry_sss

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生ajax异步请求和跨域请求实例

客户端:实现注册的功能,对用户名进行验证<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>注册界面 //验证用户名是否重复 function checkName(obj) { //1.根据浏览器创建异步引擎对象 xhr = createXM
复制链接

扫一扫

专栏目录