`
bcyy
  • 浏览: 1885600 次
文章分类
社区版块
存档分类
最新评论

分别使用FlyJSONP和JQuery实现跨域的异步请求

 
阅读更多

直接上代码吧,介绍方面的东西都在代码注释里

首先是使用FlyJSONP实现跨域的异步请求

  1. <%@pagelanguage="java"pageEncoding="UTF-8"%>
  2. <scripttype="text/javascript"src=../../"js/flyjsonp.min.js"></script>
  3. <scripttype="text/javascript">
  4. functiongetJFBCustomState(){
  5. FlyJSONP.init({debug:true});//初始化FlyJSONP的实例,参数debug可设置为true或false
  6. FlyJSONP.post({
  7. url:'http://123.125.**.***:8088/ecpaycus/web/getCustomizeByPhoneNo',
  8. parameters:{phoneNo:'18601148104'},
  9. success:function(data){
  10. varcustomState=data.customState;
  11. alert('服务器返回结果为:'+customState);
  12. }
  13. /*
  14. success:function(data){
  15. varcustomState=data.customState;
  16. alert('服务器返回结果为:'+customState);
  17. },
  18. error:function(errorMsg){
  19. alert('22');
  20. console.log(errorMsg);
  21. }
  22. */
  23. });
  24. }
  25. </script>
  26. <spanstyle="color:blue;text-decoration:underline;cursor:pointer;"onclick="getJFBCustomState();">点此完成定制</span>
  27. <%--
  28. ==========================================================================================
  29. FlyJSONP
  30. 主页:http://alotaiba.github.com/FlyJSONP/
  31. 概述:FlyJSONP是一个应用JSONP实现跨域请求的相当轻量级的JavaScript类库
  32. FlyJSONP不依赖于任何JavaScript框架,只需设置一些参数便能够用它实现跨域的POST和GET请求
  33. 补充:本示例在IE9.0.8112.16421和FireFox9.0.1上测试,均通过
  34. 另外,我是在这个网站发现它的-->http://site518.net/javascript-cross-domain-request/
  35. 用法:上面是客户端代码,下面是服务端代码
  36. StringphoneNo=request.getParameter("phoneNo"));
  37. //TODO...
  38. response.setContentType("application/json;charset=UTF-8");
  39. response.getWriter().print("{customState:'hasCustomized'}");
  40. 注意:服务端输出给客户端时,输出的必须是json字符串,否则客户端无法接收
  41. ==========================================================================================
  42. --%>
接下来就是使用JQuery实现跨域的异步请求
  1. <%@pagelanguage="java"pageEncoding="UTF-8"%>
  2. <scripttype="text/javascript"src=../../"js/jquery-1.7.1.min.js"></script>
  3. <scripttype="text/javascript">
  4. $(function(){
  5. $('#validateCustom').click(function(){
  6. $.getJSON('http://123.125.**.***:8088/ecpaycus/web/getCustomizeByPhoneNo?jsoncallback=?&phoneNo=18601148104',
  7. function(json){
  8. varcustomState=json.customState;
  9. alert('服务端返回结果为:'+customState);
  10. }
  11. );
  12. });
  13. });
  14. </script>
  15. <spanstyle="color:blue;text-decoration:underline;cursor:pointer;"id="validateCustom">点此完成定制</span>
  16. <%--
  17. ==========================================================================================
  18. 说明:本示例在IE9.0.8112.16421和FireFox9.0.1上测试,均通过
  19. 用法:上面是客户端代码,下面是服务端代码
  20. StringphoneNo=request.getParameter("phoneNo"));
  21. //TODO...
  22. Stringjsoncallback=request.getParameter("jsoncallback");
  23. StringjsonReturn="{customState:'hasCustomized'}";
  24. response.setContentType("application/json;charset=UTF-8");
  25. response.getWriter().print(jsoncallback+"("+jsonReturn+")");
  26. 注意:服务端输出给客户端时,输出的必须是json字符串,否则客户端无法接收
  27. 且,客户端请求时,必须提供回调函数名,并以参数形式放到请求的URL后面
  28. 服务端输出给客户端时,必须将接收到的回调函数名字放到json字符串的前面
  29. ==========================================================================================
  30. --%>

分享到:
评论

相关推荐

    Jquery跨域Ajax请求测试

    在jQuery中,使用`xhrFields`参数添加`withCredentials`设置为`true`,可以实现携带Cookie的跨域请求。 ```javascript $.ajax({ type: "GET", url: "http://example.com/remote-service", xhrFields: { ...

    Java通过jQuery实现ajax异步请求

    综上所述,"Java通过jQuery实现ajax异步请求"的示例工程涵盖了客户端与服务器端的交互流程,包括使用jQuery发起AJAX请求、Java后端处理请求并返回数据,以及数据格式的转换和错误处理。了解并掌握这些知识点,对于...

    Jquery跨域Json请求处理

    本文主要讨论的是通过JQuery实现跨域请求JSON数据的方式——JSONP。 #### 三、JSONP原理及使用 **JSONP**是一种绕过同源策略的技术,它利用了`&lt;script&gt;`标签不受同源策略限制的特点。当使用JSONP进行跨域请求时,...

    Jquery实现跨域异步上传文件总结

    然而,通过使用jQuery和特定的技术手段,我们可以实现跨域异步上传文件。本文将对这一过程进行总结。 首先,要实现跨域异步上传,我们依赖于jQuery.form插件。这个插件专门用于处理异步表单提交,使得文件上传变得...

    JQuery跨域访问解决方案

    当jQuery使用`dataType: 'jsonp'`时,它实际上是在做以下几件事: 1. **创建动态`&lt;script&gt;`标签**:jQuery会在DOM中创建一个新的`&lt;script&gt;`标签,其`src`属性指向跨域服务器的URL。URL中通常会包含一个回调函数名...

    asp.net jquery 跨域提交请求数据

    总结,ASP.NET与jQuery的跨域提交请求数据涉及到CORS策略的配置和JavaScript的Ajax调用。通过正确设置服务器端的响应头和jQuery的请求参数,可以顺利实现在不同源之间进行数据交互。在实际项目中,应根据需求灵活...

    利用JQuery jsonp实现Ajax跨域请求json数据

    本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...

    表格制作软件中实现ajax跨域异步单点登录的方法

    为了提升用户体验和系统的安全性,实现跨域异步单点登录(SSO)成为一个重要课题。本文将详细介绍在FineReport表格制作软件中,如何通过ajax技术实现跨域异步单点登录的方法。 首先,我们需要了解单点登录的基本...

    jquery ajax跨域html前台 php后台

    jQuery的Ajax功能提供了`$.ajax()`方法,它是处理异步请求的核心。在解决跨域问题时,我们可以利用jQuery的`jsonp`模式。JSONP(JSON with Padding)是一种绕过同源策略的方法,它利用`&lt;script&gt;`标签可以跨域加载...

    jquery跨域调用 js跨域调用

    2. jQuery使用CORS:在`$.ajax()`方法中,设置`dataType: 'json'`或其它类型,并在请求头中设置`crossDomain: true`,jQuery会自动处理CORS请求。 四、jQuery跨域调用示例 ```javascript // JSONP 示例 $.ajax({ ...

    用YQL和Jquery实现的跨域html页面截取

    综上所述,"用YQL和Jquery实现的跨域html页面截取"的解决方案巧妙地结合了YQL的跨域能力和jQuery的JSONP请求功能,实现了在前端获取和处理其他域的HTML内容,这对于数据聚合、分析或者构建Web应用等场景十分有用。...

    jQuery Ajax实现跨域请求

    jQuery中的$.ajax方法是实现异步数据请求的核心,它允许开发者定义多种参数来定制请求行为。在跨域请求中,`dataType`参数设置为'jsonp'是关键,这告诉jQuery我们打算使用JSONP来处理响应。 JSONP是一种绕过同源...

    ajax 跨域请求问题 jquery jsonp

    在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin Policy)限制了Ajax请求只能向同源(协议、域名、端口均相同)的服务器发送。这在需要跨域获取数据时就会遇到问题。为了解决...

    jQuery跨域请求,获取返回值

    这篇博客将探讨如何使用jQuery实现跨域请求以及如何获取返回值。 首先,我们需要理解什么是跨域请求。跨域请求是指一个域下的文档或脚本尝试请求另一个域下的资源,由于安全原因,通常会被浏览器阻止。但为了实现...

    Jquery跨域请求的实现

    **jQuery 跨域请求的实现** 在Web开发中,由于同源策略的限制,JavaScript通常无法直接发起跨域请求,即请求与当前页面不在同一域名下的资源。然而,随着Web应用的发展,有时我们需要从不同源获取数据,例如,从API...

    基于Jquery插件实现跨域异步上传文件功能

    跨域异步上传文件功能的实现是Web开发中常见的需求,特别是在前后端分离的项目中,前端页面和后端服务往往部署在不同的域名下,从而产生跨域问题。JQuery作为流行的JavaScript库,提供了诸多方便的API,尤其在处理...

    JQuery AJAX跨域提交参数、接收json数据.docx

    JQuery 的 AJAX 功能是实现异步数据交互的核心部分,对于跨域提交参数和接收 JSON 数据的需求,JQuery 提供了多种解决方案。 首先,JQuery 的 AJAX 功能可以使用 `$.post()` 方法来发送 POST 请求,该方法可以取代...

    PHP AJAX JSONP实现跨域请求使用范例_ajax如何解决跨域请求

    在实际应用中,我们可以使用 JSONP 来实现跨域请求,以便从其他域名下的服务器获取数据。但是,我们需要注意的是,使用 JSONP 会存在安全风险,因为它可以被恶意攻击所利用。 在使用 JSONP 时,我们需要注意以下几...

Global site tag (gtag.js) - Google Analytics