1. ajax跨域接上
2 方案3：jQuery封装的jsonp 37
- 牛人们写的jQuery库，已经对jsonp进行了封装。大家可以直接拿来用。
- 用之前需要引入jQuery库的js文件。（这里的jQuery库咱们就不再封装了，咱们直接用jQuery写好的jsonp方式。）
- jQuery中的jsonp其实就是我们方案2的高度封装，底层原理完全相同。
- 核心代码
$.ajax({
type : "GET",
url : "跨域的url",
dataType : "jsonp", // 指定数据类型
jsonp : "fun", // 指定参数名（不设置的时候，默认是："callback"）
jsonpCallback : "sayHello" // 指定回调函数的名字
// （不设置的时候，jQuery会自动生成一个随机的回调函数，
//并且这个回调函数还会自动调用success的回调函数。）
})
2.1演示 37
代码在E:\java学习\Ajax\course\course11\web 36
ajax4.html
<!--jQuery的jsonp封装解决Ajax跨域问题 37-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的jsonp封装解决Ajax跨域问题</title>
</head>
<body>
<!--引入jQuery库 这个jQuery库是官方的-->
<script type="text/javascript" src="/a/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
// 这个函数不需要你写，jQuery可以自动帮助你生成
/*function jQuery3600508253314856699_1655528968612(json){
//系统自动生成的这个函数默认情况，会自动调用success的回调函数。
}*/
// 自定义的函数
function sayHello(data){
$("#mydiv").html("欢迎你：" + data.username)
}
$(function (){
$("#btn").click(function (){
// 发送所谓的ajax请求（其实本质上并不是一个ajax请求。只是披着ajax的皮。乔装打扮的ajax。）
$.ajax({
type:"GET",//jsonp请求只支持get请求
// 虽然这里的url是这样写的，但实际上发送的请求是：/b/jsonp3?callback=jQuery3600508253314856699_1655528968612&_=1655528968613
// callback=jQuery3600508253314856699_1655528968612
// callback就是我们之前的fun
// jQuery3600508253314856699_1655528968612就是我们之前的sayHello，
// 而这个名字是jQuery自动为我们生成的。
url:"http://localhost:8081/b/jsonp3",
dataType:"jsonp",//指定数据类是jsonp形式
//如果不想写下面的success参数
//可以这样写
jsonp : "fun", // 不采用默认的参数名callback，用这个属性来指定具体的参数名。
jsonpCallback : "sayHello" // 不采用默认的回调函数，用这个属性来指定具体的回调函数。
/* success:function (data){//data变量用来接收服务器短的响应（data是一个json{"username":"lisi"}）
$("#mydiv").html("欢迎你："+data.username)
}*/
})
})
})
</script>
<button id="btn"> jQuery库封装的jsonp</button>
<div id="mydiv"></div>
</body>
</html>
在course11_1中
com.bjpowernode.b.web.servlet
TargetServlet
package com.bjpowernode.b.web.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
//演示代理机制的跨域请求问题 39
@WebServlet("/target")
public class TargetServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//响应一个json字符串
response.getWriter().print("{\"username\":\"jackson\"}");
}
}3. 方案4：代理机制（httpclient） 38
- 使用Java程序怎么去发送get/post请求呢？【GET和POST请求就是HTTP请求。】
- 第一种方案：使用JDK内置的API（java.net.URL.....），这些API是可以发送HTTP请求的。
- 第二种方案：使用第三方的开源组件，比如：apache的httpclient组件。（httpclient组件是开源免费的，可以直接用）
- 在java程序中，使用httpclient组件可以发送http请求。
- 对于httpclient组件的代码，大家目前可以不进行深入的研究，可以从网上直接搜。然后粘贴过来，改一改，看看能不能完成发送get和post请求。
这里的代码在course11_2里面这里不是重点就不做展示了 38
- 使用httpclient组件，需要先将这个组件相关的jar包引入到项目当中。
3.1 演示代理机制的跨域请求问题 39
代码在 com.bjpowernode.javaweb.servlet 39
ProxyServlet
package com.bjpowernode.javaweb.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
//演示代理机制的跨域请求问题 39
@WebServlet("/proxy")
public class ProxyServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//通过httpclient组件，发送HTTP get请求，访问TargetServlet
HttpGet httpGet = new HttpGet("http://localhost:8081/b/target");
// 设置类型 "application/x-www-form-urlencoded" "application/json"
httpGet.setHeader("Content-Type", "application/x-www-form-urlencoded");
//System.out.println("调用URL: " + httpGet.getURI());
// httpClient实例化
CloseableHttpClient httpClient = HttpClients.createDefault();
// 执行请求并获取返回
HttpResponse resp = httpClient.execute(httpGet);
HttpEntity entity = resp.getEntity();
//System.out.println("返回状态码：" + response.getStatusLine());
// 显示结果
BufferedReader reader = new BufferedReader(new InputStreamReader(entity.getContent(), "UTF-8"));
String line = null;
StringBuffer responseSB = new StringBuffer();
while ((line = reader.readLine()) != null) {
responseSB.append(line);
}
reader.close();
httpClient.close();
//b站点相应回来的数据
//然后继续将数据响应回去
response.getWriter().print(responseSB);
}
}E:\java学习\Ajax\course\course11\web
ajax5.html
<!--使用代理机制完成ajax的跨域访问 39-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用代理机制完成ajax的跨域访问</title>
</head>
<body>
<script type="text/javascript">
window.onload = ()=>{
document.getElementById("btn").onclick=()=>{
// 发送ajax请求
// 1.创建核心对象
const xmlHttpRequest = new XMLHttpRequest(); // const可以声明变量。(可以自己研究一下：var let const声明变量时有什么区别)
// 2.注册回调函数
xmlHttpRequest.onreadystatechange = () => {
if (xmlHttpRequest.readyState == 4) {
// 这里也可以使用区间的方式，因为状态码是200~299都是正常响应结束。
if (xmlHttpRequest.status >= 200 && xmlHttpRequest.status < 300) {
document.getElementById("mydiv").innerHTML = xmlHttpRequest.responseText
/*var jsonObj = JSON.parse(xmlHttpRequest.responseText);
document.getElementById("mydiv").innerHTML = jsonObj.username*/
}
}
}
// 3.开启通道
xmlHttpRequest.open("GET", "/a/proxy", true)
// 4.发送请求
xmlHttpRequest.send()
}
}
</script>
<button id="btn">使用代理机制完成ajax的跨域访问</button>
<div id="mydiv"></div>
</body>
</html>
在course11_1中
com.bjpowernode.b.web.servlet
TargetServlet
package com.bjpowernode.b.web.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
//演示代理机制的跨域请求问题 39
@WebServlet("/target")
public class TargetServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//响应一个json字符串
response.getWriter().print("{\"username\":\"jackson\"}");
}
}4 方案5：nginx反向代理 39
- nginx反向代理中也是使用了这种代理机制来完成AJAX的跨域，只要修改一个nginx的配置即可。以后大家学习nginx之后再说吧。！！！！
