建议你这样试试看：
ajax函数：
function ajax(opt) {
opt = opt || {}
opt.method = opt.method.toUpperCase() || 'POST'
opt.url = opt.url || ''
opt.async = opt.async || true
opt.data = opt.data || null
opt.success = opt.success || function () { }
var xmlHttp = null
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest()
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
} var params = []
for (var key in opt.data) {
params.push(key + '=' + opt.data[key])
}
var postData = params.join('&')
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async)
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencodedcharset=utf-8')
xmlHttp.send(postData)
}
else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async)
xmlHttp.send(null)
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 &&xmlHttp.status == 200) {
opt.success(xmlHttp.responseText)
}
}
}
2.参数说明（清渭技术--www.qingwei.tech）：
3.使用示例：
ajax({
method: 'POST',
url: 'post.php',
data: {
param1: 'value1',
param2: 'value2',
},
success: function (response) {
console.log(response)
}
})
PS：希望本文对你有所帮助~qingwei.tech
可以这样
1var Ajax = {//ajax模块
init: function(obj) {
//初始化数据
var objAdapter = {
url: '',
method: 'get',
data: {},
success: function() {},
complete: function() {},
error: function(s) {
alert('status:' + s + 'error!')
},
async: true
}
//通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
objAdapter.url = obj.url + '?rand=' + Math.random()
objAdapter.method = obj.method || objAdapter.method
objAdapter.data = Ajax.params(obj.data) || Ajax.params(objAdapter.data)
objAdapter.async = obj.async || objAdapter.async
objAdapter.complete = obj.complete || objAdapter.complete
objAdapter.success = obj.success || objAdapter.success
objAdapter.error = obj.error || objAdapter.error
return objAdapter
},
//创建XMLHttpRequest对象
createXHR: function() {
if(window.XMLHttpRequest) { //IE7+、Firefox、Opera、Chrome 和Safari
return new XMLHttpRequest()
} else if(window.ActiveXObject) { //IE6 及以下
var versions = ['MSXML2.XMLHttp', 'Microsoft.XMLHTTP']
for(var i = 0, len = versions.length i < len i++) {
try {
return new ActiveXObject(version[i])
break
} catch(e) {
//跳过
}
}
} else {
throw new Error('浏览器不支持XHR对象！')
}
},
params: function(data) {
var arr = []
for(var i in data) {
//特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]))
}
return arr.join('&')
},
callback: function(obj, xhr) {
if(xhr.status == 200) { //判断http的交互是否成功，200表示成功
obj.success(xhr.responseText) //回调传递参数
} else {
alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText)
}
},
ajax: function(obj) {
if(obj.method === 'post') {
Ajax.post(obj)
} else {
Ajax.get(obj)
}
},
//post方法
post: function(obj) {
var xhr = Ajax.createXHR() //创建XHR对象
var opt = Ajax.init(obj)
opt.method = 'post'
if(opt.async === true) { //true表示异步，false表示同步
//使用异步调用的时候，需要触发readystatechange 事件
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) { //判断对象的状态是否交互完成
Ajax.callback(opt, xhr) //回调
}
}
}
//在使用XHR对象时，必须先调用open()方法，
//它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。
xhr.open(opt.method, opt.url, opt.async)
//post方式需要自己设置http的请求头，来模仿表单提交。
//放在open方法之后，send方法之前。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(opt.data) //post方式将数据放在send()方法里
if(opt.async === false) { //同步
Ajax.callback(obj, xhr) //回调
}
},
//get方法
get: function(obj) {
var xhr = Ajax.createXHR() //创建XHR对象
var opt = Ajax.init(obj)
if(opt.async === true) { //true表示异步，false表示同步
//使用异步调用的时候，需要触发readystatechange 事件
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) { //判断对象的状态是否交互完成
Ajax.callback(obj, xhr) //回调
}
}
}
//若是GET请求，则将数据加到url后面
opt.url += opt.url.indexOf('?') == -1 ? '?' + opt.data : '&' + opt.data
//在使用XHR对象时，必须先调用open()方法，
//它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。
xhr.open(opt.method, opt.url, opt.async)
xhr.send(null) //get方式则填null
if(opt.async === false) { //同步
Ajax.callback(obj, xhr) //回调
}
}
}
/**js原生代码实现ajax
*AJAX建立和服务器的连接，接收服务器的请求，处理服务器返回的数据
*开发步骤：
* 1.创建XMLHttpRequest对象
* 2.接收/处理服务器的响应
* 3.打开和服务器的连接
* 4.发送数据
*/
/**
* 创建XMLHttpRequest对象
*/
function ajaxFunction(){
var xmlHttp
try{//Firefox,Opera 8.0+,Safari
xmlHttp=new XMLHttpRequest()
}catch(e){
try{//Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")
}catch(e){
try{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
}catch(e){}
}
}
return xmlHttp
}
//click function
window.onload=function(){
//<input type="button" name="ok" id="ok" value="test service link" />
document.getElementById("ok").onclick=function(){
/*
* 1.获取XMLHttpRequest对象
*/
var xmlReq=ajaxFunction()
/*
* 2.处理服务器的响应
* XMLHttpRequest对象中有一个readyState属性
* readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
* 0 代表未初始化。还没有调用open方法
* 1代表正在加载。open方法已被调用。但send方法没有被调用
* 2代表已加载完毕。send已被调用。请求已经开始
* 3代表交互中。服务器正在发送响应
* 4代表完毕。响应发送完毕。
*/
xmlReq.onreadystatechange=function(){
//
if(xmlReq.readyState==4){
//通过把这个值和200（一切正常，服务器处理成功）或304（源文件没有被修改）比较
if(xmlReq.status==200||xmlReq.status==304){
//接收服务器端数据
var data=xmlReq.responseText
alert("data:"+data)
}
}
}
/*
* 3.打开和服务器的连接
* open（method，url，asynch）
* method 请求方法 get post
* url 请求的路径
* asynch：表示请求是否要异步传输，默认值为true(异步)
*/
//alert(new Date().getTime())//(解决缓存的问题)
xmlReq.open("post","../testServlet?timeStamp="+new Date().getTime()+"&a=9",true)
/*
* xmlReq.setRequestHeader()
* 如果用post请求服务器发送的数据
* 需要将"content-Type"的首部设置为"application/x-www-form-urlencoded"。它会告诉服务器正在发送数据
* 并且数据已经符合url编码了
* 该方法必须放在open方法之后
*/
xmlReq.setRequestHeader("content-Type","application/x-www-form-urlencoded")
/*
* 4.发送数据
* 若选用的是get请求，则不会发送任何数据，给send方法传递null即可
*/
/*xmlReq.send(null)*/
xmlReq.send("b=45&c=23")
}
}
