AJAX跨域访问(不同域之间相互访问)

一、跨域:

  • 跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度(https://baidu.com)页面去请求京东(https://www.jd.com)的资源。
  • 通过超链接或者form表单提交或者超链接的方式进行跨域是不存在问题的。但在一个域名的网页中的一段js代码发送ajax请求去访问另一个域名中的资源,由于同源策略的存在导致无法跨域访问,那么ajax就存在这种跨域问题。
  • 有一些情况下,我们是需要使用ajax进行跨域访问的。比如某公司的A页面(a.bjpowernode.com)有可能需要获取B页面(b.bjpowernode.com)。

二、同源策略:

  • 同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性同源就是协议(http)、域名(localhost)和端口(8080)都相同
  • Ajax无法跨域:http://localhost:8080/这个域名中的文件不能访问http://localhost:8081/这个域名中的内容。但是form表单和超链接可以。
  • 同源策略有什么用?如果你刚刚在网银输入账号密码,查看了自己还有1万块钱,紧接着访问一些非法的网站,这个网站可以访问刚刚的网银站点,并且获取账号密码,那后果可想而知。所以,从安全的角度来讲,同源策略是有利于保护网站信息的

三、解决Ajax跨域问题的方案:

方案一:设置响应头

在被访问的servlet中加入下述代码表示允许该域名访问我(该servlet)。

    response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080"); // 允许某个域名访问我
    response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有域名访问我

方案二:jsonp

  • jsonp:json with padding(带填充的json)
  • jsonp不是ajax请求,但是可以完成局部刷新的效果,并且可以解决跨域问题。
  • 注意:jsonp解决跨域的时候,只支持GET请求。不支持post请求。
  •   原理:script标签的src属性可以跟URL,作用是访问某个servlet,后端servlet响应该请求并返回一个字符串到标签中,浏览器接收到这个字符串后,会自动将字符串当做JS代码执行。
    如果后端响应的字符串是一段JS代码的字符串,那么就能实现JS的一系列操作,例如使用innerHTML方法动态生成标签的值、调用前端创建的函数等,类似ajax异步刷新。
    
  • 例子:用户点击按钮后从后端接收数据展示到前端。这里后端接收的数据是一个前端早已写好的函数。AJAX跨域访问(不同域之间相互访问)_第1张图片
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp跨域问题title>
head>
<body>
  <script type="text/javascript">
    function dosome(myjson){//这是我们自己写的函数,一会后端返回的JS代码是fun(json),然后调用我们这个函数给div标签内容赋值
      document.getElementById("mydiv").innerHTML = myjson.name;
    }
    window.onload =() => {//箭头函数
      document.getElementById("btn").onclick = () =>{//箭头函数,点击按钮创建一个
                    
                    

你可能感兴趣的:(AJAX,ajax,servlet,java)