`
seven.kyo
  • 浏览: 20021 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

AJAX跨域请求问题 ---- 工作笔记

阅读更多

这两天项目中有AJAX跨域请求的需求,于是查找相关资料,多数说是通过JSONP来实现,JSONP是什么?问问谷哥!

我的环境是 Jquery + Struts2

$.getJSON("http://somewebsite?keyword="+word+"&callback=?",
   //回调函数 
   function(json) {handleResponse(parent, json);})

//@param  keyword   想Action传的所要用的参数.              

   callback     回调函数参数, 后面可以是"?", 当是"?"时,参数值由Jquery自动生成; 也可指定为某回调函数名
 

 

Struts2  Action中的代码:

 

 

public String method(){
//获取回调函数的函数名
String callback = ServletActionContext.getRequest().getParameter("callback");
if(keyword!=null &&!keyword.equals(""))
{
     //通过传过来的keyword参数,检索数据库  返回List
     keys = keyService.getKeyWords(keyword);
     //将List转换为JSON数组形式
     JSONArray kes = JSONArray.fromObject(keys);
		    try {
     //解决中文乱码问题
				HttpServletResponse response= ServletActionContext.getResponse();
				response.setContentType("text/html;charset=utf-8"); 
				response.setHeader("Cache-Control", "no-cache");
     //输出格式需为callback(即获取到的回调函数名)+(传回页面的内容)
		    	response.getWriter().print(callback +"("+ kes.toString()+")");
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		return null;
	}

    具体的原理去网上搜索一下看看!  刚刚测试通过 , 可实现!  

 

    进阶资料:https://www.ibm.com/developerworks/cn/web/wa-aj-jsonp2/

                 https://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/

    Ps: 好神奇!

分享到:
评论

相关推荐

    ajax学习笔记

    ### AJAX学习笔记 #### 一、引言 Ajax(Asynchronous JavaScript and XML)是...同时,我们也讨论了一些进阶主题,如跨域请求的问题及解决方案。掌握这些知识可以帮助开发者构建更加高效且响应迅速的 Web 应用程序。

    AJAX笔记

    - **CORS跨域**:AJAX请求遵循同源策略,跨域需要服务器设置CORS头。 - **Ajaxify网站**:通过 PJAX(Push State + AJAX)技术,实现页面导航的平滑过渡。 - **WebSockets**:对于需要双向实时通信的应用,可以考虑...

    Ajax从入门到精通(含学习笔记)

    - CORS(Cross-Origin Resource Sharing)是现代浏览器支持的一种更安全、更灵活的跨域策略,通过设置服务器的特定头部,允许跨域请求。 **6. 异常处理** 在编写Ajax代码时,应考虑网络故障、服务器错误等异常情况...

    ajax从入门到精通视频

    - **跨域请求**:使用CORS(Cross-Origin Resource Sharing)策略解决跨域问题。 #### 七、AJAX框架与库 - **jQuery**:简化了AJAX的使用过程,提供了一系列便捷的方法(如`$.ajax()`)。 - **AngularJS/Angular**...

    Ajax 学习笔记,超详细的噢!不看后悔

    6. **跨域问题**:默认情况下,Ajax请求受到同源策略限制,只能向同一源发送。解决跨域问题的方法有JSONP、CORS(跨源资源共享)等。 7. **Ajax与jQuery**:jQuery库简化了Ajax操作,提供了如`$.ajax()`, `$.get()`...

    ajax课堂笔记

    由于同源策略的限制,Ajax无法跨域请求。JSONP是一种解决跨域问题的方法,通过动态创建`<script>`标签引入服务器返回的JavaScript代码,执行回调函数来处理数据。 ### 5. jQuery与Ajax jQuery库简化了Ajax的使用,...

    读书笔记: JavaWeb从入门到精通 第13章: Ajax 技术

    - CORS(Cross-Origin Resource Sharing)是现代浏览器支持的跨域资源共享标准,通过设置服务器头部实现跨域请求。 7. **Ajax应用场景**: - 表单验证:在提交前验证用户输入,实时显示错误信息。 - 动态加载:...

    黑马程序员Ajax笔记

    跨域请求需要服务器设置CORS(跨源资源共享)头,或者使用JSONP(JSON with Padding)技术。 通过学习黑马程序员的Ajax笔记,你可以深入了解Ajax的工作机制,掌握其在实际项目中的应用,从而提升网页的交互性和用户...

    python1903笔记 09-Ajax.zip

    6. **跨域请求 (CORS)**: 由于同源策略的限制,JavaScript 默认不能对不同源的资源发起请求。AJAX 请求需要服务器设置 CORS 头部,允许跨域访问。 7. **AJAX 库和框架**: 虽然原生的 XMLHttpRequest 可以使用,但...

    Ajax,JQuery达内培训笔记

    3. **跨域请求限制**:由于同源策略,直接使用`XMLHttpRequest`进行跨域请求会受限。解决方法包括CORS(跨源资源共享)或JSONP等技术。 #### JQuery与Ajax JQuery库简化了Ajax操作,提供了更简洁的语法和错误处理...

    韩顺平 ajax 课堂笔记

    当Ajax请求的源与目标服务器不同,需要开启CORS来允许跨域请求。服务器端需要设置适当的响应头,客户端也需要相应的处理。 ### 8. JSONP(JSON with Padding) 对于不支持CORS的旧浏览器,可以通过JSONP实现跨域...

    ajax学习笔记资料

    - **跨域问题**:Ajax请求受到同源策略限制,需要通过CORS(跨源资源共享)或JSONP等机制解决。 - **兼容性**:不同浏览器对Ajax的支持程度不同,需要确保代码具有良好的兼容性。 - **用户体验**:使用Ajax时,应...

    ajax源码笔记

    跨域请求需要服务器配合设置 CORS 头。 2. **缓存问题**:默认情况下,Ajax GET 请求会被浏览器缓存,可能导致获取到旧数据。可设置请求头 `Cache-Control` 或 `If-Modified-Since` 来控制缓存。 3. **兼容性问题**...

    ajax学习参考文件

    - **跨域请求**:理解CORS(跨源资源共享)机制,以及如何配置服务器允许跨域请求。 通过学习这些材料,你将能够掌握Ajax的基本原理和实际应用,进一步提升你的Web开发技能。同时,结合PHP的学习,你可以更好地...

    ajax笔记+源代码.7z

    5. **跨域问题**:探讨Ajax遇到的跨域限制,以及解决方案,如CORS(Cross-Origin Resource Sharing)和JSONP(JSON with Padding)。 6. **Ajax库和框架**:可能介绍jQuery、axios、fetch等库或API的使用,以及它们...

    javascript/jquery 跨域访问

    4. **jQuery的$.ajax()和$.getJSON()**:jQuery提供了一套方便的API来处理Ajax请求,其中包括跨域请求。通过设置`jsonp`参数,jQuery的`$.ajax()`和`$.getJSON()`方法可以自动处理JSONP请求。对于CORS,只需设置`...

    记录-笔记-html-异步读取省份和二级城市

    6. **跨域问题**:在实际应用中,如果前端和后端不在同一个域下,可能会遇到跨域问题。可以通过CORS(跨源资源共享)或者JSONP等方式解决。 7. **响应式设计**:考虑到不同设备的屏幕大小和浏览器兼容性,开发时应...

    Ajax学习笔记.zip

    为了实现Ajax跨域,可以使用JSONP(JSON with Padding)或者CORS(Cross-Origin Resource Sharing)机制。 8. **兼容性**:虽然现代浏览器对Ajax支持良好,但在旧版浏览器中可能存在问题。为确保兼容性,可以使用...

    ajax-day01.rar_达内开发学习笔记

    缺点:浏览器兼容性问题,不支持跨域,可能导致页面状态混乱。 **七、jQuery与Ajax** jQuery是一个广泛使用的JavaScript库,简化了Ajax操作。例如,使用jQuery的$.ajax()函数,可以更简洁地发起Ajax请求: ```...

    经典ajax学习笔记

    1. **安全问题**:由于跨域限制,Ajax请求只能在同源策略允许的范围内进行。 2. **浏览器兼容性**:虽然大多数现代浏览器支持Ajax,但早期版本或非主流浏览器可能存在问题。 3. **SEO挑战**:搜索引擎爬虫可能无法...

Global site tag (gtag.js) - Google Analytics