参考地址:http://www.cnblogs.com/sunxucool/p/3433992.html
前台ajax异步请求,经常会遇到跨域请求数据,无返回的情况。何为跨域呢请求,如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容,如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。Ajax的跨域访问问题是现有的Ajax开发人员比较常遇到的问题,一般会用jQuery的jsonp来解决。
jsonp是jQuery 一个专门用来解决跨域问题的类;
比较一下json与jsonp格式的区别:
json格式:
{ "message":"获取成功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"} }
jsonp格式
callback({ "message":"获取成功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"} })
看出来区别了吧,在url中callback传到后台的参数是神马callback就是神马,jsonp比json外面有多了一层,callback()。这样就知道怎么处理它了。于是修改后台代码。
下面我们用一台机器的两个不同的tomcat来模拟跨域请求,开启两个tomcat端口分别为8080和8013。
端口为8080的tomcat作为服务器,器servlet代码如下:
package com.servlet; import java.io.IOException; import java.io.Writer; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.json.JSONObject; public class KuaYuTestServlet extends HttpServlet { public KuaYuTestServlet() { super(); } public void destroy() { super.destroy(); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Writer writer = response.getWriter(); //展示不明白为什么要这么写,但是必须要写 String callback = request.getParameter("callback"); //添加json测试数据 JSONObject json = new JSONObject(); try { json.put("ret", "ret"); json.put("msg", "msg"); json.put("zoneid","zoneid"); } catch (JSONException e) { e.printStackTrace(); } response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); //写数据 writer.write(callback + "(" + json + ")"); } public void init() throws ServletException { } }
端口为8013的tomcat做为客服端,其页面调用代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>跨域测试2</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $.ajax({ url : "http://127.0.0.1:8080/kuaYu2/KuaYuTestServlet", dataType : 'jsonp', processData : false, type : 'get', success : function(data) { alert(data.ret); }, error : function(XMLHttpRequest, textStatus,errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); } }); </script> </head> <body> <input type="text" value=""> </body> </html>
附测试项目,将该项目分别发布到两个服务器上即可。
相关推荐
基于ajax方式的跨域请求jsonp的前后台代码
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题。于是想用代理的方式来解决这个跨域问题。 什么是跨域?简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他...
ajax跨域请求,jsp页面+后台实例。
springboot做前后端分离,ajax跨域请求问题 前后端分离:即将后端服务层与前端展示层分别开发和部署,因而产生两个需要打包发布的项目, 将两个分别部署后,前端再去请求后端就会产生跨域请求的问题。 两种解决方案
一个ajax跨域请求的demo实例,前端采用jquery的ajax,后端采用tomcat集成的HttpServlet的方法接受前端的数据和返回数据
基于jQuery的jsonp ajax跨域请求,
ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, 在很多时候,即使ajax提交、返回都正常 XMLHttpRequest.status=200 (正常响应) XMLHttpRequest.readyState=4 (正常接收) ajax也会提示一个parse...
Jquery跨域访问Web服务的demo源码
利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
该资源为ASP.NET网站开发技术中使用Ajax进行跨域请求时利用JSONP方案解决浏览器同源策略限制的源码,比较简单,仅供参考
ajax跨域请求WebService.asmx,程序非常完美的跑起来了。辛苦了一下午整理出来的。怕的就是以后自己忘记了。
使用juery提交表单,实现ajax跨域请求
通过jquery的ajax处理跨域请求的DEMO,代码比较简单,仅供学习参考。
NULL 博文链接:https://sagewsg.iteye.com/blog/1670992
html通过 ajax jsonp跨域请求接收和传送数据 使用HTML页面与后台跨域交互,获得后台数据或传输数据给后台
ajax跨域请求调用webservice接口+视频教程,上次的不带视频教程,这次带一个视频教程,一个流程下来,想学不会都很难!
ajax跨域请求解决方案。有详细配置方案,轻松解决ajax请求数据是的跨域问题。
怎样实现Ajax 跨域访问的五种方法, 怎样实现Ajax 跨域访问的五种方法
本资源主要介绍了AJAX跨域的解决办法,以及解决方案间的比较