AJAX的封装(包括跨域问题)
注意:
1.同域下支持get和post方法
2.跨域问题必须得到后台的支持
3.跨域只支持get方法
function AJAX(obj){
//做网络请求的时候,参数以"对象"的形式传递进来
//规定: obj 里面包含属性:
//1.url
//2.type -- get 还是 post
//3.data -- 前端给后端传递的参数(前端传递的时候,以"对象"的形式)
//4.回调函数 -- success
//5.回调函数 -- error
//6.跨域的回调函数 -- callBack
//7.后台接收回调函数的 key 值
if (obj.callBack && obj.key) {
var sc = document.createElement("script");
document.documentElement.appendChild(sc);
sc.src = obj.url + "?"+obj.key+"=callBack";
return;
}
var ajaxObj = null;
if (window.XMLHttpRequest) {
ajaxObj = new XMLHttpRequest();
}else{
ajaxObj = new ActiveObject("Microsoft.XMLHTTP");
}
//检测状态的变化
ajaxObj.onreadystatechange = function(){
if (ajaxObj.readyState == 4) {
if (ajaxObj.status >= 200 && ajaxObj.status < 300 || ajaxObj.status == 304) {
if (obj.success) {
obj.success(JSON.parse(ajaxObj.responseText));
}else{
alert("您忘记了 success 函数");
}
}else{
if (obj.error) {
obj.error(ajaxObj.status);
}else{
alert("您忘记了 error 函数");
}
}
}
}
// type 转化为小写
var type = obj.type || "get";
type = type.toLowerCase();
//判断是否传递了参数
var params = "";
if (obj.data) {
for(var key in obj.data){
params += (key + "=" + obj.data[key] + "&");
}
params = params.slice(0,params.length-1);
}
if (type == "get") {
ajaxObj.open(type,obj.url+"?"+params,true);
ajaxObj.send();
}else{
ajaxObj.open(type,obj.url,true);
ajaxObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajaxObj.send(params);
}
}
AJAX的封装(包括跨域问题)的更多相关文章
- Springboot如何优雅的解决ajax+自定义headers的跨域请求
1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...
- Springboot如何优雅的解决ajax+自定义headers的跨域请求[转]
1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...
- AJAX的出现与跨域处理
XMLHttpRequest JSON AJAX CORS 四个名词来开会 如何发请求 在前端的世界里也逛荡了不少日子了,目前已经get到大约5种发起请求的方式,主流的.非主流的. 何种方式 请求方法 ...
- Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- 从零开始学 Web 之 Ajax(七)跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- ajax请求json数据跨域问题(转)
一.后台代理技术 由服务器端向跨域下的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 具体操作如下: 1.在localhost:81/a.html中,向同源下的某个代理程序发出请求 $ ...
- jquery ajax怎么使用jsonp跨域访问
在项目中使用接口的比较多,在客户端跨域访问,jquery中只能使用jquery ajax的jsonp方法. 值得注意的是,jQuery.ajax()只支持get方式的跨域,post的方式是不支持的.& ...
- vue学习过程总结(07) - vue的后台服务API封装及跨域问题的解决
以登录流程为例说明接口的封装. 1.登录调用后台的登录api 登录界面的代码 <template> <div class="login-page"> < ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
随机推荐
- JS和JQuery的总结
JS部分 一, 词法结构 区分大小 注意://单行 /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...
- Windows下安装Redis
1.首先,Redis官方是支持Linux系统的,我这里不多说,需要的可以参考:http://www.oschina.net/question/12_18065/ 2.Windows 64位下载地址:h ...
- Sublime3学习笔记
学习笔记: 学习内容:sublime 3 学习时间:2015-10-20 预计学习时长:1 hour/3 day 学习工具&资料: 官网:http://www.sublimetext.com/ ...
- oracle的回收站介绍
昨天做的展示oracle表空间功能剩余空间的功能,发现查询表dba_free_space时特别慢,经网上搜索,说是由于表空间碎片和回收站(Oracle 10g以后才有)引起的,后来搜到一片介绍回收站的 ...
- 神经网络及其PID控制
一.人工神经元模型 1.突触权值(连接权) 每一个突触都由其权值作为特征表征,各个神经元之间的连接强度由突触权值来表示.与神经元相连的突触上,连接的输入信号通过权值的加权进入神经元的求和单元. 2.求 ...
- sqlmap和burpsuite绕过csrf token进行SQL注入检测
利用sqlmap和burpsuite绕过csrf token进行SQL注入 转载请注明来源:http://www.cnblogs.com/phoenix--/archive/2013/04/12/30 ...
- ajax 传递JSON对象参数
https://msdn.microsoft.com/zh-cn/library/cc836466(v=vs.94).aspx https://msdn.microsoft.com/zh-cn/lib ...
- Spring Bean后处理器以及容器后处理器【转】
Bean后处理器:即当spring容器实例化Bean实例之后进行的增强处理. 容器后处理器:对容器本身进行处理,并总是在容器实例化其他任何Bean之前读取配置文件的元数据并可能修改这些数据. 一.Be ...
- iOS--异步下载
#import "ViewController.h"#import "UIImageView+WebCache.h"@interface ViewControl ...
- C#基础:委托
委托是C#中最为常见的内容.与类.枚举.结构.接口一样,委托也是一种类型.类是对象的抽象,而委托则可以看成是函数的抽象.一个委托代表了具有相同参数列表和返回值的所有函数.比如: delegate in ...