原生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的跨域请求
		
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
 
随机推荐
- Java for LeetCode 086
			
Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...
 - socket,获取html,webservice等,支持chunked,gzip,deflate
			
1. [代码][C#]代码using System;using System.Collections.Generic;using System.Linq;using System.Net.Socket ...
 - DenseNet算法详解——思路就是highway,DneseNet在训练时十分消耗内存
			
论文笔记:Densely Connected Convolutional Networks(DenseNet模型详解) 2017年09月28日 11:58:49 阅读数:1814 [ 转载自http: ...
 - int型变量,不使用中间变量完成互换
			
package com.t_02; /** * 定义两个int类型的数,完成交换,不使用第三方变量 * @author Administrator * */ public class t1 { pub ...
 - 【HDU 3487】Play with Chain Splay
			
题意 给定$n$个数序列,每次两个操作,将区间$[L,R]$拼接到去掉区间后的第$c$个数后,或者翻转$[L,R]$ Splay区间操作模板,对于区间提取操作,将$L-1$ Splay到根,再将$R+ ...
 - hdu-5792 World is Exploding(容斥+树状数组)
			
题目链接: World is Exploding Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Jav ...
 - C语言中数据类型和变量
			
C语言中的数据类型 数据类型的本质,固定大小内存块的别名. 数组名代表数组首元素的地址. 数组首元素的地址,&代表整个数组的地址. 数组数据类型,怎么定义数据数组类型,定义数组类型指针,数组类 ...
 - linux 进程学习笔记-共享内存
			
如果能划定一块物理内存,让多个进程都能将该内存映射到其自身虚拟内存空间的话,那么进程可以通过向这块内存空间读写数据而达到通信的目的.另外,和消息队列不同的是,共享的内存在用户空间而不是核空间,那么就不 ...
 - java面试题07
			
1.重载和重写的区别? 重载(Overload):(1)方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型.重载Overloading是一个类中多态性 ...
 - poj3666序列对应——DP
			
题目:http://poj.org/problem?id=3666 很普通的DP,离散化(sort)一下即可: mn的求法很不错(比我原来开了mn[]……简洁). 代码如下: #include< ...