zoukankan      html  css  js  c++  java
  • ajax跨域问题简单解决--(1)

     

    js不能跨域请求数据,js可以跨域加载js文件,比如使用jquery可以引用官网的url,这也是跨域
    解决js的跨域问题可以使用jsonp。

    先来说一下什么是跨域和非跨域

    简单的据一些例子

    (非跨域)

    http://www.123.com/index.html 调用 http://www.123.com/server.PHP

    (主域名不同:123/456,跨域)

    http://www.123.com/index.html 调用 http://www.456.com/server.php

    (子域名不同:abc/def,跨域)

    http://abc.123.com/index.html 调用 http://def.123.com/server.php

    (端口不同:8080/8081,跨域)

    http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php

    (协议不同:http/https,跨域)

    http://www.123.com/index.html 调用 https://www.123.com/server.php

    请注意:localhost127.0.0.1虽然都指向本机,但也属于跨域。

    跨域的问题:

    浏览器存在限制,不让访问数据。而不是服务端的限制,服务端正常发送请求,也正常响应了,但是当数据到达浏览器,浏览器不让js去拿这些数据。此时以上ajax的方案就起不到作用。

    解决方案一:Jsonp

        原理:利用 script标签,加载src路径,实现跨域加载js文件。该js文件中需要定义好一个方法,将该方法名传递给服务端,服务端根据该方法名,拼装一个方法调用语句,响应给浏览器。又浏览器来执行该语句调用方法。通过参数,将响应的数据取出即可

    实现:

        js

        1.定义一个方法,script加载

        2.取方法中参数,进行业务处理。

        jq:已经封装好了

            只需要在jqajax中,指定dataType"jsonp",jq在发送请求前会先定义好一个方法。  发送请求时会将该方法作为参数(callback)传递给服务端。

            服务端响应,调用方法,把数据取出,传递给datadata中拿到的即为服务端数据。

     

            服务端的配合:

     

            改造方法:  

    Controller示例

    //响应类型contentType可以指定produces="application/json;charset=utf-8"//也可以使用常量值 APPLICATION_JSON_UTF8_VALUE
    
    @RequestMapping(value = "/user/token/{token}",produces=MediaType.APPLICATION_JSON_UTF8_VALUE)
    
    @ResponseBody
    
    public String getUserByToken(@PathVariable String token,String callback){
    
    E3Result result = tokenService.getUserByToken(token);
    
    //响应结果之前,要先判断是否为jsonp形式,即判断callback是否有数据
    
    if (StringUtils.isNoneBlank(callback)) {
    
    //callback不为空,则是jsonp请求
    
    //把结果封装成一个js语句响应
    
    return callback  + "(" + JsonUtils.objectToJson(result) + ");";
    
     
    
    }
    
    return JsonUtils.objectToJson(result);
    
    }

     

    Ajxa示例

     

     1 $.ajax({
     2 
     3 url:"http://localhost:8080/user/token/",
     4 
     5 dataType:"jsonp",
     6 
     7 type : "GET",
     8 
     9 success:function(data){
    10 
    11     console.log(data);
    12 
    13 }
    14 
    15 });

     

    ajax异步请求增加dataTpe:“jsonp”参数后,

     1.发出去的请求类型在浏览器可以看到是script类型的,浏览器是不会校验的。普通的ajax请求是xhr类型的。

            2.返回的类型不同:普通的ajax请求content-type是json,而jsonp的请求content-type是js脚本。

  • 相关阅读:
    【t083】买票
    基于Linux应用层的6LOWPAN物联网网关及实现方法
    Express的路由详解
    day18 8.jdbc中设置事务隔离级别
    day18-事务与连接池 6.事务隔离级别与解决问题
    day36-hibernate检索和优化 02-Hibernate检索方式:简单查询及别名查询
    day37-hibernate 02-Hibernate二级缓存:二级缓存的散装数据
    day36-hibernate检索和优化 01-上次课内容回顾
    day36-hibernate检索和优化 05-Hibernate检索方式:离线条件查询
    SQL Server 涉及数据库安全常用SQL语句
  • 原文地址:https://www.cnblogs.com/a-small-lyf/p/10187408.html
Copyright © 2011-2022 走看看