注意:

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+自定义headers的跨域请求

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

  2. Springboot如何优雅的解决ajax+自定义headers的跨域请求[转]

    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学习过程总结(07) - vue的后台服务API封装及跨域问题的解决

    以登录流程为例说明接口的封装. 1.登录调用后台的登录api 登录界面的代码 <template> <div class="login-page"> < ...

  9. Vue.js——基于$.ajax实现数据的跨域增删查改

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

随机推荐

  1. windows 8下配置PLSQLDeveloper

    Win 8 64位系统上安装64 位Oracle,但是没有64位的PL/SQL,不能连接Oracle数据库,怎么办呢?方法是有的:我们可以通过安装32位的Oracle客户端来实现连接. 工具/原料 P ...

  2. 局部加权回归、欠拟合、过拟合(Locally Weighted Linear Regression、Underfitting、Overfitting)

    欠拟合.过拟合 如下图中三个拟合模型.第一个是一个线性模型,对训练数据拟合不够好,损失函数取值较大.如图中第二个模型,如果我们在线性模型上加一个新特征项,拟合结果就会好一些.图中第三个是一个包含5阶多 ...

  3. 利用stack结构,将中缀表达式转换为后缀表达式并求值的算法实现

    #!/usr/bin/env python # -*- coding: utf-8 -*- # learn <<Problem Solving with Algorithms and Da ...

  4. 【leetcode】Search Insert Position

    题目描述: Given a sorted array and a target value, return the index if the target is found. If not, retu ...

  5. 第二十八篇:SOUI中自定义控件开发过程

    在SOUI中已经提供了大部分常用的控件,但是内置控件不可能满足用户的所有要求,因此一个真实的应用少不得还要做一些自定义控件. 学习一个新东西,最简单的办法就是依葫芦画瓢.事实上在SOUI系统中内置控件 ...

  6. POJ 1743 Musical Theme 二分+后缀数组

    Musical Theme   Description A musical melody is represented as a sequence of N (1<=N<=20000)no ...

  7. Hadoop Linux安装

    Hadoop Linux安装 步骤流程 1.硬件准备 2.软件准备(推荐CDH) 3.将Hadoop安装包分发到各个节点下 4.安装JDK 5.修改/etc/hosts配置文件 6.设置SSH免密码登 ...

  8. PHP 删除目录及目录下文件

    <?php function del_dir ($dir,$type=true){    $n=0;    if (is_dir($dir)) {        if ($dh = opendi ...

  9. 2016 Multi-University Training Contest 6

    5/12 2016 Multi-University Training Contest 6 官方题解 打表找规律/推公式 A A Boring Question(BH) 题意: ,意思就是在[0,n] ...

  10. Java 根据两个经纬度坐标计算距离

    public class Distance{ private static final double EARTH_RADIUS = 6378137;    private static double  ...