原生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的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
随机推荐
- centos下安装nodejs及websocket
软件环境: VMware Workstation CentOS 6.5 NodeJS v0.12.5 安装过程: Step 1.确认服务器有nodejs编译及依赖相关软件,如果没有可通过运行以下命令安 ...
- 20145239杜文超 《Java程序设计》第4周学习总结
20145239 <Java程序设计>第4周学习总结 教材学习内容总结 第六章: 继承:避免多个类间重复定义共同行为.即当多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多 ...
- linux内核 RCU机制详解【转】
本文转载自:https://blog.csdn.net/xabc3000/article/details/15335131 简介 RCU(Read-Copy Update)是数据同步的一种方式,在当前 ...
- 部署asp.net网站的小问题
C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\CONFIG web.config 修改 trust level="Full"
- 介绍 Java 的内存泄漏
java最明显的一个优势就是它的内存管理机制.你只需简单创建对象,java的垃圾回收机制负责分配和释放内存.然而情况并不像想像的那么简单,因为在Java应用中经常发生内存泄漏.脚本代码 本教程演示了什 ...
- phpunit 入门
话说,使用phpunit还是处于好奇之心,为什么以前一直没使用呢?主要是嫌麻烦,小项目,前后端都是自己写,几个人就完成的工作,没必要弄的那么麻烦.好了,废话不多说,让我们一起来感受下phpunit吧! ...
- 前端多媒体(4)—— video标签全面分析
测试地址:https://young-cowboy.github.io/gallery/html5_video/index.html 属性 一些属性是只读的,一些属性是可以修改从而影响视频播放的. a ...
- codeforces 651E E. Table Compression(贪心+并查集)
题目链接: E. Table Compression time limit per test 4 seconds memory limit per test 256 megabytes input s ...
- leetcode 303. Range Sum Query - Immutable(前缀和)
Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclusive ...
- 「USACO15FEB」「LuoguP3121」审查(黄金)Censoring (Gold)(AC自动机
题目描述 Farmer John has purchased a subscription to Good Hooveskeeping magazine for his cows, so they h ...