Ajax及跨域请求

已于 2023-10-31 21:03:35 修改
阅读量2.1k 收藏 3
点赞数
分类专栏： 前端 文章标签： 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
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ajax跨域请求(cors实现),ajax跨域请求（CORS实现）
weixin_42511217的博客
08-05 969
场景：目前有项目A(基于servlet的WEB项目)，和项目B(基于spring boot的WEB项目)，使用同一CAS提供单点登陆，如今须要两个项目互相调用接口数据，因此涉及到ajax的跨域请求java调研：通过调研发现目前的ajax跨域解决方案有两种，jsonp和cors，其中jsonp须要在返回值中携带回调函数，cors则须要在响应头中附加指定参数。比对实现方式和优劣点，决定使用cors来实...
AJAX跨域问题解决方案
weixin_59528719的博客
02-22 1665
跨域访问的资源、跨域访问
ajax跨域，这应该是最全的解决方案了
热门推荐
洞庭儿女
10-13 1万+
前言 从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。 个人见识有限，如有差错，请多多见谅，欢迎提出issue，另外看到这个标题，请勿喷~ 题纲 关于跨域，有N种类型，本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍)，内容大概如下: 什么
Ajax跨域的所有方法（最详细带使用教程！！！）
最新发布
2401_84446548的博客
04-28 1289
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
AJAX跨域访问问题详解
欢迎。
11-01 1229
对AJAX跨域访问进行了详细的概述；对实际开发中遇见的问题进行了深入的刨析和解决。
跨域AJAX请求的解决方案
it_man的专栏
05-20 1万+
在AJAX应用环境中，由于安全的原因，浏览器不允许XMLHttpRequest组件请求跨域资源。在很多情况下，这个限制给我来带来的诸多不 便。很多同行，研究了各种各样的解决方案：1. 通过修改document.domain和隐藏的IFrame来实现跨域请求。这种方案可能是最简单的一种跨域请求的方案，但是它同样是一种限制最大的方 案。首先，它只能实现在同一个顶级域名下的跨域请求；另外，当在一个页面中
JS中ajax请求跨域的几种方法
web_noob的博客
12-10 701
在此我只讲跨域的解决方法，什么是跨域什么是浏览器同源策略这些请自行搜索。 1.跨域资源共享（CORS） CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。 服务器端对于CORS的支持，主要就是通过...
jQuery Ajax实现跨域请求
10-20
总结来说，jQuery的Ajax功能结合JSONP协议，可以方便地实现跨域请求，这对于前后端分离、单页应用等场景下的数据交互尤其重要。开发者需要理解JSONP的工作原理，以及如何在jQuery中配置Ajax请求以利用JSONP来跨域...
原生JS实现ajax与ajax的跨域请求实例
11-27
3. **jQuery的AJAX跨域**：jQuery的`$.ajax()`或`$.getJSON()`方法提供了JSONP的支持。只需要设置`dataType`为"jsonp"，jQuery会自动处理回调函数的生成和调用。 ```javascript $.ajax({ url: 'your-url', ...
ajax处理跨域请求
01-27
当使用AJAX进行跨域请求时，我们需要采取特殊的方法来规避同源策略。这里将详细讲解如何通过jQuery的AJAX实现跨域请求。 首先，了解什么是CORS（Cross-Origin Resource Sharing，跨源资源共享）。CORS是一种机制，...
Vue Ajax跨域请求实例详解
08-30
Vue Ajax跨域请求实例详解 在本篇文章中，我们将对 Vue Ajax 跨域请求实例进行详细的介绍，主要涵盖了 Vue Ajax 跨域请求的配置、实现和注意事项。 一、配置跨域请求 在 Vue 项目中，实现跨域请求需要在 config/...
JS - Ajax 跨域篇
牧码的博客
01-01 486
1、浏览器的限制：当浏览器发现你的请求是跨域的时候，会做校验，如果校验不通过，将会报跨域安全问题。浏览器多管闲事, get请求能正常返回，但是浏览器会报错；说明后台是没问题的，只是浏览器的限制问题。 2、跨域：发出去的请求只要域名，端口，协议中有一个不同，都会产生跨域。 3、发送的是xhr（XMLHTTPRequest）请求，如果发送的不是xhr请求，就算是跨域，浏览器也不会报错。 4、...
ajax跨域问题
山海也有意难平
10-11 4908
跨域问题简单的说就是前台请求一个后台链接，发送请求的前台与后台的地址不在同一个域下，就会产生跨域问题。这里所指的域包括协议、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 1181
借助 script 标签 向目标服务器加载到 jsonp.js 文件，执行 callback 函数，因本地已定义了 callback 函数，便会触发本地 js 代码的执行，获取到 jsonp.js 文件中的数据，从而实现了跨域。服务器设置 http header，即服务器端将指定网址设置为白名单，允许它以指定的方法进行跨域访问。JSONP 实现跨域的过程：借助 script 标签没有同源策略限制的特点，向跨域的目标服务器加载到需要的数据。所有的跨域，都必须经过 server 端允许和配合。
Ajax跨域问题
HQqHQhqqhq的博客
12-15 1196
ajax 跨域
AJAX的跨域问题使用设置响应头和JsonP的方式实现跨域------AJAX
春风若有怜花意，可否许我再少年
11-18 309
AJAX的跨域问题使用设置响应头和JsonP的方式实现跨域------AJAX
Ajax请求跨域问题
qq_43159578的博客
09-17 512
由于浏览器的同源策略，使得，AJAX请求只能发给同源的网址，否则就报错。除了架设服务器代理，如Nginx（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制： 　　 一、 JSONP 　　JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。 　　它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数...
AJAX基本知识，解决跨域（JSONP和CORS）
m0_59411260的博客
10-09 277
ajax相关知识
ajax跨域 后台允许跨域访问
My Blog My Style
07-30 590
参考博文：https://blog.csdn.net/djl0906/article/details/70238847 1、新建一个过滤器 package com.util.filter; import javax.servlet.*; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /...
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、付费专栏及课程。

余额充值