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

来源:互联网 发布:vue2.0源码分析 编辑:程序博客网 时间:2024/06/08 03:25

完整版见https://jadyer.github.io/2012/03/09/cross-domain-ajax-request/



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


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

<%@ page language="java" pageEncoding="UTF-8"%><script type="text/javascript" src="js/flyjsonp.min.js"></script><script type="text/javascript">function getJFBCustomState(){FlyJSONP.init({debug: true}); //初始化FlyJSONP的实例,参数debug可设置为true或falseFlyJSONP.post({url: 'http://123.125.**.***:8088/ecpaycus/web/getCustomizeByPhoneNo',parameters: {phoneNo:'18601148104'},success: function(data){var customState = data.customState;alert('服务器返回结果为:' + customState);}/*success: function(data){var customState = data.customState;alert('服务器返回结果为:' + customState);},error: function(errorMsg){alert('22');console.log(errorMsg);}*/});}</script><span style="color:blue; text-decoration:underline; cursor:pointer;" onclick="getJFBCustomState();">点此完成定制</span><%--==========================================================================================FlyJSONP主页:http://alotaiba.github.com/FlyJSONP/概述:FlyJSONP是一个应用JSONP实现跨域请求的相当轻量级的JavaScript类库     FlyJSONP不依赖于任何JavaScript框架,只需设置一些参数便能够用它实现跨域的POST和GET请求补充:本示例在IE9.0.8112.16421和FireFox9.0.1上测试,均通过      另外,我是在这个网站发现它的-->http://site518.net/javascript-cross-domain-request/用法:上面是客户端代码,下面是服务端代码     String phoneNo = request.getParameter("phoneNo"));     //TODO ...     response.setContentType("application/json; charset=UTF-8");     response.getWriter().print("{customState: 'hasCustomized'}");注意:服务端输出给客户端时,输出的必须是json字符串,否则客户端无法接收==========================================================================================--%>

接下来就是使用JQuery实现跨域的异步请求

<%@ page language="java" pageEncoding="UTF-8"%><script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script type="text/javascript">$(function(){$('#validateCustom').click(function(){$.getJSON('http://123.125.**.***:8088/ecpaycus/web/getCustomizeByPhoneNo?jsoncallback=?&phoneNo=18601148104',function(json){var customState = json.customState;alert('服务端返回结果为:' + customState);});});});</script><span style="color:blue; text-decoration:underline; cursor:pointer;" id="validateCustom">点此完成定制</span><%--==========================================================================================说明:本示例在IE9.0.8112.16421和FireFox9.0.1上测试,均通过用法:上面是客户端代码,下面是服务端代码     String phoneNo = request.getParameter("phoneNo"));     //TODO ...     String jsoncallback = request.getParameter("jsoncallback");     String jsonReturn = "{customState: 'hasCustomized'}";     response.setContentType("application/json; charset=UTF-8");     response.getWriter().print(jsoncallback + "(" + jsonReturn + ")");注意:服务端输出给客户端时,输出的必须是json字符串,否则客户端无法接收      且,客户端请求时,必须提供回调函数名,并以参数形式放到请求的URL后面      服务端输出给客户端时,必须将接收到的回调函数名字放到json字符串的前面==========================================================================================--%>