Ajax跨域实现代码(后台jsp)


Posted in Javascript onJanuary 21, 2017

AJAX 教程

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

在应用时主要是创建XMLHttpRequest对象,调用指定服务地址。

但是IE中各个版本支持的不太一样,所以在创建次对象时可能要特殊处理下。

一般如下:

function createXMLHttpRequest(){
 var xmlhttp;
 try{
  xmlhttp = new XMLHttpRequest();//ie7及以上,其他浏览器
 }catch(e){
  try{
   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");//ie6
  }catch(e){
   try{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//ie6以下
   }catch(e){
    throw "创建AJAX对象失败!";
   }
  }
 }
 return xmlhttp;
 }


 var xmlhttp = createXMLHttpRequest();
  xmlhttp.open("GET","http://localhost:8080/SimpleBlog/AjaxTest",true);
  xmlhttp.send(null);
  xmlhttp.onreadystatechange = function(result){
  if(xmlhttp.readyState==4 && xmlhttp.status == 200){
   alter(result.test);
  }
 };

但是浏览器再执行javascript代码时,有个著名的同源策略,这使得跨域请求就不是那么方便了。

那一般都是用什么方式支持跨域呢?

1、通过中间代理服务器,获取要跨域请求的数据。

2、通过iframe内嵌带请求域的页面,来解决跨域访问问题。

3、通过jsonp方式。

4、不过现在已经提出了XMLHttpRequest Level2(XHR2)允许跨域请求,不过要在server的返回头中显示声明允许跨域请求(浏览器的支持情况:http://caniuse.com/#feat=xhr2)。

下面简单说下jsonp与xtr2。

jsonp:

jsonp简单的说就是利用<script>标签来实现跨域请求的调用,因为浏览器中脚本的加载是不受同源策略影响的。

function get() {
  var url = 'http://localhost:8080/SimpleBlog/AjaxTest?callback=callback';
  var script = document.createElement('script'); 
  script.setAttribute("type","text/javascript"); 
  script.src = url; 
  document.body.appendChild(script); 
 }
 
 function callback(va){
  alert(va.test);
 }

服务端(java):

boolean jsonP = false;
 String cb = this.request.getParameter("callback");
 if (cb != null) {
 jsonP = true;
 response.setContentType("text/javascript");
 } else {
  response.setContentType("application/x-json");
 }
 PrintWriter out = response.getWriter();
 if (jsonP) {
  try {
   out.println(cb + "({\"test\":\"1\"})");
   out.flush();
   out.close();
  } catch (Exception e) {
   throw e;
  }
 }

这样就可以实现跨域调用了。

而我们经常用的jquery已经实现了此类方式的封装,使用起来更简单。

$(document).ready(function (){
  $('#jqueryajax').bind('click', function(){
  $.ajax({
   type: 'get',
   async: false,
   url: 'http://localhost:8080/SimpleBlog/AjaxTest1',
   dataType: 'jsonp',
   jsonp: 'callback',
   success: function(json){
    alert(json.result);
   },
   error: function(){
    alert('fail');
   }
  });
  });
 });

服务端(java):
我用了struts是这样写的:

public class AjaxTest1 extends ActionSupport {

 private String result;
 public String getResult() {
  return result;
 }
 
 public String execute() {
 
  this.result = "1";
  return "jqueryajax";
 }
}

配置文件:

<action name="AjaxTest1" class="AjaxTest1">
 <result name="jqueryajax" type="json">
  <param name="callbackParameter">callback</param>
 </result>
 </action>

下面说说xtr2:

这个就更简单了,直接创建调用即可。

function createCORSRequest(method,url){
  var xhr=new XMLHttpRequest();
  if('withCredentials' in xhr){
  xhr.open(method,url,true);
  }else if(typeof XDomainRequest!='undefined'){
   xhr=new XDomainRequest(); 
   xhr.open(method,url);
  }else{
   xhr=null;
  }
  return xhr;
 }
 
 function xhr2(){
  var request=createCORSRequest('GET','http://localhost:8080/SimpleBlog/AjaxTest1');
  if(request){
  request.onload=function(){
   alert(request.responseText);
  }
  request.onerror=function(e){
   alert('error');
  }
  request.send();
  } 
 }

服务端:其实只要在返回response中设置
httpResponse.addHeader("Access-Control-Allow-Origin", "*");
即可。

Javascript 相关文章推荐
xtree.js 代码
Mar 13 Javascript
JS的反射问题
Apr 07 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 #Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 #Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 #Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 #Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 #Javascript
Mongoose学习全面理解(推荐)
Jan 21 #Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 #Javascript
You might like
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
jquery 选择器部分整理
2009/10/28 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
python操作gmail实例
2015/01/14 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
2014年团委工作总结
2014/11/13 职场文书
毕业生政审意见范文
2015/06/04 职场文书
婚宴新娘致辞
2015/07/28 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis