这两天项目中有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(Asynchronous JavaScript and XML)是...同时,我们也讨论了一些进阶主题,如跨域请求的问题及解决方案。掌握这些知识可以帮助开发者构建更加高效且响应迅速的 Web 应用程序。
- **CORS跨域**:AJAX请求遵循同源策略,跨域需要服务器设置CORS头。 - **Ajaxify网站**:通过 PJAX(Push State + AJAX)技术,实现页面导航的平滑过渡。 - **WebSockets**:对于需要双向实时通信的应用,可以考虑...
- CORS(Cross-Origin Resource Sharing)是现代浏览器支持的一种更安全、更灵活的跨域策略,通过设置服务器的特定头部,允许跨域请求。 **6. 异常处理** 在编写Ajax代码时,应考虑网络故障、服务器错误等异常情况...
- **跨域请求**:使用CORS(Cross-Origin Resource Sharing)策略解决跨域问题。 #### 七、AJAX框架与库 - **jQuery**:简化了AJAX的使用过程,提供了一系列便捷的方法(如`$.ajax()`)。 - **AngularJS/Angular**...
6. **跨域问题**:默认情况下,Ajax请求受到同源策略限制,只能向同一源发送。解决跨域问题的方法有JSONP、CORS(跨源资源共享)等。 7. **Ajax与jQuery**:jQuery库简化了Ajax操作,提供了如`$.ajax()`, `$.get()`...
由于同源策略的限制,Ajax无法跨域请求。JSONP是一种解决跨域问题的方法,通过动态创建`<script>`标签引入服务器返回的JavaScript代码,执行回调函数来处理数据。 ### 5. jQuery与Ajax jQuery库简化了Ajax的使用,...
- CORS(Cross-Origin Resource Sharing)是现代浏览器支持的跨域资源共享标准,通过设置服务器头部实现跨域请求。 7. **Ajax应用场景**: - 表单验证:在提交前验证用户输入,实时显示错误信息。 - 动态加载:...
跨域请求需要服务器设置CORS(跨源资源共享)头,或者使用JSONP(JSON with Padding)技术。 通过学习黑马程序员的Ajax笔记,你可以深入了解Ajax的工作机制,掌握其在实际项目中的应用,从而提升网页的交互性和用户...
6. **跨域请求 (CORS)**: 由于同源策略的限制,JavaScript 默认不能对不同源的资源发起请求。AJAX 请求需要服务器设置 CORS 头部,允许跨域访问。 7. **AJAX 库和框架**: 虽然原生的 XMLHttpRequest 可以使用,但...
3. **跨域请求限制**:由于同源策略,直接使用`XMLHttpRequest`进行跨域请求会受限。解决方法包括CORS(跨源资源共享)或JSONP等技术。 #### JQuery与Ajax JQuery库简化了Ajax操作,提供了更简洁的语法和错误处理...
当Ajax请求的源与目标服务器不同,需要开启CORS来允许跨域请求。服务器端需要设置适当的响应头,客户端也需要相应的处理。 ### 8. JSONP(JSON with Padding) 对于不支持CORS的旧浏览器,可以通过JSONP实现跨域...
- **跨域问题**:Ajax请求受到同源策略限制,需要通过CORS(跨源资源共享)或JSONP等机制解决。 - **兼容性**:不同浏览器对Ajax的支持程度不同,需要确保代码具有良好的兼容性。 - **用户体验**:使用Ajax时,应...
跨域请求需要服务器配合设置 CORS 头。 2. **缓存问题**:默认情况下,Ajax GET 请求会被浏览器缓存,可能导致获取到旧数据。可设置请求头 `Cache-Control` 或 `If-Modified-Since` 来控制缓存。 3. **兼容性问题**...
- **跨域请求**:理解CORS(跨源资源共享)机制,以及如何配置服务器允许跨域请求。 通过学习这些材料,你将能够掌握Ajax的基本原理和实际应用,进一步提升你的Web开发技能。同时,结合PHP的学习,你可以更好地...
5. **跨域问题**:探讨Ajax遇到的跨域限制,以及解决方案,如CORS(Cross-Origin Resource Sharing)和JSONP(JSON with Padding)。 6. **Ajax库和框架**:可能介绍jQuery、axios、fetch等库或API的使用,以及它们...
4. **jQuery的$.ajax()和$.getJSON()**:jQuery提供了一套方便的API来处理Ajax请求,其中包括跨域请求。通过设置`jsonp`参数,jQuery的`$.ajax()`和`$.getJSON()`方法可以自动处理JSONP请求。对于CORS,只需设置`...
6. **跨域问题**:在实际应用中,如果前端和后端不在同一个域下,可能会遇到跨域问题。可以通过CORS(跨源资源共享)或者JSONP等方式解决。 7. **响应式设计**:考虑到不同设备的屏幕大小和浏览器兼容性,开发时应...
为了实现Ajax跨域,可以使用JSONP(JSON with Padding)或者CORS(Cross-Origin Resource Sharing)机制。 8. **兼容性**:虽然现代浏览器对Ajax支持良好,但在旧版浏览器中可能存在问题。为确保兼容性,可以使用...
缺点:浏览器兼容性问题,不支持跨域,可能导致页面状态混乱。 **七、jQuery与Ajax** jQuery是一个广泛使用的JavaScript库,简化了Ajax操作。例如,使用jQuery的$.ajax()函数,可以更简洁地发起Ajax请求: ```...
1. **安全问题**:由于跨域限制,Ajax请求只能在同源策略允许的范围内进行。 2. **浏览器兼容性**:虽然大多数现代浏览器支持Ajax,但早期版本或非主流浏览器可能存在问题。 3. **SEO挑战**:搜索引擎爬虫可能无法...