js实现ajax请求，注意post和get 的区别

注意请求参数的区别

只写了成功的部分，异常的部分没有写

function ajaxFunc(method, url, async, data, callback) {

var xhr = null;

if (window.XMLHttpRequest) { //兼容写法

xhr = new XMLHttpRequest();

} else {

xhr = new ActiveXObject("Microsoft.XMLHTTP")

}

method = method.toLocaleUpperCase(); //将传入的参数都变成大写，避免下面判断失效

if (method == 'POST') {

xhr.open(method, url, async);

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.send(data);

} else if (method == 'GET') {

xhr.open(method, url + '?' + data, async); //get方式下将参数拼接到url后面

xhr.send();

}

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

if (callback) {

callback(xhr.responseText); // 回调函数处理返回的数据

} else {

alert(xhr.responseText)

}

}

}

}

}

post方式下参数直接在xhr.send中发送，在post方式下需要设置请求头xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

get方式下需要将参数拼接到url后面

实例应用方式如下：

两个实例：上面的是提交输入框的值

下面的是点击请求列表数据，并通过showList渲染到ul中

提交

get