Ajax及跨域请求

已于 2023-10-31 21:03:35 修改
阅读量1.9k 收藏 2
点赞数
分类专栏： 前端 文章标签： javascript ajax 前端
于 2022-07-05 08:58:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YUELEI118/article/details/125454912
版权

视频

Ajax

1. JavaScript中的Ajax

1.1 功能

实现网页的动态展示。刷新网页中的部分页面内容，又不引起整个页面的刷新。

  • 完整代码：
	     let xmlHttpRequest = new XMLHttpRequest();
		 xmlHttpRequest.onreadystatechange = function () {
         	if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
             	var text = xmlHttpRequest.responseText;//服务器返回的字符串
             	console.log(text)
              //ToDo
          }
        }
        //GET请求发送数据：getText="/资源路径?key1=value&key2=value"
        xmlHttpRequest.open("GET",getText,true);
        xmlHttpRequest.send();

1.2 步骤详解(GET请求)

  1. 创建XMLHttpRequest对象
        let xmlHttpRequest = new XMLHttpRequest();
  1. 状态码发生改变onreadystatechange

xmlHttpRequest.readyState返回0-4，5个值，代表xmlHttpRequest 对象的5种不同状态：
0：xmlHttpRequest 对象的未初始化状态。这个值检测不到；
1： xmlHttpRequest对象使用open方法，创建了Http请求；
2： xmlHttpRequest对象使用send方法，处于发送数据状态；
3： 客户端已经返回数据，xmlHttpRequest对象正在接收数据的状态；
4：数据接收完毕

xmlHttpRequest.status 返回响应状态码，200表示响应成功

xmlHttpRequest.responseText返回Response响应的字符串。

 		xmlHttpRequest.onreadystatechange = function () {
          if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
              var text = xmlHttpRequest.responseText;//服务器返回的字符串
              //ToDo
          }
        }
  1. 初始请求数据
    XMLHttpRequest.open(method,URL,flag,name,password);
    参数：
    - method:请求方式GET | POST
    - URL:路径
    - flag: true异步请求；false同步请求。默认为true
    - name：服务器用户名
    - password： 服务器密码

    同步：在第4步发送请求之后，必须等待服务器将数据返回，在此期间不能执行其他任务。
    异步：在第4步发送请求之后，执行其他任务，无需等待数据返回。

        xmlHttpRequest.open("get",getText,true);
  1. 发送请求
        xmlHttpRequest.send();

1.3 通过POST请求发送表单

与GET请求有两个不同的地方

  1. 需要设置请求头：
    代码必须在open方法和send方法中间
	xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8")
  1. 发送数据的位置
	xmlHttpRequest.send("key1=value&key2=value");

1.3.1 POST请求时发送到服务器的各种数据格式

  1. JSON数据格式application/json
xhr.setRequestHeader("Content-type","application/json; charset=utf-8");
  1. 提交 form 表单 application/x-www-form-urlencoded
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
  1. 通过form表单发送文件multipart/form-data
xhr.setRequestHeader("Content-type", "multipart/form-data; charset=utf-8");
  1. 发送数据为xml格式text/xml
xhr.setRequestHeader("Content-type", "text/xml; charset=utf-8");

1.4 返回的json格式如何处理

服务器返回的数据都是字符串格式，处理方法：

  1. eval方法
	var jsonObj = eval('('+jsonStr+')');//将json字符串jsonStr转换为jasn对象
	var value = jsonObj.key1;//返回json对象中键值为key1的值
  1. JSON.prse
	var jsonObj = JSON.parse(jsonStr);//将json字符串jsonStr转换为jasn对象

1.5 通过ajax发送请求和接收响应时乱码问题

  • Tomcat 10 没有任何乱码问题
  • Tomcat 9 及以下
  1. Get 请求：Response响应返回中文乱码
    解决办法，服务器端加入以下代码：
	response.setContentType("text/html;charset=UTF-8");
  1. POST请求：在请求和响应中文时都有乱码问题
    解决办法：
	request.setCharacterEncoding(‘UTF-8’);//解决请求乱码
	response.setContentType("text/html;charset=UTF-8");//解决响应乱码

2. JQuery中的Ajax

详细的讲解
第一种：（参数最少的写法）

	$.ajax({
          url:"路径",
          data: {
                id: 1,
            },
          success:function (data) {
            $.each(data,function (i,n) {
                // each可以循环json格式的字符串，i为index，n为json的数据，取值：n.name
            })
          }
        })

$.each(data,function (i,n)的参数：

  1. data为一维的数组或json对象时：i是key，n是value
  2. data为二位的数组或json对象是List集合时：i是下标，n 是data[i]
参数名类型描述
urlString(默认: 当前页地址) 发送请求的地址。
typeString(默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
asyncBoolean(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
contentTypeString(默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。告诉服务器从浏览器提交过来的数据格式。
dataObject、String发送到服务器的数据。json格式
dataTypeString预期服务器返回的数据类型。json、string
errorFunction(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
successFunction请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
beforeSendFunction请求发起前执行
completeFunction请求完成后执行，无论成功与否
  • 第二种
    $.get(“url”,{ data(key:value) },callback,“type”);
    $.post(“路径”,{ “数据名”：数据 },function(返回的数据){ 执行代码 },“数据格式”)

默认数据格式为json，可省略，get请求最简化写法：

	$.get("路径",function(返回的数据){ 执行代码 })
参数名称类型说明
urlString请求HTML页的URL地址
data（可选）Object发送到服务器的key/value数据会作为字符串附加到请求的URL中
callback（可选）Function请求成功时的回调函数，有两个参数：返回的数据，请求状态
type（可选）String服务器返回内容的格式：xml、html、script、json、text、default

3. 跨域请求

Ajax发送跨域请求时会被浏览器的同源策略（CORS）阻止，这是浏览器的安全策略。

总结：实现跨域请求必须服务器端配合，浏览器端无法单独实现跨域请求

示例
a站点：http://localhost:8080/a/
b站点：http://localhost:8081/b/
从a站点发送跨域请求到b站点，浏览器报错：

Access to XMLHttpRequest at 'http://localhost:8081/b/hello' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

什么是同源？
协议一致、域名一致、端口号一致。

3.1 在servlet端设置响应头，解决Ajax跨域访问

要访问的资源允许跨域访问。

//允许某个站点可以对本地资源跨域访问
response.setHeader("Access-Control-Allow-Origin","http://localhost:8080");
// 允许所有站点可以对本地资源跨域访问
response.setHeader("Access-Control-Allow-Origin","*");

3.2 jsonp，解决Ajax跨域访问

  1. jsonp不是Ajax请求，通过代码实现了类似Ajax局部刷新的效果。
  2. jsonp是利用了<script>标签的src属性。
  3. 当script加载时，会将src属性的值所指向的文件内容作为script代码执行，实现ajax的效果。
  4. 只能实现get请求。

3.2.1 简单示例

b中servlet返回的字符串，会在a的页面中当作script代码执行

a的web

<script type="text/javascript" src="http://localhost:8081/b/AjaxJsonp1"></script>

b的servlet

@WebServlet("/AjaxJsonp1")
public class AjaxJsonp1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().print("alert(\"Jsonp1!\")");
    }
}

3.2.2 复杂示例

执行过程

  1. 页面加载完毕后，点击button按钮
  2. 在body中增加script元素
  3. script元素加载时会加载自己的src属性，src属性指向b站点的ajaxjsonp2，并且通过get方法传递值fun=sayHello
  4. b 站点获取请求中的值sayHello，并返回了字符串sayHello({{"username":"jackson"}})
  5. 返回的字符串会被script元素当作script代码执行。
  6. 执行sayHello(data)方法

a站点中的页面

<html>
<head>
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    function sayHello(data){
        // 获取json字符串中的key对应的value，添加到div1中
        document.getElementById("div1").innerHTML = data.username
    }
</script>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = () => {
            // 创建script元素
            const htmlScriptElement = document.createElement(`script`)
            // 设置script的type属性
            htmlScriptElement.type = "text/javascript"
            // 设置script的src属性，注意：通过get方法传入了参数fun=sayHello
            htmlScriptElement.src = "http://localhost:8081/b/ajaxjsonp2?fun=sayHello"
            // 将script元素添加到body中
            document.getElementsByTagName("body")[0].appendChild(htmlScriptElement)
        }

    }
</script>
<button id="btn">通过jsonp调用方法</button>
<div id="div1"></div>
</body>
</html>

b站点中的servlet

@WebServlet("/ajaxjsonp2")
public class AjaxJsonp2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // get传入参数，获取参数的值
        String fun = request.getParameter("fun");
        // 返回的值是字符串
        response.getWriter().print(fun + "({\"username\":\"jackson\"})");

    }
}

页面点击button后的代码：

<html>
<head>
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    function sayHello(data){
        // 获取json字符串中的key对应的value，添加到div1中
        document.getElementById("div1").innerHTML = data.username
    }
</script>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = () => {
            // 创建script元素
            const htmlScriptElement = document.createElement(`script`)
            // 设置script的type属性
            htmlScriptElement.type = "text/javascript"
            // 设置script的src属性，注意：通过get方法传入了参数fun=sayHello
            htmlScriptElement.src = "http://localhost:8081/b/ajaxjsonp2?fun=sayHello"
            // 将script元素添加到body中
            document.getElementsByTagName("body")[0].appendChild(htmlScriptElement)
        }

    }
</script>
<button id="btn">通过jsonp调用方法</button>
<-- dia-->
<div id="div1">jackson</div>
<-- 点击button后会在body最后增加子元素 script，script元素在加载时会加载src的属性值-->
<script type="text/javascript" src="http://localhost:8081/b/ajaxjsonp2?fun=sayHello"></script>

</body>
</html>

3.3 jQuery封装的jsonp

  1. jQuery封装的jsonp看似与ajax一样，但它只是使用了ajax的外壳
  2. dataTape属性值：jsonp
  3. 在发送请求时浏览器中请求url：请求 URL: http://localhost:8081/b/ajaxjson3?callback=jQuery36007791340332230894_1656146765961&_=1656146765962，jquery自动生成键值对，键的名字默认为callback，键值对的默认值为随机字符串，并通过get方法传递给后台。后面的_=1656146765962为时间戳，防止浏览器读取缓存。
  4. servlet中需要获取该键值对的value，然后返回给浏览器。返回的数据：jQuery36007791340332230894_1656146765961({"username":"jackson"})
  5. 可以看出jquery实现jsonp和上面3.2.2中使用的方法是一样的，jquery把方法名和方法都进行了优化。

a站点网页

<html>
<head>
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            $.ajax({
                type: "GET",
                url: "http://localhost:8081/b/ajaxjson3",
                dataType: "jsonp",// 返回数据的格式
                success: function (data) {// data：返回的数据
                    $("#div1").html(data.username)
                }
            })
        })
    })
</script>
<button id="btn">jQuery实现jsonp</button>
<div id="div1"></div>
</body>
</html>

b站点servlet

@WebServlet("/ajaxjson3")
public class AjaxJsonp3 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // jquery在get请求中添加键值对，key是callback，value为随机字符串
        String callback = request.getParameter("callback");
        response.getWriter().print(callback+"({\"username\":\"jackson\"})");
    }
}
  • a站点页面中ajax的另一种写法
  1. ajax发送请求时，请求 URL: 请求 URL: http://localhost:8081/b/ajaxjson4?fun=sayHello&_=1656148497823
  2. 不使用默认的参数名callback，指定为fun
  3. 不使用默认的回调函数success，指定回调函数为sayHello
<html>
<head>
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
    function sayHello(data){
        $("#div1").html(data.username)
    }
    $(function () {
        $("#btn").click(function () {
            $.ajax({
                type: "GET",
                url: "http://localhost:8081/b/ajaxjson4",
                dataType: "jsonp",// 指定数据类型为jsonp
                jsonp:"fun", // 指定GET请求时参数的key为callback
                jsonpCallback:"sayHello" // 指定jsonp的回调函数为sayHello
            })
        })
    })
</script>
<button id="btn">jQuery实现jsonp</button>
<div id="div1"></div>
</body>
</html>

b站点中的servlet

@WebServlet("/ajaxjson4")
public class AjaxJsonp4 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String funName = request.getParameter("fun");
        response.getWriter().print(funName+"({\"username\":\"jackson\"})");
    }
}
YUELEI118
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ajax跨域请求(cors实现),ajax跨域请求（CORS实现）
weixin_42511217的博客
08-05 958
场景：目前有项目A(基于servlet的WEB项目)，和项目B(基于spring boot的WEB项目)，使用同一CAS提供单点登陆，如今须要两个项目互相调用接口数据，因此涉及到ajax的跨域请求java调研：通过调研发现目前的ajax跨域解决方案有两种，jsonp和cors，其中jsonp须要在返回值中携带回调函数，cors则须要在响应头中附加指定参数。比对实现方式和优劣点，决定使用cors来实...
Ajax跨域请求 JSON JSONP
weixin_34321977的博客
02-23 246
同源策略和跨域-总结 目录： 1.同源策略 2.跨域 3.几种跨域技术 1.同源策略 什么叫同源？ URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同...
Ajax跨域的所有方法（最详细带使用教程！！！）
2401_83641098的博客
03-29 394
是基于node中间件进行实现的，proxy相当于node给你模拟了一个nginx服务器请求，服务器请求服务器之间不存在跨域，因为跨域是浏览器对js做的安全限制，proxy请求回来的数据，在返回给客户端，解决跨域。//给请求过来的源地址返回信息,第一个参数代表返回的数据，第二个参数代表把数据发给谁，ev.origin代表的是发送给请求源，第二个参数也可以写*//请求http://www.xxx.com:80/api，将该请求转发到www.aaa.con，则保证请求在同一个域，解决跨域问题。
Ajax跨域请求
最新发布
weixin_72256328的博客
04-12 1423
Ajax跨域请求
AJAX跨域问题解决方案
weixin_59528719的博客
02-22 1175
跨域访问的资源、跨域访问
ajax跨域，这应该是最全的解决方案了
热门推荐
洞庭儿女
10-13 1万+
前言 从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。 个人见识有限，如有差错，请多多见谅，欢迎提出issue，另外看到这个标题，请勿喷~ 题纲 关于跨域，有N种类型，本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍)，内容大概如下: 什么
AJAX跨域访问问题详解
欢迎。
11-01 1215
对AJAX跨域访问进行了详细的概述；对实际开发中遇见的问题进行了深入的刨析和解决。
跨域AJAX请求的解决方案
it_man的专栏
05-20 1万+
在AJAX应用环境中，由于安全的原因，浏览器不允许XMLHttpRequest组件请求跨域资源。在很多情况下，这个限制给我来带来的诸多不 便。很多同行，研究了各种各样的解决方案：1. 通过修改document.domain和隐藏的IFrame来实现跨域请求。这种方案可能是最简单的一种跨域请求的方案，但是它同样是一种限制最大的方 案。首先，它只能实现在同一个顶级域名下的跨域请求；另外，当在一个页面中
JS中ajax请求跨域的几种方法
web_noob的博客
12-10 690
在此我只讲跨域的解决方法，什么是跨域什么是浏览器同源策略这些请自行搜索。 1.跨域资源共享（CORS） CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。 服务器端对于CORS的支持，主要就是通过...
JS - Ajax 跨域篇
牧码的博客
01-01 480
1、浏览器的限制：当浏览器发现你的请求是跨域的时候，会做校验，如果校验不通过，将会报跨域安全问题。浏览器多管闲事, get请求能正常返回，但是浏览器会报错；说明后台是没问题的，只是浏览器的限制问题。 2、跨域：发出去的请求只要域名，端口，协议中有一个不同，都会产生跨域。 3、发送的是xhr（XMLHTTPRequest）请求，如果发送的不是xhr请求，就算是跨域，浏览器也不会报错。 4、...
jQuery Ajax实现跨域请求
10-20
总结来说，jQuery的Ajax功能结合JSONP协议，可以方便地实现跨域请求，这对于前后端分离、单页应用等场景下的数据交互尤其重要。开发者需要理解JSONP的工作原理，以及如何在jQuery中配置Ajax请求以利用JSONP来跨域...
原生JS实现ajax与ajax的跨域请求实例
11-27
一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步：设置状态监听函数 第三步：open一个连接，true是异步请求 第四部：send一个请求，可以发送一个对象和字符串，不需要传递数据发送null 第五步：在监听函数...
Vue Ajax跨域请求实例详解
08-30
Vue Ajax跨域请求实例详解 在本篇文章中，我们将对 Vue Ajax 跨域请求实例进行详细的介绍，主要涵盖了 Vue Ajax 跨域请求的配置、实现和注意事项。 一、配置跨域请求 在 Vue 项目中，实现跨域请求需要在 config/...
详解Spring Boot 2.0.2+Ajax解决跨域请求的问题
08-26
"详解Spring Boot 2.0.2+Ajax解决跨域请求的问题" 知识点1：什么是跨域请求？ 跨域请求是指浏览器从一个域名下的网页去请求另一个域名下的资源时，会出现的安全限制问题。该限制是因为浏览器的同源策略（Same-...
ajax跨域问题
山海也有意难平
10-11 4902
跨域问题简单的说就是前台请求一个后台链接，发送请求的前台与后台的地址不在同一个域下，就会产生跨域问题。这里所指的域包括协议、IP地址、端口等。 1.跨域访问安全问题 后端代码： package cn.qs.controller; import java.util.LinkedHashMap; import java.util.Map; import org.apache.commons.collections.MapUtils; import org.springframework.web.bi
js【详解】ajax （含XMLHttpRequest、 同源策略、跨域、JSONP）
朝阳39的博客
03-13 1150
借助 script 标签 向目标服务器加载到 jsonp.js 文件，执行 callback 函数，因本地已定义了 callback 函数，便会触发本地 js 代码的执行，获取到 jsonp.js 文件中的数据，从而实现了跨域。服务器设置 http header，即服务器端将指定网址设置为白名单，允许它以指定的方法进行跨域访问。JSONP 实现跨域的过程：借助 script 标签没有同源策略限制的特点，向跨域的目标服务器加载到需要的数据。所有的跨域，都必须经过 server 端允许和配合。
Ajax跨域问题
HQqHQhqqhq的博客
12-15 1192
ajax 跨域
AJAX的跨域问题使用设置响应头和JsonP的方式实现跨域------AJAX
春风若有怜花意，可否许我再少年
11-18 300
AJAX的跨域问题使用设置响应头和JsonP的方式实现跨域------AJAX
Ajax请求跨域问题
qq_43159578的博客
09-17 506
由于浏览器的同源策略，使得，AJAX请求只能发给同源的网址，否则就报错。除了架设服务器代理，如Nginx（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制： 　　 一、 JSONP 　　JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。 　　它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数...
ajax jsonp跨域请求
09-11
Ajax JSONP（JSON with Padding）是一种允许跨域请求的技术。在同源策略的限制下，浏览器要求请求和响应的域名、协议和端口号必须一致。而通过使用JSONP，可以绕过这种限制。 JSONP利用了<script>标签不受同源策略限制的特点。它通过动态创建<script>标签，将请求发送到目标服务器上的一个特定的URL，该URL返回一个回调函数的调用，将数据作为参数传递给回调函数。 下面是一个使用Ajax JSONP跨域请求的示例： ```javascript function handleResponse(data) { // 处理返回的数据 } var script = document.createElement('script'); script.src = 'http://example.com/api?callback=handleResponse'; document.body.appendChild(script); ``` 在上面的示例中，我们动态创建了一个<script>标签，并设置其src属性为目标服务器上的API地址，同时指定了一个名为`handleResponse`的回调函数。当服务器返回响应时，会调用这个回调函数，并将数据作为参数传递进去。 需要注意的是，在使用JSONP时，服务端需要支持JSONP格式的响应。通常情况下，服务端会根据请求中携带的`callback`参数来动态生成响应内容。 希望这个示例能帮助你理解Ajax JSONP跨域请求的基本原理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值