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 ...
随机推荐
- nginx笔记资料
通配 hash 表 ngx_hash_init 实现注释:http://blog.csdn.net/gsnumen/article/details/7817396 ngx_hash_init之后的结构 ...
- 拉风的服务器监控工具,随时掌握服务器动态,AgileEAS.NET SOA 平台服务器监控工具集介绍
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...
- 整理UWP中网络和设备信息获取的帮助类,需要的拿走。
网络(运营商信息,网络类型) public static class NetworkInfo { /// <summary> /// 网络是否可用 /// </summary> ...
- 弹性布局flex-兼容问题
这里弹性布局的用法就不说了 用过的都知道很方便 虽然现在弹性布局已经实现标准了 但是还是存在一些兼容问题 旧版本 (一些低版本的浏览器) display:-webkit-box; 新版本(目前的标准版 ...
- Java日期处理
日常工作中经常遇到关于日期的处理,下面把自个写好的Java代码段分享一下,也当做自个的一个备份,同时也欢迎交流,如若分享请注明出处,谢谢. 1.返回两个时间段之间的月份: /** * 返回任意两个月份 ...
- Ado.Net事物处理
protected void Button2_Click(object sender, EventArgs e) { SqlConnection con = new SqlCo ...
- 1.0 多控制器管理(附:Demo)
本文并非最终版本,如有更新或更正会第一时间置顶,联系方式详见文末 如果觉得本文内容过长,请前往本人 “简书” 控制器 : 一个iOS的app很少只由一个控制器组成,除非这个app极其简 ...
- css position的使用
css position的使用 css 的 position 属性是用来设置元素的位置的,它还能设置一个元素出现在另一个元素的下层元素能用 top,bottom,left 和 right 属性设置位置 ...
- iOS编程中遇到的问题
1.应用在iPhone6plus 系统iOS9.1安装时没遇到问题,在iPhone4s 系统iOS 7时bulid success 但是安装失败提示 There was an internal API ...
- mysql在线修改表结构大数据表的风险与解决办法归纳
整理这篇文章的缘由: 互联网应用会频繁加功能,修改需求.那么表结构也会经常修改,加字段,加索引.在线直接在生产环境的表中修改表结构,对用户使用网站是有影响. 以前我一直为这个问题头痛.当然那个时候不需 ...