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 相关文章推荐
使用js判断控件是否获得焦点
Jan 03 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php实现无限级分类
2014/12/24 PHP
PHP运行模式汇总
2016/11/06 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Python调用C语言开发的共享库方法实例
2015/03/18 Python
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
python tkinter窗口最大化的实现
2019/07/15 Python
python requests证书问题解决
2019/09/05 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
外贸英语毕业生自荐信
2013/11/14 职场文书
聘任证明怎么写
2015/03/02 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
公司酒会主持词
2015/07/02 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript