ajax jsonp不触发后台_JsonP

最新推荐文章于 2023-01-08 16:34:02 发布
最新推荐文章于 2023-01-08 16:34:02 发布
阅读量97 收藏
点赞数
文章标签： ajax jsonp不触发后台
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_32584595/article/details/112078422
版权

一、 JsonP 简介

1 什么是 JsonP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站） 那获取资料，即跨域读取数据。 为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同 源策略。

2 什么是跨域？

跨域是指一个域（网站）下的文档或脚本试图去请求另一个域（网站）下的资源。

41752f538400212c46423dcad8154515.png

3 什么是同源策略？

同源策略/SOP（Same origin policy）是一种约定，由 Netscape 公司 1995 年引入浏览器， 它是浏览器最核心也最基本的安全功能，现在所有支持 JavaScript 的浏览器都会使用这个策 略。如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指"协议+域 名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。

3.1 非同源策略限制以下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取

2.) DOM 和 Js 对象无法获得

3.) AJAX 请求不能发送

4 常见跨域场景 

URL                                  说明                        是否允许通信
http://www.domain.com/a.js 
http://www.domain.com/b.js         同一域名，不同文件或路径           允许 
http://www.domain.com/lab/c.js 
 
http://www.domain.com:8000/a.js 
http://www.domain.com/b.js         同一域名，不同端口                不允许 
  
http://www.domain.com/a.js 
https://www.domain.com/b.js        同一域名，不同协议                不允许
   
http://www.domain.com/a.js 
http://192.168.4.12/b.js           域名和域名对应相同 ip             不允许
   
http://www.domain.com/a.js 
http://x.domain.com/b.js           主域相同，子域不同                不允许
 
http://domain.com/c.js   
http://www.domain1.com/a.js 
http://www.domain2.com/b.js        不同域名                         不允许

5 跨域解决方案

1） 通过 jsonp 跨域

2） document.domain + iframe 跨域

3） location.hash + iframe

4） Dave Vieira-Kurz + iframe 跨域

5） postMessage 跨域

6） 跨域资源共享（ CORS

7） ngin x 代理跨域

8） nodejs 中间件代理跨域

9） WebSocket 协议跨域

6 JsonP 优缺点

JSONP 的优点是：它不像 XMLHttpRequest 对象实现的 Ajax 请求那样受到同源策略的 限制；它的兼容性更好，在更加古老的浏览器中都 可以运行，不需要 XMLHttpRequest 或 ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。

JSONP 的缺点则是：它只支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求；它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 JavaScript 调用 的问题。

二、 JsonP 的使用

1 搭建跨域场景

1.1 需求：

1）创建两个 web 工程，名称为 jsonDemo1(8080)、jsonDemo2(9090)

2）jsonDemo1 中提供一个 index.jsp。

3）在 jsonDemo1 的 index.jsp 中通过 Jquery 的 Ajax 跨域请求 jsonDemo2

4）jsonDemo2 中使用 springMVC 处理请求，返回一个 json 对象

5）在 jsonDemo1 中将返回的结果插入到 index.jsp 中

1.2 创建项目

ed7d6e6f6aa0b6b8e580eea9bf573cef.png

parent工程Pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.bjsxt</groupId>
  <artifactId>jsonp-parent</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>pom</packaging>
  
  <!-- 对依赖的jar包的版本统一进行定义 -->
	<properties>
		<solrj.version>4.10.3</solrj.version>
		<jedis.version>2.9.0</jedis.version>
		<junit.version>4.12</junit.version>
		<spring.version>4.1.3.RELEASE</spring.version>
		<mybatis.version>3.2.8</mybatis.version>
		<mybatis.spring.version>1.2.2</mybatis.spring.version>
		<mysql.version>5.1.32</mysql.version>
		<slf4j.version>1.6.4</slf4j.version>
		<druid.version>1.0.9</druid.version>
		<jstl.version>1.2</jstl.version>
		<servlet-api.version>2.5</servlet-api.version>
		<tomcat.version>2.2</tomcat.version>
		<jsp-api.version>2.0</jsp-api.version>
		<zkClient-version>0.10</zkClient-version>
		<dubbo-version>2.5.4</dubbo-version>
		<jackson.version>2.4.2</jackson.version>
		<commons-net.version>3.3</commons-net.version>
		<commons-fileupload.version>1.3.1</commons-fileupload.version>
	</properties>


	<!-- jar包的依赖注入 ，由于该工程是一个父工程，所以jar包在该pom文件中只是声明 -->
	<dependencyManagement>
		<dependencies>
		
		<dependency>
			<groupId>org.apache.solr</groupId>
			<artifactId>solr-solrj</artifactId>
			<version>${solrj.version}</version>
		</dependency>
		<dependency>
			<groupId>redis.clients</groupId>
			<artifactId>jedis</artifactId>
			<version>${jedis.version}</version>
		</dependency>
			<!-- 单元测试 -->
			<dependency>
				<groupId>junit</groupId>
				<artifactId>junit</artifactId>
				<version>${junit.version}</version>
			</dependency>
			<!-- 日志处理 -->
			<dependency>
				<groupId>org.slf4j</groupId>
				<artifactId>slf4j-log4j12</artifactId>
				<version>${slf4j.version}</version>
			</dependency>
			<!-- Mybatis -->
			<dependency>
				<groupId>org.mybatis</groupId>
				<artifactId>mybatis</artifactId>
				<version>${mybatis.version}</version>
			</dependency>
			<dependency>
				<groupId>org.mybatis</groupId>
				<artifactId>mybatis-spring</artifactId>
				<version>${mybatis.spring.version}</version>
			</dependency>
			<!-- MySql -->
			<dependency>
				<groupId>mysql</groupId>
				<artifactId>mysql-connector-java</artifactId>
				<version>${mysql.version}</version>
			</dependency>
			<!-- 连接池 -->
			<dependency>
				<groupId>com.alibaba</groupId>
				<artifactId>druid</artifactId>
				<version>${druid.version}</version>
			</dependency>
			<!-- Spring -->
			<dependency>
				<groupId>org.springframework</groupId>
				<artifactId>spring-context</artifactId>
				<version>${spring.version}</version>
			</dependency>
			<dependency>
				<groupId>org.springframework</groupId>
				<artifactId>spring-beans</artifactId>
				<version>${spring.version}</version>
			</dependency>
			<dependency>
				<groupId>org.springframework</groupId>
				<artifactId>spring-webmvc</artifactId>
				<version>${spring.version}</version>
			</dependency>
			<dependency>
				<groupId>org.springframework</groupId>
				<artifactId>spring-jdbc</artifactId>
				<version>${spring.version}</version>
			</dependency>
			<dependency>
				<groupId>org.springframework</groupId>
				<artifactId>spring-aspects</artifactId>
				<version>${spring.version}</version>
			</dependency>
			<!-- JSP相关 -->
			<dependency>
				<groupId>jstl</groupId>
				<artifactId>jstl</artifactId>
				<version>${jstl.version}</version>
			</dependency>
			<dependency>
				<groupId>javax.servlet</groupId>
				<artifactId>servlet-api</artifactId>
				<version>${servlet-api.version}</version>
				<scope>provided</scope>
			</dependency>
			<dependency>
				<groupId>javax.servlet</groupId>
				<artifactId>jsp-api</artifactId>
				<version>${jsp-api.version}</version>
				<scope>provided</scope>
			</dependency>
			<!-- 文件上传组件 -->
			<dependency>
				<groupId>commons-fileupload</groupId>
				<artifactId>commons-fileupload</artifactId>
				<version>${commons-fileupload.version}</version>
			</dependency>
			
			<dependency>
				<groupId>commons-net</groupId>
				<artifactId>commons-net</artifactId>
				<version>${commons-net.version}</version>
			</dependency>
			
			<!-- Jackson Json处理工具包 -->
			<dependency>
				<groupId>com.fasterxml.jackson.core</groupId>
				<artifactId>jackson-databind</artifactId>
				<version>${jackson.version}</version>
			</dependency>
		</dependencies>
	</dependencyManagement>

	<build>
		<resources>
			<resource>
				<directory>src/main/java</directory>
				<includes>
					<include>**/*.xml</include>
				</includes>
			</resource>
			<resource>
				<directory>src/main/resources</directory>
				<includes>
					<include>**/*.xml</include>
					<include>**/*.properties</include>
				</includes>
			</resource>
		</resources>
		<!-- tomcat插件，由于子项目不一定每个都是web项目，所以该插件只是声明，并未开启 -->
		<pluginManagement>
			<plugins>
				<!-- 配置Tomcat插件 -->
				<plugin>
					<groupId>org.apache.tomcat.maven</groupId>
					<artifactId>tomcat7-maven-plugin</artifactId>
					<version>${tomcat.version}</version>
				</plugin>
			</plugins>
		</pluginManagement>
	</build>
</project>

1.2.1 jsonDemo1

b2db586e61295db96b1e15838477f56c.png

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <parent>
    <groupId>com.bjsxt</groupId>
    <artifactId>jsonp-parent</artifactId>
    <version>0.0.1-SNAPSHOT</version>
  </parent>
  <groupId>com.bjsxt</groupId>
  <artifactId>jsonDemo1</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  
  <dependencies>
		<!-- JSP相关 -->
		<dependency>
			<groupId>jstl</groupId>
			<artifactId>jstl</artifactId>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jsp-api</artifactId>
			<scope>provided</scope>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<!-- 配置Tomcat插件 -->
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<configuration>
					<path>/</path>
					<port>8080</port>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!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>Insert title here</title>
<script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function() {
		$("#but").click(function() {
			$.ajax({
				  type:"get",
				  url:"http://localhost:9090/user/findUser",
				  dataType:"jsonp",
				  jsonp:"callback",
				  success:function(data){
					    alert(data);
						var str = "";
						for(i=0;i<data.length;i++){
							str+= data[i].userid+" "+data[i].username+" "+data[i].userage+" ";
						}
						$("#show").html(str);
			     }
		})		
	})
})
</script>
</head>
<body>
	<span id="show"></span>
	<input type="button" value="ok" id="but">
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	id="WebApp_ID" version="3.0">

	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>
</web-app>

1.2.2 jsonDemo2

122ddf0467ec700574054f5137b3b473.png

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>com.bjsxt</groupId>
		<artifactId>jsonp-parent</artifactId>
		<version>0.0.1-SNAPSHOT</version>
	</parent>
	<groupId>com.bjsxt</groupId>
	<artifactId>jsonDemo2</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	
	<dependencies>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
		</dependency>
		<!-- JSP相关 -->
		<dependency>
			<groupId>jstl</groupId>
			<artifactId>jstl</artifactId>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jsp-api</artifactId>
			<scope>provided</scope>
		</dependency>
		<!-- Jackson Json处理工具包 -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<!-- 配置Tomcat插件 -->
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<configuration>
					<path>/</path>
					<port>9090</port>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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>Insert title here</title>
<script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
  $(function() {
	$("#but").click(function() {
		$.get("/user/findUser",function(data){
			alert(data);
			var str="";
			for (var i = 0; i < data.length; i++) {
				str+= data[i].userid+" "+data[i].username+" "+data[i].userage+" ";
			}
			$("#show").html(str);
		})
	})
})
</script>
</head>
<body>
     <span id="show"></span>
     <input type="button" value="ok" id="but">
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	id="WebApp_ID" version="3.0">

	<!-- 配置springmvc -->
	<servlet>
		<servlet-name>springmvc</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:spring/springmvc.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>springmvc</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>

	<filter>
		<filter-name>encoding</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>utf-8</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>encoding</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>


	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>
</web-app>

springmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
      <!-- 包的扫描器主要是扫描@controller -->
      <context:component-scan base-package="com.bjsxt.web.controller"/>  

	   <!-- 注册两个新对象 主要是为了来处理springmvc中的其他anntation 如：@requestmapping -->	
	   <mvc:annotation-driven/>
	   
	   <!-- 视图解析器 -->
	   <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/jsp/" /><!-- jsp所在的前缀 -->
		<property name="suffix" value=".jsp" />
    </bean>
    <!-- 配置静态资源映射 -->
    <mvc:resources location="/WEB-INF/css/" mapping="/css/**"/>
	<mvc:resources location="/WEB-INF/js/" mapping="/js/**"/>
</beans>

PageController.java

package com.bjsxt.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class PageController {

	@RequestMapping("/{page}")
	public String showPage(@PathVariable String page) {

		return page;

	}
}

UserController.java

package com.bjsxt.web.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.http.converter.json.MappingJacksonValue;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.bjsxt.commons.JsonUtils;
import com.bjsxt.pojo.Users;

@Controller
@RequestMapping("/user")
public class UserController {

	@RequestMapping("/findUser")
	@ResponseBody
	public Object findUser(String callback) {
		Users user1=new Users(01,"tom",18);
		Users user2=new Users(02,"king",16);
		Users user3=new Users(03,"qiqi",19);
		List<Users> list=new ArrayList<>();
		list.add(user1);
		list.add(user2);
		list.add(user3);
		//String json=JsonUtils.objectToJson(list);
		//return callback+"("+json+")";
		//json转换
		MappingJacksonValue mv = new MappingJacksonValue(list);
		mv.setJsonpFunction(callback);
		return mv;
	}
	
}

Users.java 

package com.bjsxt.pojo;

public class Users {
     private int userid;
     private String username;
     private int userage;
     
	public Users() {
		super();
	}
	public Users(int userid, String username, int userage) {
		super();
		this.userid = userid;
		this.username = username;
		this.userage = userage;
	}
	public int getUserid() {
		return userid;
	}
	public void setUserid(int userid) {
		this.userid = userid;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public int getUserage() {
		return userage;
	}
	public void setUserage(int userage) {
		this.userage = userage;
	}
     
     
}

JsonUtils

package com.bjsxt.commons;

import java.util.List;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * JSON转换工具类
 */
public class JsonUtils {

    // 定义jackson对象
    private static final ObjectMapper MAPPER = new ObjectMapper();

    /**
     * 将对象转换成json字符串。
     * <p>Title: pojoToJson</p>
     * <p>Description: </p>
     * @param data
     * @return
     */
    public static String objectToJson(Object data) {
    	try {
			String string = MAPPER.writeValueAsString(data);
			return string;
		} catch (JsonProcessingException e) {
			e.printStackTrace();
		}
    	return null;
    }
    
    /**
     * 将json结果集转化为对象
     * 
     * @param jsonData json数据
     * @param clazz 对象中的object类型
     * @return
     */
    public static <T> T jsonToPojo(String jsonData, Class<T> beanType) {
        try {
            T t = MAPPER.readValue(jsonData, beanType);
            return t;
        } catch (Exception e) {
        	e.printStackTrace();
        }
        return null;
    }
    
    /**
     * 将json数据转换成pojo对象list
     * <p>Title: jsonToList</p>
     * <p>Description: </p>
     * @param jsonData
     * @param beanType
     * @return
     */
    public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) {
    	JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);
    	try {
    		List<T> list = MAPPER.readValue(jsonData, javaType);
    		return list;
		} catch (Exception e) {
			e.printStackTrace();
		}
    	
    	return null;
    }
    
}

2 使用 JsonP 解决跨域

2.1 Ajax 跨域请求时会出现异常

78fe2a2125a7066ccaa0cca1ff1c280a.png
卓相
关注
ajax提交不能进入后台_Ajax跨域问题
weixin_29672981的博客
01-13 720
今天写表单提交时候遇到个问题, 每次提交都提示是跨域的问题,捣鼓了半天,发现少了个属性后台的跨域设置:前台form表单提交:解决方式: 在表单提交时候加2个属性访问正常解决跨域请求问题,首先了解什么是跨域跨域请求用于什么环境?解决方式?跨域指浏览器不能执行其他网站的脚本,是由于浏览器的同源策略造成的,浏览器施加的安全策略; 同源是网络协议,域名,端口均相同网络协议,域名,端口只要有一个不...
ajax jsonp不触发后台_JSONP
weixin_39732491的博客
12-26 50
什么是JSONP？先说说JSONP是怎么产生的：其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，着用自己的方式来阐释一下这个问题，看看是否有帮助。1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准。2、不过我们又发现，Web页面上调用js文件时则不...
Jsonp跨域问题-callback无法生效
NoPainsNoGainsCSDN的博客
03-21 1639
Jsonp跨域问题-callback无法生效 1 背景    问题：最近在参考网红视频写代码时遇到JS跨域问题，在照着把视频里面的代码复制一把之后竟然跨域问题没解决，callback的方法名无法在json的头部增加。 debug日志显示已经取到数据并且返回的已经调用了CallbackMappingJackson2HttpMessageConverter类，但是debug却不进入重写的writeIn...
跨域无法请求原理和解决方案(一)：JSONP
weixin_43837229的博客
06-03 1333
参考： http://www.ruanyifeng.com/blog/2016/04/cors.html 首先需要了解一下为何跨域会无法请求及原理，这涉及到浏览器的同源策略 同源策略 百度百科：同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对...
jquery ajax jsonp一直网络超时,jQuery ajax（jsonp）忽略超时并且不会触发错误事件
weixin_29011993的博客
08-06 419
jQuery ajax(jsonp)忽略超时并且不会触发错误事件为了添加一些基本的错误处理，我想重写一段使用jQuery的$ .getJSON来从Flickr中提取一些照片的代码。这样做的原因是$ .getJSON不提供错误处理或使用超时。因为$ .getJSON只是$ .ajax的包装，所以我决定改写这个东西并惊喜，它完美无缺。现在开始有趣了。当我故意导致404(通过更改URL)或导致网络超时(...
ajax jsonp跨域访问,jquery ajax怎么使用jsonp跨域访问
weixin_33099015的博客
08-05 351
在项目中使用接口的比较多，在客户端跨域访问，jquery中只能使用jquery ajax的jsonp方法。值得注意的是，jQuery.ajax()只支持get方式的跨域，post的方式是不支持的。//简写形式$.getJSON("http://www.shuchengxian.com/index.php?callback=?",function(data){$("#show").text(dat...
ajax 和 jsonp
饮冰十年的博客
10-19 545
ajax和jsonp的区别： 相同点：都是请求一个url 不同点：ajax的核心是通过xmlHttpRequest获取内容 jsonp的核心则是动态添加标签来调用服务器 提供的js脚本。 ajax执行流程？ 1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象 2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息 3. 设置响应HTT
ajax jsonp async,Ajax请求中的async:false/true
weixin_35720618的博客
08-05 434
Ajax请求中的async:false/trueasync. 默认是 true，即为异步方式，$.ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法，这时候执行的是两个线程。async 设置为 false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。上网查阅了一些资料，发现Jqu...
Ajax：ajax实现跨域解决方案jsonp
dengfengling999的博客
07-23 1410
才发送请求，然后执行servlet，servlet给它响应一段js代码回去，它接收到js代码解释并执行，显示效果，它并没有达到局部刷新的效果，我们让它达到局部刷新的效果，我们点击某一个按钮，我们让它局部刷新，显然上面让页面打开的时候加载script标签就不行了，我们可以让他先加载完，点击页面某一个按钮去加载script标签，来达到页面的局部刷新，整个过程跟ajax没有关系。当out.print("sayHello({\"name\"\"jackson\"})")重新刷新页面响应成功。......
详解Java Ajax jsonp 跨域请求
10-19
在AJAX中，当需要进行跨域请求时，可以通过设置`dataType`为`jsonp`来触发JSONP机制。如示例代码所示： ```javascript $.ajax({ url: 'http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10', type: 'GET...
jquery ajax中使用jsonp的限制解决方法
12-01
jsonp 解决的是跨域 ajax 调用...今天，发现 jsonp 的另外一个限制（在jquery ajax的场景下） —— 不会触发 $.ajax 的error callback，示例代码如下： 代码如下:$.ajax({ dataType: ‘jsonp’, error: function (xh
Jquery-Ajax.rar_ajax_jq-ajax_neededhu5_travelgeq
09-21
jQuery提供了一些全局Ajax事件，可以在任何Ajax请求发生时触发，如`ajaxStart`、`ajaxSend`、`ajaxSuccess`、`ajaxError`等。这些事件可以用于统一处理所有Ajax请求的状态。 ### 7. JSONP (JSON with Padding) 当...
ajax jsonp返回html,在JSONP中使用.ajax()的基本示例？
weixin_33583401的博客
06-16 209
JSONP真的是一个简单的技巧来克服XMLHttpRequest相同的域策略。(如你所知，一个人不能发送Ajax(XMLHttpRequest))请求到另一个域。)所以-而不是用XMLHttpRequest我们得用剧本HTML标记，通常用于加载JS文件，以便JS从另一个域获取数据。听起来很奇怪？事情是-原来剧本标记可以类似于XMLHttpRequest！看看这个：script=document...
✿✿✿JavaScript --- Ajax异步请求与JSONP 跨域请求
naoguoteng的博客
01-08 828
一、原生的Ajax请求1.异步和同步2.Ajax介绍(1)原生的JS实现方式（了解）(2)原生AJax发送Post请求，并携带请求参数 二、JQuery封装后的Ajax1.JQeury实现方式三、JSONP 跨域请求1.什么是跨域？2.JQuery 封装过后的JSONP请求四、CORS 跨域，获取不到数据的原因。五、Java中JSON字符串和Java对象的互相转换2.Java对象转换JSON3. JSON转为Java对象
智慧建造总体策划方案（76页）.pptx
11-02
智慧建造总体策划方案（76页）
基于 Python2.7 和 PyQT4 开发的 modbus 通信采集软件
11-02
基于 Python2.7 和 PyQT4 开发的 modbus 通信采集软件，已在 windows、deepin linux 和树莓派上测试！
LLC simulink仿真《slx模型文件》
11-02
LLC simulink仿真《slx模型文件》 LLC谐振转换器是一种高效的直流-直流(DC-DC)电源转换器，因其独特的谐振特性而得名。在电力电子领域，LLC仿真对于理解和优化这种转换器的性能至关重要。Simulink是MATLAB环境下的一个强大工具，用于建立和仿真复杂系统，包括电力电子系统。 标题“LLC simulink仿真”指的是使用Simulink进行LLC谐振转换器的建模和仿真。通过Simulink，工程师可以模拟LLC转换器在不同工作条件下的行为，如负载变化、输入电压变动以及控制策略的影响。 **LLC电路的基本原理：** LLC谐振转换器结合了升压（Boost）、降压（Buck）和串联谐振（Series Resonant）三种拓扑结构的特点。它由主开关、副开关、电感、电容和二极管组成。谐振电容和电感形成谐振回路，使得开关器件能在零电压或零电流条件下切换，从而降低开关损耗并提高效率。 **仿真过程：** 在Simulink中，首先需要建立LLC转换器的模型，包括各个元件的参数设定。这包括主开关和副开关的开关频率、谐振电容和电感的值、二极管的反向恢复特性等。然后，设
krb5-devel-1.15.1-55.el7_9.i686.rpm
最新发布
11-02
Centos7 el7.x86_64 官方离线安装包，安装指令为 sudo rpm -ivh krb5-devel-1.15.1-55.el7_9.i686.rpm
深入理解Ajax与jsonp的异步通信与安全策略
本文将全面解析Ajax和JSONP这两种前端技术，它们都用于实现在不刷新整个页面的情况下，与后台进行异步数据通信。Ajax（Asynchronous JavaScript and XML）是一种广泛应用于现代Web开发的重要技术，它通过创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值