java 原生http服务器 测试JS前端ajax访问实现跨域传post数据

已于 2024-06-04 22:02:50 修改
阅读量355 收藏
点赞数 2
文章标签： 前端 java http
于 2024-06-04 17:44:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1309602336/article/details/139449853
版权

后端 java eclipse

字节流转字符

package Httpv3;


import com.sun.net.httpserver.Headers;
import com.sun.net.httpserver.HttpExchange;
import com.sun.net.httpserver.HttpHandler;
import com.sun.net.httpserver.HttpServer;

import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.InetSocketAddress;
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;
import java.util.Arrays;

//来源
//https://blog.csdn.net/xietansheng/article/details/78704783

//浏览器访问: http://localhost:8080/、http://localhost:8080/bb，输出: Hello World

//浏览器访问: http://localhost:8080/aa、http://localhost:8080/aa/bb，输出: Hello World AA
//                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
//原文链接：https://blog.csdn.net/xietansheng/article/details/78704783

public class Mainv2 {
	public String mydata=new String();
    public static void main(String[] args) throws Exception {
    	
    	String mydatav2= new String();
        // 创建 http 服务器, 绑定本地 8080 端口
        HttpServer httpServer = HttpServer.create(new InetSocketAddress(8080), 0);
        // 创上下文监听, "/" 表示匹配所有 URI 请求
        
        httpServer.createContext("/", new HttpHandler() {
            @Override
            public void handle(HttpExchange httpExchange) throws IOException {
                System.out.println("addr: " + httpExchange.getRemoteAddress() +     // 客户端IP地址
                        "; protocol: " + httpExchange.getProtocol() +               // 请求协议: HTTP/1.1
                        "; method: " + httpExchange.getRequestMethod() +            // 请求方法: GET, POST 等
                        "; URI: " + httpExchange.getRequestURI());                  // 请求 URI

                // 获取请求头
                String userAgent = httpExchange.getRequestHeaders().getFirst("User-Agent");
                System.out.println("User-Agent: " + userAgent);
                
                // 响应内容
//                byte[] respContents = "Hello World".getBytes("UTF-8");
                byte[] respContents = ("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n"
                		+ "<note>\r\n"
                		+ "  <to>Tove</to>\r\n"
                		+ "  <from>Jani</from>\r\n"
                		+ "  <heading>Reminder</heading>\r\n"
                		+ "  <body>Don't forget me this weekend!</body>\r\n"
                		+ "</note>").getBytes("UTF-8");
                // 设置响应头
                
//                httpExchange.getResponseHeaders().add("Content-Type", "text/html; charset=UTF-8");
//               参数解释-允许跨域的各个参数
//              https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Request-Headers
              httpExchange.getResponseHeaders().add("Access-Control-Allow-Origin","*");
              httpExchange.getResponseHeaders().add("Access-Control-Allow-Headers","*");
              httpExchange.getResponseHeaders().add("Access-Control-Allow-Methods","*");
//              允许接收各种消息头 对应前端 xhr.setRequestHeader('Content-Type', 'application/json');
              httpExchange.getResponseHeaders().add("Access-Control-Request-Headers","*");
              httpExchange.getResponseHeaders().add("Access-Control-Expose-Headers","*" );
//              对应前端特定消息头 xhr.setRequestHeader('Content-Type', 'application/json');
              httpExchange.getResponseHeaders().add("Content-Type", "text/html; charset=UTF-8");
                
              
              // 设置响应code和内容长度
                httpExchange.sendResponseHeaders(200, respContents.length);

                // 设置响应内容
                httpExchange.getResponseBody().write(respContents);
                
//                测试数据
//                String receive = httpExchange.getResponseBody().toString();
//                System.out.println(receive);
//                
//                String receivev2 = httpExchange.getRequestBody().toString();
//                System.out.println(receivev2);
//                获取数组，把其他的body打印出来，发现是asc码
                byte[] receivev3 = httpExchange.getRequestBody().readAllBytes();
                System.out.println(Arrays.toString(receivev3));
                
//                字节流转字符流
                String utf_8 = new String(receivev3,StandardCharsets.UTF_8);
                System.out.println(utf_8);
                
                
                
                
//                String have = Arrays.toString(receivev3);
//                System.out.println(have.toString());
//                System.out.println(have);
//                System.out.println(have.length());
//                for(int i=0;i<have.length();i++) {
//                	System.out.println((char)receivev3[i]);
//                }
                
//                char[] message = new char[1000];
//                 String str = new String();
//                 String s=new String();
//                for(int i=0;i<have.length()-2;i++) {
//                	message[i]=(char)receivev3[i];
//                	System.out.println(message[i]);
//                	字符变字符串
//                	s=Character.toString(message[i]);
//                	System.out.println(s);
//                	字符串追加到 str
//                	str=str.concat(s);
//                	System.out.println(str);
//                	System.out.println(str.length());
                	
//                }
                
                
                
                
//                mydatav2.copyValueOf(message);
//                
//                System.out.println("revieve"+str);
//                System.out.println(str);
//                System.out.println(have.length());
//                
//                System.out.println("mydatav2"+mydatav2);
                
                
                
                
//                System.out.println(str.length());
//                System.out.println(Arrays.toString(receivev3));
                
                
//                InputStream have = httpExchange.getRequestBody();
//                byte[] posting = have.readAllBytes();
//                System.out.println(Arrays.toString(posting));
                
                // 关闭处理器
                httpExchange.close();
                
//              来源
//              https://vimsky.com/examples/detail/java-method-com.sun.net.httpserver.HttpExchange.getResponseHeaders.html

                
//                Headers responseHeaders = httpExchange.getResponseHeaders();
//        	    responseHeaders.add("Access-Control-Allow-Origin", "*");
//        	    responseHeaders.add("Access-Control-Allow-Headers", "*");
//        	    X-Custom-Header
//              httpExchange.getResponseHeaders().add("Content-Type", "text/html; charset=UTF-8");
//        	    httpExchange.getResponseHeaders().add("Access-Control-Allow-Methods","*");
//        	    httpExchange.sendResponseHeaders(200, respContents.length);
//        	    OutputStream outputStream = httpExchange.getResponseBody();
//        	    outputStream.write(httpExchange.getResponseCode());
//        	    outputStream.close();
                
//        	    byte[] respContentsv3 = "Hello World".getBytes("UTF-8");
//        	    httpExchange.sendResponseHeaders(200, respContentsv3.length);
//        	    httpExchange.getResponseBody().write(respContentsv3);
        	    
//        	    System.out.println("message"+httpExchange.getRequestBody().toString());
        	    
//        	    httpExchange.close();
                
            }
            
            
            
        });

        // 创建上下文监听, 处理 URI 以 "/aa" 开头的请求
        httpServer.createContext("/aa", new HttpHandler() {
            @Override
            public void handle(HttpExchange httpExchange) throws IOException {
                byte[] respContents = "Hello World AA".getBytes("UTF-8");
                
                httpExchange.getResponseHeaders().add("Content-Type", "text/html; charset=UTF-8");
                httpExchange.sendResponseHeaders(200, respContents.length);

                httpExchange.getResponseBody().write(respContents);
                httpExchange.close();
//                来源
//                https://vimsky.com/examples/detail/java-method-com.sun.net.httpserver.HttpExchange.getResponseHeaders.html
                // Add the header to avoid error:
        	    // “No 'Access-Control-Allow-Origin' header is present on the requested resource”
//                
//                Headers responseHeaders = httpExchange.getResponseHeaders();
//        	    responseHeaders.add("Access-Control-Allow-Origin", "*");
//        	    httpExchange.sendResponseHeaders(200, respContents.length);
//
//        	    OutputStream outputStream = httpExchange.getResponseBody();
//        	    outputStream.write(httpExchange.getResponseCode());
//        	    outputStream.close();
//        	    
        	    
        	    
            }
            
        });

        // 启动服务
        httpServer.start();
    }

}

前端

<!DOCTYPE html>

<!-- 来源 -->
<!-- https://cloud.tencent.com/developer/article/1705089 -->
<!-- https://geek-docs.com/ajax/ajax-questions/19_ajax_javascript_send_json_object_with_ajax.html -->
<!-- 配合java后端可以监听 -->
<!-- //原文链接：https://blog.csdn.net/xietansheng/article/details/78704783 -->


<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script>
			function fun() {
				//发送异步请求
				//1、创建核心对象
				// var xmlhttp;
				// if (window.XMLHttpRequest) { //code for IE7+,Firefox,chrome,opera,safari
				// 	xmlhttp = new XMLHttpRequest();
				// } else { //code for IE6,IE5
				// 	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				// }
				// //2、建立连接
				// /*
				//  * 参数：请求方式、请求的url路径、同步或异步请求（true为异步）
				//  * get方式：请求参数在url后面拼接，send方法为空；
				//  * post方式：请求参数在send方法中定义。
				//  * */
				// xmlhttp.open("GET", "ajaxServlet?username=Tim", true);
				
				// //3、发送请求
				// xmlhttp.send();
				// //4、接收及处理响应结果,当服务器响应成功了再获取
				// xmlhttp.onreadystatechange = function() { //当xmlhttp对象就绪状态改变时会触发事件
				// 	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //请求已完成且响应就绪,响应状态码为200
				// 		alert(xmlhttp.responseText);
				// 	}
				// };
				
				// https://geek-docs.com/ajax/ajax-questions/19_ajax_javascript_send_json_object_with_ajax.html
				
				
				// 创建XMLHttpRequest对象
				var xhr = new XMLHttpRequest();
				
				// 设置请求类型和URL
				// xhr.open('POST', 'http://example.com/api', true);
				// xhr.open('POST', 'http://localhost:8080/aa', true);
				// xhr.open('POST', '/aa', true);
				// xhr.open('POST', 'http://localhost:8080/aa', true);
				xhr.open('POST', 'http://localhost:8080', true);
				// 设置请求头
				xhr.setRequestHeader('Content-Type', 'application/json');
				
				// xhr.setRequestHeader('X-Custom-Header', 'value');
				// xhr.setRequestHeader('Access-Control-Allow-Origin','*');
				console.log("请求头已设置\n");
				// 监听服务器响应
				// xhr.onreadystatechange = function() {
				//   if (xhr.readyState === 4 && xhr.status === 200) {
				//     // 从服务器获取响应
				//     var response = JSON.parse(xhr.responseText);
				//     console.log(response);
				// 	console.log(getAllResponseHeaders());
				//   }
				// };
				
				// 构建JSON对象
				var data = {
				  name: 'John',
				  age: 25,
				  email: 'john@example.com'
				};
				
				// 将JSON对象转换为字符串
				var jsonData = JSON.stringify(data);
				
				// 发送数据
				xhr.send(jsonData);
				// 注释掉就会爆 POST 错误提示

				//4、接收及处理响应结果,当服务器响应成功了再获取
				xhr.onreadystatechange = function() { //当xmlhttp对象就绪状态改变时会触发事件
					if (xhr.readyState == 4 && xhr.status == 200) { //请求已完成且响应就绪,响应状态码为200
						alert(xhr.responseText);
						console.log("检测的正确的返回\n");
					}else{
						console.log("检测到错误的返回\n");
					}
					console.log("检测到返回函数\n");
				};
				
			}
		</script>
	</head>
	<body>
		<input type="button" value="发送异步请求" onclick="fun();">
		<input type="text">
	</body>
</html>

a1309602336
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS实现一个Ajax跨域请求
小康博客
08-29 976
什么Ajax 在现实Ajax之前，我们需要了解下什么Ajax？ Asynchronous JavaScript + XML（异步 JavaScript 和 XML）, 其本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法。 当使用结合了这些技术的 AJAX 模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。 异步交互 接下来便要弄清楚什么是异步
AJAX POST方式上传文件到后台和下载后台传来的文件
热门推荐
junehappylove（王俊伟）的专栏
07-30 3万+
ajax 下载 原本ajax是不能下载文件的，原因：因为response，一般请求浏览器是会处理服务器输出的response，例如生成png、文件下载等,然而ajax请求只是个“字符型”的请求，即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的，虽然可以读取到返回的response，但只是读取而已，是无法执行的，说白点就是js无法调用到浏览器的下载处理机制和程序。 要想下载...
ajax如何传输数据到后端，并接收相关字段进行解析（附:fastjson接收数据）
唐昊
08-17 703
前端ajax发送请求规范 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <scri
XMLHttpRequest上传文件实现进度条
weixin_30553065的博客
10-18 683
代码来源于http://www.cnblogs.com/tianyuchen/p/5594641.html <!DOCTYPE html><html><head><meta charset="UTF-8"> <title>XMLHttpRequest上传文件进度实现</title> <script...
Ajax得到服务器生成的文件流，下载
weixin_34273046的博客
03-23 562
前台： vardownloadFrame; functiondoHisRPTDownload() { varperiod=$("#"+"<%=MonthSelect.ClientID%>").val(); // Check to be sure this async postback ...
ajax上传文件 与下载
u011262328的博客
03-01 187
ajax上传 后台处理 import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.FileOutputStream; import java.io.IOException; import javax.servlet.http.HttpServletReques...
java ajax post 跨域请求数据_js跨域请求数据的3种常用的方法
weixin_31446315的博客
02-27 605
由于js同源策略的影响，当在某一域名下请求其他域名，或者同一域名，不同端口下的url时，就会变成不被允许的跨域请求。那这个时候通常怎么解决呢，对此菜鸟光头我稍作了整理：1.JavaScript在原生js(没有jQuery和ajax支持)的情况下，通常客户端代码是这样的(我假设是在localhost：8080的端口下的http://localhost:8080/webs/i.mediapower.m...
原生JS实现ajax与ajax的跨域请求实例
10-18
原生JavaScript实现AJAX是一种创建动态网页的技术，它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本文将详细介绍如何使用原生JS实现AJAX以及处理跨域请求的问题。 首先，实现AJAX的基本步骤...
原生JS实现Ajax跨域请求flask响应内容
11-26
Ajax方法好，网站感觉跟高大上，但由于Js的局限，跨域Ajax无法实现，这里，讲一下解决办法，前提是需要能够自己可以控制flask端的响应。 主要技术： 修改服务器相应的相应头，使其可以相应任意域名。and设置响应头，...
ajax跨域post(java例子)
04-12
Ajax跨域POST请求通过CORS机制实现，Spring框架提供了一套便捷的配置方式。在前端，我们使用jQuery或原生JavaScript发起跨域请求。理解并正确配置CORS，以及安全地使用跨域请求，是Web开发中不可或缺的知识点。
原生JavaScript实现AJAX、JSONP
10-20
在JavaScript中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。而JSONP（JSON with Padding）则是解决浏览器同源策略限制...
JavaScript如何实现跨域请求
10-21
// 跨域POST请求 FlyJSONP.post({ url: 'http://www.cxyblog.com/article/new', parameters: { username: 'cxyblog', api_key: '123456', title: 'FlyJSONP', description: 'test', }, success: function ...
前端面试题（12）答案版
weixin_49062485的博客
06-30 660
在不同的操作系统上,设置环境变量的方式有所不同,比如在Windows上使用set命令,在Unix/Linux上使用export命令。-2） setImmediate：是Node.js中的特有API,属于微任务,会被添加到微任务队列中,在事件循环的微任务阶段执行。2) 执行完所有宏任务后,检查微任务队列(如Promise.then)是否有待执行的任务,依次执行。- 1）setTimeout：是宏任务,会被添加到宏任务队列中,在事件循环的宏任务阶段执行。在前端面试中,考察这些基本概念是非常常见的。
WHAT - NextJS 的路由系统和 react-router-dom
最新发布
weixin_58540586的博客
07-04 658
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
JavaScript检查对象是否包含某个属性
徐三岁的博客
06-28 951
当使用 Object.prototype.hasOwnProperty.call 时，实际上是在调用 hasOwnProperty 方法，并明确指定 this 的值，这使得可以检查任何对象是否拥有指定的属性。使用 Object.prototype.hasOwnProperty.call 的好处是，它允许将 hasOwnProperty 方法作为一个函数传递给其他函数，或者在不直接引用对象的情况下使用它。hasOwnProperty 方法会检查对象自身是否具有指定的属性，而不考虑原型链。
探索WebKit的插件帝国：深入插件系统的奥秘
2401_85763803的博客
06-30 435
WebKit的插件系统允许第三方开发者扩展浏览器的功能。插件可以拦截网页中的特定资源请求，执行自定义的代码，并以各种形式与用户交互。通过本文的深入探讨，你现在应该对WebKit的插件系统有了全面的理解。从插件的创建到生命周期管理，再到性能优化和安全性考虑，本文提供了一个全面的指南。WebKit插件系统的强大功能，为开发者提供了广阔的创新空间。
React 组件 API
csbysj2020的博客
06-29 451
React 组件可以通过两种方式定义：类组件和函数组件。类组件使用 ES6 的类语法，而函数组件则是一个简单的 JavaScript 函数。React 组件 API 是 React 开发中的基础，理解并掌握这些 API 对于创建高效、可维护的 React 应用程序至关重要。无论是类组件还是函数组件，都提供了丰富的特性和方法来管理组件的状态、属性和生命周期。通过熟练使用这些 API，开发者可以更加轻松地构建复杂的用户界面。
原生JS实现ajax与ajax的跨域请求
08-27
原生JS实现Ajax的步骤如下： 1. 首先，创建一个XMLHttpRequest对象。 2. 设置状态监听函数，监听请求的状态。 3. 使用`open`方法设置请求的类型(GET或POST)和URL。 4. 如果是跨域请求，需要处理跨域问题，例如设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值