原生ajax方法封装
/**
* @function ajax request
* @fields ajaxName:请求名称,method:请求方法,headers:setRequestHeader自定义部分,url:接口地址,async:是否异步请求,withCredentials:是否支持跨域发送cookie,dataType:数据类型 ,data:post请求参数
* @param data:{ajaxName:"ajaxNameString",headers:{},method:"GET/POST",url:"",async:true/false,withCredentials:true/false,dataType:"json",data:""}
* @result ajaxName.responseText
*/
function ajaxRequest (data, callback) {
data = data || {}
data.dataType = data.dataType || 'json'
var sendParams = null
var headers = data.headers || {}
var ajax = data.ajaxName
// 新建请求
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest()
} else {
ajax = new ActiveXObject('Microsoft.XMLHTTP')
}
// 打开请求
ajax.open(data.method.toUpperCase(), data.url, data.async)
// 是否支持跨域发送cookie
ajax.withCredentials = data.withCredentials
ajax.setRequestHeader("Content-type", data.contentType || "application/x-www-form-urlencoded")
// POST请求设置
if (data.method == 'POST') {
for (var i in headers) {
ajax.setRequestHeader(i, headers[i])
}
if (data.data) {
sendParams = data.data
}
}
// 发送请求
ajax.send(sendParams ? sendParams : null)
// 注册事件
ajax.onreadystatechange = function () {
if (window.location.origin + '/login/index' === ajax.responseURL) {
window.location.reload()
window.location.href = window.location.origin + '/login/index'
return
}
callback(ajax)
}
} /**
* GET
* @param ajaxName 请求名称
* @param requestUrl 请求接口地址
* @param async 是否异步请求
* @param callBack 回调函数
* @param contentType 请求类型
*/
function ajaxGetData (ajaxName, requestUrl, async, callBack, contentType) {
ajaxRequest({
ajaxName: ajaxName,
contentType: contentType || "application/json;charset=utf-8",
method: "GET",
url: requestUrl,
async: async,
cache: false,
withCredentials: true,
dataType: "json"
}, function callback (ajax) {
if (ajax.status == 200 && ajax.readyState == 4) {
callBack(ajax.responseText)
}
})
} /**
* 拼接GET请求url参数
* @param url
* @param params
* @returns {string}
*/
function formateGetUrl (url, params) {
var resultParams = ''
for (var key in params) {
resultParams = resultParams + '&' + key + '=' + params[key]
}
return url + '?' + resultParams.substr(1)
} /**
* POST
* @param ajaxName 请求名称
* @param requestUrl 请求接口地址
* @param async 是否异步请求
* @param callBack 回调函数
* @param contentType 请求类型
*/
function ajaxPostData (ajaxName, requestUrl, params, async, callBack, contentType) {
var resultParams = ''
if (!contentType || contentType === "application/x-www-form-urlencoded;charset=utf-8") {
for (var key in params) {
resultParams = resultParams + '&' + key + '=' + encodeURIComponent(params[key])
}
} else {
resultParams = params && JSON.stringify(params)
}
ajaxRequest({
ajaxName: ajaxName,
headers: {},
contentType: contentType || "application/x-www-form-urlencoded;charset=utf-8",
method: "POST",
dataType: "json",
url: requestUrl,
processData: true,
async: async,
data: resultParams
}, function callback (ajax) {
if (ajax.status == 200 && ajax.readyState == 4) {
callBack(ajax.responseText)
}
})
}
原生ajax方法封装的更多相关文章
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- 【前端学习笔记04】JavaScript数据通信Ajax方法封装
//Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...
- js原生Ajax的封装与使用
一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...
- js原生Ajax 的封装和原理
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
- Ajax方法封装
打算自己封装一个ajax方法,再不用jq库的情况下,直接引用: ajax作用:数据交互,在不刷新页面的情况下,发送请求,获取数据: 首页第一步常见一个ajax对象:XMLHttpRequest,之后会 ...
- 原生ajax函数封装
原生ajax函数 function ajax(json){ json=json || {}; if(!json.url){ return; } json.data=json.data || {}; j ...
- js实现原生Ajax的封装及ajax原理详解
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
- 基于jquery的ajax方法封装
在实际的项目里,ajax的应用频率很高,所以尽管jquery或者其他的一些类似的js库做了非常不错的封装,仍然有进一步封装简化的空间和必要 举一个例子,很久很久以前,我的ajax是这么写的: $.aj ...
- 原生ajax解析&封装原生ajax函数
前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...
随机推荐
- docker和docker compose常用操作命令
首先区分一下docker中几个概念 Image:镜像,相当于一个root文件系统,不包含任何动态数据 Container:容器,镜像运行时的实体,实质是进程,容器进程运行于属于自己的独立的命名空间 d ...
- 阿里云异常网络连接-可疑WebShell通信行为的分析解决办法
2018年10月27日接到新客户网站服务器被上传了webshell脚本木马后门问题的求助,对此我们sine安全公司针对此阿里云提示的安全问题进行了详细分析,ECS服务器被阿里云提示异常网络连接-可疑W ...
- SAPの販売管理で、価格設定をするまでの関連カスタマイズ画面
この記事ではSAP SDで.価格を決めるまでに必要な設定画面について述べています. condition table (条件テーブル) 条件レコードのキー項目を定義したもの.3桁の数字で名前がついている ...
- MyEclipse - 问题集 - 创建Maven项目,JDK版本默认是1.5
修改Maven的配置文件settings.xml,增加profile节点,如下所示: <profile> <id>jdk-1.8</id> <activati ...
- 多表头的DataGridView
上次在程序中要用到多表头的DataGridView,在网上搜索了一个,感觉还不错,现在简单的介绍一下它的用法.首先得把这个dll拷贝到相应的目录下,dll名称是myMultiColHea ...
- 云计算之路-阿里云上:奇怪的CPU 100%问题
这篇博文记录一下6月1日在阿里云上遇到的奇怪的CPU 100%问题,希望多年以后能真相大白. 那天负载均衡(SLB)中只放了1台云服务器(平时都放2台),由于是节假日,虽然只放了一台,但这台服务器的负 ...
- Unity3d创建物体,寻找物体,加载物体,添加脚本
GetCreateObject: using UnityEngine; public class GetCreateObject : MonoBehaviour { GameObject emptyG ...
- python 字典(dict)按键和值排序
python 字典(dict)的特点就是无序的,按照键(key)来提取相应值(value),如果我们需要字典按值排序的话,那可以用下面的方法来进行: 1 下面的是按照value的值从大到小的顺序来排序 ...
- Linux 文件与目录管理命令
处理目录的常用命令 常见的处理目录的命令: ls: 列出目录 cd:切换目录 pwd:显示目前的目录 mkdir:创建一个新的目录,语法:mkdir [-mp] 目录名称 -m :配置文件的权限 -p ...
- 菜鸟级appium 必看
之所以写这个,因为太多新人,appium环境半天都搭建不好,版本问题,兼容问题等等. 自己的解决方案:1 官网下载nodejs,建议安装长期支持版 2 进入appium官网,点击下载,跳转到githu ...