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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
canvas绘制的直线动画
Jan 23 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
详解vue父子组件状态同步的最佳方式
Sep 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
对javascript和select部件的结合运用
2006/10/09 PHP
剖析 PHP 中的输出缓冲
2006/12/21 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
js常见表单应用技巧
2008/01/09 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
JQuery球队选择实例
2015/05/18 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
python实现的阳历转阴历(农历)算法
2014/04/25 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
python3操作mysql数据库的方法
2017/06/23 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
汽车装潢店创业计划书范文
2014/02/05 职场文书
中药学专业求职信
2014/05/31 职场文书
研修心得体会
2014/09/04 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
尼克胡哲观后感
2015/06/08 职场文书
婚育证明格式
2015/06/17 职场文书
大学军训口号大全
2015/12/24 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
Python编程编写完善的命令行工具
2021/09/15 Python