js的跨域问题 和 jQuery的跨域问题

  • 内容
  • 相关
域名:Domain Name,又称网域、网域名城,是由一串用点分割的名字组成的Internet上某一台计算机或计算机组的名称,用于数据传输时标识计算机的电子方位(有时也指地理位置)。

跨域:两个不同域名之间的通信,称为跨域。
例如:http://www.baidu.com 和 http://www.sina.com.cn

jQuery如何实现跨域请求呢?答:使用JSONP形式实现跨域。

域:服务器的域名。服务器的域名的唯一标识需要满足:协议+域名+端口,必须保证是一致的,说明域相同。
跨域:在一个服务器上,去访问另一个服务器。

1、在js当前域中如果去调用另一个域的程序时,它不能够执行当前域的js函数,所以就不能得到你想要的数据了。怎么办呢?答案在下面。

2、在jQuery中使用JSONP形式实现跨域。
什么是JSONP呢?
   答:JSONP是数据交换格式JSON的一种“使用模式”,可以让网页从别的网域要资料。
        由于同源策略,一般来说位于 server.example.com 的服务器的网页无法与不是 server.example.com 的服务器沟通,
        而 HTML 的 <script> 元素是一个例外,利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,

        而这种使用模式就是所谓的 JSONP。

----------------------------------------------------------------------------------------------------------

js的跨域问题图解,如下图所示:


1560271454(1).jpg


传统的js的跨域处理:
tomcat1的代码如下:

5.ajax_domain.html


<!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>5.ajax_domain.html</title>
    <!-- js的跨域问题-解决方案  -->
    <!-- 注意:需要将函数放在 调用之前,从而保证函数存在 -->
    <script type="text/javascript">
        function showDate(data) {
            alert(data.success);
        }
    </script>
    <script type="text/javascript" src="http://localhost:80/web/getData?callback=showData"></script>
</head>
<body>
    <input type="button" value="发送ajax"/>
</body>
</html>
--------------------------------------------------------------
tomcat2的代码如下:
GetDataServlet.java


package com.itheima.web.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class GetDataServlet extends HttpServlet {

    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 编码问题
        response.setContentType("application/json;charset=UTF-8"); // 这样写标准,参考\apache-tomcat\apache-tomcat-9.0.7\conf\web.xml 中MIME的写法

        // 1、获得请求参数,即函数名称
        String callback = request.getParameter("callback");
        // 2、生成json数据
        String jsonStr = "{\"success\":\"成功了\", \"info\":\"提示信息\"}";
        // 3、通知tomcat1去执行showData
        response.getWriter().print(callback + "(" + jsonStr + ")");
    }

    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

----------------------------------------------------------------
jQuery的跨域问题图解,如下图所示:
iI0FDf.png


非传统的jQuery的跨域处理:
tomcat1的代码如下:

6.ajax_domain.html


<!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>6.ajax_domain.html</title>
    <!-- jQuery的跨域问题-解决方案  -->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $.getJSON("http://localhost:80/web/getData?callback=?", function(data) {
            alert(data.success);
        });
    </script>
</head>
<body>
    <input type="button" value="发送ajax"/>
</body>
</html>
其余代码同上。



本文标签:

版权声明:若无特殊注明,本文皆为《筱彬》原创,转载请保留文章出处。

本文链接:js的跨域问题 和 jQuery的跨域问题 - http://www.itfml.com/qianduan/95.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

2条评论
  1. avatar

    头条新闻 Lv.1 Chrome 63.0.3239.132 Chrome 63.0.3239.132 Windows 7 Windows 7 回复

    文章不错非常喜欢

    广西贺州市 联通

    1. avatar

      今日新鲜事 Lv.1 Chrome 63.0.3239.132 Chrome 63.0.3239.132 Windows 7 Windows 7 回复

      文章不错非常喜欢

      广西贺州市 联通