1 本节任务
理解 ajax 的跨域访问
2Ajax 跨域介绍
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器
对 JavaScript 施加的安全限制。
什么是同源策略: 所谓的同源，指的是域名、协议、端口均相等。
不同源的系统使用 ajax 发送求,会存在跨域的问题:例如
http://www.abc.com/ 访问 http://www.xyz.com 域名不一致，存在跨域
http://www.abc.com/ 访问 https://www.abc.com 协议不一致，存在跨域
http://www.abc.com:80/ 访问 http://www.abc.com:81 端口不一致，存在跨域
3Ajax 跨域问题
3.1 建立 ajax-origin 项目
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.bjsxt.ajax.origin</groupId> <artifactId>ajax-origin</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>war</packaging> <properties>
<!-- spring 依赖 --> <spring.version>4.3.18.RELEASE</spring.version> <jstl.version>1.2</jstl.version> <servlet-api.version>2.5</servlet-api.version> <jsp-api.version>2.0</jsp-api.version> <jackson.version>2.9.0</jackson.version>
</properties> <dependencies>
<!-- jsp 相关依赖 -->
<!-- servlet 依赖 -->
<!-- jstl 依赖 --> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>${jstl.version}</version>
</dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>${servlet-api.version}</version> <scope>provided</scope>
</dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jsp-api</artifactId> <version>${jsp-api.version}</version> <scope>provided</scope>
</dependency>
</dependencies> <build> <finalName>ajax</finalName> <plugins>
<!-- 配置 Tomcat 插件 --> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.2</version> <configuration> <path>/ajax</path> <port>9090</port>
</configuration>
</plugin>
</plugins>
</build>
</project>
3.2 发送 Ajax 请求
<%@ 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>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
function sendAjax(){
$.post("http://localhost:7070/order/loadOrderList02","uid=1234",function(data){
alert(data);
});
}
</script>
</head> <body><a href="javascript:sendAjax()">sendAjax</a>
</body>
</html>
3.3 观察跨域问题
4Ajax 跨域解决方案
4.1 服务器段解决
服务端设置 response header 中 Access-Control-Allow-Origin 字段
4.2 前端 JSONP 解决
利用 script 标签,不受同源策略的限制,用户从服务请求数据,服务器返回一个带有方法和数据
的 js 代码。
1 本节任务
服务器段,使用 CORSFilter 过滤器解决跨域问题
2CORSFilter 解决跨域访问原理
通过 CORSFilter 过滤器在服务器端修改 Http 的响应头
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: http://example.com:8080/
3 修改 order-sys 项目
3.1 添加 CORSFilter 依赖
<dependency> <groupId>com.thetransactioncompany</groupId> <artifactId>cors-filter</artifactId> <version>2.5</version> <scope>runtime</scope> </dependency>
3.2web.xml 配置 CORSFilter
<filter> <filter-name>CORS</filter-name> <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> <init-param> <param-name>cors.allowOrigin</param-name> <param-value>*</param-value> </init-param> <init-param> <param-name>cors.supportedMethods</param-name> <param-value>GET, POST, HEAD, PUT, DELETE</param-value> </init-param> <init-param> <param-name>cors.supportedHeaders</param-name> <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value> </init-param> <init-param> <param-name>cors.exposedHeaders</param-name> <param-value>Set-Cookie</param-value> </init-param> <init-param> <param-name>cors.supportsCredentials</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CORS</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
3.3 启动 order-sys 项目
4 启动 ajax-origin 测试
<!-- fastjson --> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.47</version> </dependency>
3.3 修改 OrderController 类
Controller 添加一个接收远程 ajax 请求的方法,该方法后一个接收回调函数的参数.
/****
* 接收 jsonp 请求，响应 js 的字符串到客户端
* @param uid
* @param callback
* @return
*/
@RequestMapping("/loadOrderList03")
@ResponseBody
public String loadOrderList03(String uid,String callback){
System.out.println("uid="+uid);
Order o1=new Order();
o1.setId("111");
o1.setTotal(123.0);
o1.setDate("2018-10-10");
Order o2=new Order();
o2.setId("222");
o2.setTotal(1232.0);
o2.setDate("2018-10-13");
Order o3=new Order();
o3.setId("333");
o3.setTotal(333.0);
o3.setDate("2018-10-31");
List<Order> list = new ArrayList<>();
list.add(o1);
list.add(o2);
list.add(o3);
//result 是需要响应到客户端的 js 代码
String result=callback+"("+JSON.toJSONString(list)+")";
return result; }
3.4 启动 order-sys 项目
4 修改 ajax-origin 项目
4.1 导入 juqery 函数库
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
4.2 发送请求
利用<script src="url?callback=doSomething"></script>发送请求
<script src="http://localhost:7070/order/loadOrderList03?uid=9999&callback=doCallback"></script>
4.3 定义 callback 回调函数
function doCallback(data){
//将 json 对象转化为字符串
var str=JSON.stringify(data);
alert(str);
}
4.4 启动 ajax-origin 测试
5jquery 对 jsonp 支持
function sendAjax(){
/* $.post("http://localhost:7070/order/loadOrderList02","uid=1234",function(data){
alert(data);
});
*/
$.getJSON("http://localhost:7070/order/loadOrderList03?callback=?","uid=1234",
function(data){
//将 json 对象转化为字符串
var str=JSON.stringify(data);
alert(str);
});
}
3RMI 模拟服务器集群部署
3.1 建立 rmi-cluster-provider 项目
3.2 建立 UserService 接口
package com.bjsxt.service;
import java.rmi.Remote;
import java.rmi.RemoteException;
/***
* 创建需要发布的服务对应的业务接口
* @author Administrator
* Remote 接口用于标识其方法可以从非本地虚拟机上调用的接口。
*/
public interface UserService extends Remote{
public String helloRmi(String name) throws RemoteException;
}
3.3 建立 UserServiceImpl 实现类
package com.bjsxt.service.impl;
import java.rmi.RemoteException;
import java.rmi.server.UnicastRemoteObject;
import com.bjsxt.service.UserService;
/***
* 创建发布的服务对应的实现类
* @author Administrator
*
*/
public class UserServiceImpl
extends UnicastRemoteObject implements UserService {
public UserServiceImpl() throws RemoteException {
super();
// TODO Auto-generated constructor stub
}
@Override
public String helloRmi(String name) throws RemoteException {
// TODO Auto-generated method stub
return "hello "+name; } }
3.4 发布集群服务
启动程序三次，每次启动修改端口号，实现服务的集群部署
package com.bjsxt.app;
import java.rmi.Naming;
import java.rmi.registry.LocateRegistry;
import com.bjsxt.service.UserService;
import com.bjsxt.service.impl.UserServiceImpl;
public class ProviderApp {
public static void main(String[] args) {
try{
/****
* 完成远程服务的发布
*/
//将远程服务发布在本地的 8888 端口
LocateRegistry.createRegistry(8888);
//发布的远程服务的访问 url
String name="rmi://localhost:8888/rmi";
//创建一个提供具体服务的远程对象
UserService userService = new UserServiceImpl();
//给提供远程服务的对象绑定一个 url
Naming.bind(name, userService);
System.out.println("=============发布 rmi 远程服务============");
}catch(Exception ex){
ex.printStackTrace();
} } }
4RMI 消费集群服务
4.1 建立 rmi-cluster-consumer 项目
4.2 拷贝 UserService 接口
4.3 实现集群服务消费
package com.bjsxt.app;
import java.rmi.Naming;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ThreadLocalRandom;
import com.bjsxt.service.UserService;
public class ConsumerApp {
public static void main(String[] args) {
List<String> urls = new ArrayList<String>();
urls.add("rmi://localhost:7777/rmi");
urls.add("rmi://localhost:8888/rmi");
urls.add("rmi://localhost:9999/rmi");
String url =null;
while(true){
try{
//通过随机的负载均衡算法,产生随机的访问地址
int index=ThreadLocalRandom.current().nextInt(urls.size());
//发布的远程服务的访问 url
url = urls.get(index);
//通过发布的远程服务的 url，获得远程服务的代理对象
UserService userService = (UserService) Naming.lookup(url);
System.out.println("获得的远程服务的代理对象:"
+userService.getClass().getName());
//通过远程服务的代理对象调用远程服务方法
String result = userService.helloRmi("===="+url+"======= rmi");
System.out.println("result="+result);
Thread.sleep(3000);
}catch (Exception e) {
// TODO: handle exception
urls.remove(url); //剔除不可用的服务的地址
e.printStackTrace();
} } } }
原文地址：https://www.cnblogs.com/wq-9/p/11751232.html
时间： 2024-10-21 22:25:14