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

来源：互联网发布：淘宝直通车充值记录编辑：程序博客网时间：2024/06/05 00:52

客户端:

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

<%@ 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" onblur="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"onclick="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"onclick="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 {@Overrideprotected 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);}}@Overrideprotected 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去处理,否则没有效果

0 0