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

  1. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  2. 【前端学习笔记04】JavaScript数据通信Ajax方法封装

    //Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...

  3. js原生Ajax的封装与使用

    一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...

  4. js原生Ajax 的封装和原理

    原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

  5. Ajax方法封装

    打算自己封装一个ajax方法,再不用jq库的情况下,直接引用: ajax作用:数据交互,在不刷新页面的情况下,发送请求,获取数据: 首页第一步常见一个ajax对象:XMLHttpRequest,之后会 ...

  6. 原生ajax函数封装

    原生ajax函数 function ajax(json){ json=json || {}; if(!json.url){ return; } json.data=json.data || {}; j ...

  7. js实现原生Ajax的封装及ajax原理详解

    原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

  8. 基于jquery的ajax方法封装

    在实际的项目里,ajax的应用频率很高,所以尽管jquery或者其他的一些类似的js库做了非常不错的封装,仍然有进一步封装简化的空间和必要 举一个例子,很久很久以前,我的ajax是这么写的: $.aj ...

  9. 原生ajax解析&封装原生ajax函数

    前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...

随机推荐

  1. 商城项目:商品列表ajax加载,ajax加入购物车--五张表的联合查询

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductLists.a ...

  2. Scrapy进阶

    当我们使用scrapy框架爬取网站的时候,我们会有一个入口的url,一个名为start_urls,我们爬取的第一个网页是从这一开始的. 需求: 现在我们有一个这样的需求,比如说我们对起始的URL有一个 ...

  3. (数据科学学习手札11)K-means聚类法的原理简介&Python与R实现

    kmeans法(K均值法)是麦奎因提出的,这种算法的基本思想是将每一个样本分配给最靠近中心(均值)的类中,具体的算法至少包括以下三个步骤: 1.将所有的样品分成k个初始类: 2.通过欧氏距离将某个样品 ...

  4. SQL 公用表表达式(CTE)

    1.概念 公用表表达式(Common Table Expression)是SQL SERVER 2005版本之后引入的一个特性.CTE可以看作是一个临时的结果集,可以在接下来的一个SELECT,INS ...

  5. python2.7入门---运算符 &案例

        已经分享过变量类型的基本概念了,接下来就研究了一下运算符的基础知识.接下来我们就来看一下内容.举个简单的例子 4 +5 = 9 .例子中,4 和 5 被称为操作数,"+" ...

  6. easyui combox 随便不存在的值,清空

    onHidePanel: function () { var valueField = $(this).combobox("options").valueField; var va ...

  7. 【JDK配置原创】JDK(JRE)环境变量配置原理 --费元星

    已经配置了很多次jdk了,每次都是安装网上的教程配的,今天突然想了解了解原理了,整理一下! 参考贴( http://blog.csdn.net/wkupaochuan/article/details/ ...

  8. Ubuntu下使用Git_5

    还欠大家最后一篇Git的学习. Git的下一个内容,标签,标签是为了更方便的参考提交而给他表上通俗易懂的名称 Git可以使用两种标签,轻标签和注解标签,打上的标签是固定的,不能向分支那样可以移动位置, ...

  9. MySQL☞between ... and ...

    between  初值  and  终值:求出该列列值在初值和终值之间所有的数据 格式如下: select 列名/* from 表名 where 列名 between 初值 and 终值 如下图:

  10. Python中send()和sendall()的区别

    Python中send()和sendall()的区别 估计每个学习Python网络编程的人,都会遇到过这样的问题: send()和sendall()到底有什么区别? send()和sendall()原 ...