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 ...
随机推荐
- windows 8下配置PLSQLDeveloper
Win 8 64位系统上安装64 位Oracle,但是没有64位的PL/SQL,不能连接Oracle数据库,怎么办呢?方法是有的:我们可以通过安装32位的Oracle客户端来实现连接. 工具/原料 P ...
- 局部加权回归、欠拟合、过拟合(Locally Weighted Linear Regression、Underfitting、Overfitting)
欠拟合.过拟合 如下图中三个拟合模型.第一个是一个线性模型,对训练数据拟合不够好,损失函数取值较大.如图中第二个模型,如果我们在线性模型上加一个新特征项,拟合结果就会好一些.图中第三个是一个包含5阶多 ...
- 利用stack结构,将中缀表达式转换为后缀表达式并求值的算法实现
#!/usr/bin/env python # -*- coding: utf-8 -*- # learn <<Problem Solving with Algorithms and Da ...
- 【leetcode】Search Insert Position
题目描述: Given a sorted array and a target value, return the index if the target is found. If not, retu ...
- 第二十八篇:SOUI中自定义控件开发过程
在SOUI中已经提供了大部分常用的控件,但是内置控件不可能满足用户的所有要求,因此一个真实的应用少不得还要做一些自定义控件. 学习一个新东西,最简单的办法就是依葫芦画瓢.事实上在SOUI系统中内置控件 ...
- POJ 1743 Musical Theme 二分+后缀数组
Musical Theme Description A musical melody is represented as a sequence of N (1<=N<=20000)no ...
- Hadoop Linux安装
Hadoop Linux安装 步骤流程 1.硬件准备 2.软件准备(推荐CDH) 3.将Hadoop安装包分发到各个节点下 4.安装JDK 5.修改/etc/hosts配置文件 6.设置SSH免密码登 ...
- PHP 删除目录及目录下文件
<?php function del_dir ($dir,$type=true){ $n=0; if (is_dir($dir)) { if ($dh = opendi ...
- 2016 Multi-University Training Contest 6
5/12 2016 Multi-University Training Contest 6 官方题解 打表找规律/推公式 A A Boring Question(BH) 题意: ,意思就是在[0,n] ...
- Java 根据两个经纬度坐标计算距离
public class Distance{ private static final double EARTH_RADIUS = 6378137; private static double ...