/**
* 封装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封装的更多相关文章

  1. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

  2. 原生js实现ajax封装

    一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...

  3. 原生js中用Ajax进行get传参

    原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  4. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  5. 用原生JS实现AJAX和JSONP

    前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生 ...

  6. 原生js实现Ajax

    一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...

  7. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  8. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  9. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

随机推荐

  1. LeetCode:分发饼干【455】

    LeetCode:分发饼干[455] 题目描述 假设你是一位很棒的家长,想要给你的孩子们一些小饼干.但是,每个孩子最多只能给一块饼干.对每个孩子 i ,都有一个胃口值 gi ,这是能让孩子们满足胃口的 ...

  2. jQuery的事件绑定和解除

    1 . 绑定事件 语法 : bind(type,data,fn) 描述 : 为每一个匹配的特定元素(像 click)绑定一个事件处理器函数. type(String) : 事件类型 data(Obje ...

  3. 理解Java泛型 通配符 ? 以及其使用

    什么是泛型: 泛型从字面上理解,是指一个类.接口或方法支持多种类型,使之广泛化.一般化和更加通用.Java中使用Object类来定义类型也 能实现泛型,但缺点是造成原类型信息的丢失,在使用中容易造成C ...

  4. Visual Studio "无法查找或打开PDB文件"解决方法

       1.问题: 使用C#语言时遇到的问题(C/C++类似,方法一致),我用qt和VS2013也遇到这种问题 编译链接都没问题,调试时出现以下错误提示:      2.解决方法 第一步: 第二步:[调 ...

  5. BZOJ 1041 [HAOI2008]圆上的整点:数学【费马平方和定理】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1041 题意: 给定n(n <= 2*10^9),问你在圆x^2 + y^2 = n^ ...

  6. python做图笔记

    1. 工具选择 了解了基本python,rodeo,anaconda套件这三种工具. (1)基本python,下载安装python的最新版(目前是python3.7).注意要使用安装版.安装好后,一般 ...

  7. codeforces 609D D. Gadgets for dollars and pounds(二分+贪心)

    题目链接: D. Gadgets for dollars and pounds time limit per test 2 seconds memory limit per test 256 mega ...

  8. ubuntu c++ 关机 重启 挂起 API

    #include <unistd.h> #include <linux/reboot.h> int main() { reboot(LINUX_REBOOT_MAGIC1, L ...

  9. bjwc Day3 & 4 妈妈我这是来了个什么地方呀

    真·bjwc开始了 Day3 T1啥啥啥 第k大斜率?想都没想码了个暴力,然后爆零...暴力都能错,退役 T2看着像网络流就扔了个网络流大暴力上去,六七十分的样子然后蜜汁wa T3题面说“想都没想就弄 ...

  10. POJ2763 Housewife Wind(树剖+线段树)

    After their royal wedding, Jiajia and Wind hid away in XX Village, to enjoy their ordinary happy lif ...