AJAX的封装(包括跨域问题)

时间:2023-02-24 14:44:32

注意:

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的封装(包括跨域问题)的更多相关文章

  1. Springboot如何优雅的解决ajax&plus;自定义headers的跨域请求

    1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...

  2. Springboot如何优雅的解决ajax&plus;自定义headers的跨域请求&lbrack;转&rsqb;

    1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...

  3. AJAX的出现与跨域处理

    XMLHttpRequest JSON AJAX CORS 四个名词来开会 如何发请求 在前端的世界里也逛荡了不少日子了,目前已经get到大约5种发起请求的方式,主流的.非主流的. 何种方式 请求方法 ...

  4. Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)

    由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...

  5. 从零开始学 Web 之 Ajax(七)跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. ajax请求json数据跨域问题(转)

    一.后台代理技术 由服务器端向跨域下的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 具体操作如下: 1.在localhost:81/a.html中,向同源下的某个代理程序发出请求 $ ...

  7. jquery ajax怎么使用jsonp跨域访问

    在项目中使用接口的比较多,在客户端跨域访问,jquery中只能使用jquery ajax的jsonp方法. 值得注意的是,jQuery.ajax()只支持get方式的跨域,post的方式是不支持的.& ...

  8. Vue&period;js&mdash&semi;&mdash&semi;基于&dollar;&period;ajax实现数据的跨域增删查改

    概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...

  9. Jquery AJAX ASP&period;NET IIS 跨域 超简单解决办法

    第一种: 在IIS添加如下标头即可 Access-Control-Allow-Headers:Content-Type, api_key, AuthorizationAccess-Control-Al ...

随机推荐

  1. TypeScript开篇:尝点新鲜和甜头

    返回TS学习总目录 快速开始 我们通过创建一个简单的web应用来开始使用TypeScript.获得TS工具的方法主要有两种,一种是通过NPM(Node包管理器),另一种是通过VS2012安装TS的插件 ...

  2. 2014 网选 5011 Game(Nim游戏,数学题)

    /* 题意:Nim游戏! 思路:通过异或,判断将n个数表示成二进制的形式之后,是否对应位的数字1 的个数是偶数! */ #include<iostream> using namespace ...

  3. c&plus;&plus;仿函数 functor

    内容整理自国外C++教材 先考虑一个简单的例子:假设有一个vector<string>,你的任务是统计长度小于5的string的个数,如果使用count_if函数的话,你的代码可能长成这样 ...

  4. 第一篇,java学习之旅

    在java的这座殿堂中,我才刚刚推开了大门,就像是在岔路口找到了一条,走向前进java大门的路. 下面是一些java算法的问题 第一题: package project.model; import j ...

  5. python至winreg模块

    _winreg模块在python3中已经改名了 https://blog.csdn.net/zhangxiaoyang0/article/details/72236305?fps=1&loca ...

  6. String类、常量池、字符串比较

    String类.常量池.字符串比较 一:String类           1.String类又称作不可变字符序列           2.String位于java.lang包中,Java程序默认导入 ...

  7. C&num;读取大数据量Excel

    var worksheet = workbook.Worksheets["工作表1"]; var maxN = worksheet.Range["A1"].En ...

  8. SSM整合pom&period;xml和导包

    SSM 整合-自己写的 SSM Spring +SpringMVC+Mybatis 配置 及pom.xml SSM框架(spring+springMVC+Mybatis) pom.xml文件 mave ...

  9. [Google Maps API 3]Marker从Clusterer中分离及Marker置于Cluster上一层的解决办法

    在Google Maps API的使用中,经常用到Clusterer来避免过密的Marker显示.但仔细看一下Clusterer的设置参数中并没有直接将某些Marker除外的方法,那遇到这样的需求,怎 ...

  10. angular5 directive和component的区别

    指令分为三类,组件,属性指令和结构性指令 组件(Component directive):UI组件,继承于Directive: 属性指令(Attribute directive):改变组件的样式: 结 ...