原生js 的ajax封装
/**
* 封装ajax函数(包括跨域)
* @method ajax
* @param option :{type:"post" or "get" 请求方式,url:"url" 请求地址,data:object 请求参数,async:"true" 异步or“false”同步,success:function 请求成功回调函数,error:function,请求失败函数,jsonp:"true" 表示跨域 “false”:表示不跨域;callback:function 跨域请求函数名}
* @return {}
*
*/
function ajax(option) {
"use strict";
//检测传入参数是否是一个对象
if ({}.__proto__.toString.call(option) !== "[object Object]") {
alert("参数格式错误!!");
return;
} var data = option.data || "";
var async = option.async || "true";//默认是异步
var jsonp = option.jsonp || "false"//默认是不跨域http
var params=[];
var postData;
var getHttpRequest = function () {
if (window.XMLHttpRequest) {
//主流浏览器提供了XMLHttpRequest对象
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
} }; if(data!==""){
for (var key in data) {
params.push(key + '=' + data[key]);
}
}
postData= params.join('&');
if (jsonp !== "true") {//不是跨域
var httpRequest = getHttpRequest();
if (option.type.toUpperCase() === 'POST') {
httpRequest.open(option.type, option.url, async);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
httpRequest.send(postData); }
else if (option.type.toUpperCase() === 'GET') {
httpRequest.open(option.type, option.url + '?' + postData, async);
httpRequest.send(null);
}
httpRequest.onreadystatechange=function(){
if(httpRequest.readyState==="4"&&httpRequest.state==="200"){
option.success(httpRequest.responseTest); }else{
option.error(httpRequest.responseTest);
} }
} else { //跨域
var responseContainer;
var overwritten;
var doc=document.body;
var _script=document.createElement("script");
_script.setAttribute("type","text/javascript");
_script.src=option.url+"?"+postData+"&callback="+option.callback;
doc.appendChild(_script);
overwritten=window[option.callback];
window[option.callback]=function(){
responseContainer= arguments; }
option.success(responseContainer[0]);
responseContainer = overwritten = undefined; }}
原生js 的ajax封装的更多相关文章
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- 原生js实现ajax封装
一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...
- 原生js中用Ajax进行get传参
原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 原生js写Ajax
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- 用原生JS实现AJAX和JSONP
前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生 ...
- 原生js实现Ajax
一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
随机推荐
- iOS开发的10个奇袭
1.关于关键字volatile 一个定义为volatile的变量是说这变量可能会被意想不到地改变,这样,编译器就不会去假设这个变量的值了.精确地说就是,优化器在用到这个变量时必须每次都小心地重新读取这 ...
- <密码学入门>关于RSA算法的加密解密及代码实现
RSA算法 是一种公钥加密算法,RSA算法相比别的算法思路非常清晰,但是想要破解的难度非常大.RSA算法基于一个非常简单的数论事实:两个素数相乘得到一个大数很容易,但是由一个大数分解为两个素数相乘却非 ...
- codeforces 112B Petya and Square
B. Petya and Square time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- 吴恩达机器学习笔记(二) —— Logistic回归
主要内容: 一.回归与分类 二.Logistic模型即sigmoid function 三.decision boundary 决策边界 四.cost function 代价函数 五.梯度下降 六.自 ...
- 如何去掉ArrayList重复的id
今天,也同样跟你一样寻找这个问题的解决办法, 如何去掉ArrayList重复的id 百度中找到这么一句话,为什么想到要去掉呢?为什么不反过来想,我在往ArrayList里添加的时候不让重复的项加入呢? ...
- storm源码剖析(3):topology启动过程
storm的topology启动过程是执行strom jar topology1.jar MAINCLASS ARG1 ARG2 鉴于前面已经分析了脚本的解析过程,现在重点分析topology1.ja ...
- BaseAdapter/AsyncTask/..等等细节
BaseAdapter中的getCount之类的函数,是在constructor之后才启动的.这印证了构造函数的优先级是max的. 图片 这一点的意义在于,当你想给getCount返回一个具体参数的时 ...
- AtCoder AGC #2 Virtual Participation
在知乎上听zzx大佬说AGC练智商...于是试了一下 A.Range Product 给$a$,$b$,求$\prod^{b}_{i=a}i$是正数,负数还是$0$ ...不写了 B.Box and ...
- 集训Day5
生活还得继续 bzoj3771 题面让我笑了很长时间 给出 n个物品,价值为别为Xi且各不相同,现在可以取1个.2个或3个,问每种价值和有几种情况? *顺序不同算一种 很傻逼的一个母函数+容斥,用A( ...
- vim 模式下的几个快捷用法
1.ctrl + v (-- VISUAL BLOCK --) 选中块模式,y 复制,d 剪切,p 粘贴,Esc退出模式 2.Shift + v (-- VISUAL LINE -- ) 快速行选 ...