原声ajax的函数式封装,原生 js 封装 ajax的两种方式（get,post）

/*ajax封装

@param option:传入一个对象

属性分别为(顺序可以打乱):

url:请求的路径

type:请求的不同类型get或post

data:发送的数据,格式:key1=value1&key2=value2

callback:回调函数,方便用户处理自己的数据,传递逻辑

function ajax(option){

//创建异步对象

var xhr = new XMLHttpRequest();

//如果是get并且有数据

if(option.type=='get'&&option.data){

option.url=option.url+'?'+option.data;

}

//设置请求行

xhr.open(option.type,option.url);

//设置请求头(post有数据发送才需要设置请求头)

//判断是否有数据发送

if(option.type=='post'&&option.data){

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

}

//注册回调函数

xhr.onreadystatechange = function(){

if(xhr.readyState==4&&xhr.status==200){

//接收返回的数据类型

var type = xhr.getResponseHeader('Content-Type');

//json格式

if(type.indexOf('json')!=-1){

option.callback(JSON.parse(xhr.responseText));

}

//xml格式

else if(type.indexOf('xml')!=-1){

option.callback(xhr.responseXML);

}

//普通格式

else{

option.callback(xhr.responseText);

}

//发送请求主体

//判断不同的请求类型

xhr.send(option.type=='post'?option.data:null);

}

原声ajax的函数式封装,原生 js 封装 ajax的两种方式（get,post）相关推荐

原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
vue 在线编辑excel表格（原生和使用组件的两种方式）
vue 在线编辑excel表格(原生和使用组件的两种方式) top表头和left表头格式的表格 <template><div>& ...
Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
javascript - 封装原生js实现ajax
1 /* 2 * ajax方法 3 */ 4 var Ajax = function() { 5 var that = this; 6 //创建异步请求对象方法 7 that.createXHR = ...
java原生的ajax怎么写,用原生js实现 ajax方法
原标题:用原生js实现 ajax方法作者介绍:咔拉宝宝前端工程师,致力于首个情景式购物商城咔拉商城的前端搭建,在咔拉职场栏目作为程序猿担当,与读者朋友们共同探讨前端开发的那些事. 一.ajax介绍: ...
原生ajax请求并渲染,原生js的ajax数据渲染
ajax应用不只是页面功能的提升,也是性能优化的一种方式. 兼容这块的话就是其ajax对象,在ie和其他浏览器的不同,那么现在基本上w3c已经给出了兼容的写法 var xmlhttp; if(wind ...
原生ajax的post方法,原生js实现ajax及get post方法
ajax原生实现,含 post与get方法.原码如下: /* * ajax * type === GET: data格式 name=baukh&age=29 * type === POST: ...
原生JS事件绑定的三种方式
JavaScript绑定事件的方法要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数".所谓事件处理函数,就是处理用户操作的函数,不同的 ...
js 页面跳转两种方式（原页面跳转，打开新标签页）
1 页面跳转(原页面跳转) (1)a标签实现 <a href="https://blog.csdn.net/qq_38974638">旭东怪的博客</a> ...

原声ajax的函数式封装,原生 js 封装 ajax的两种方式（get,post）

原声ajax的函数式封装,原生 js 封装 ajax的两种方式（get,post）相关推荐

最新文章

热门文章