关注小编微信公众号公众号【前端基础教程从0开始】回复“1”,拉你进程序员技术讨论群,群内有大神,可以免费提供问题解答。公众号回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。公众号回复“领取资源”,领取300G前端,Java,产品经理,微信小程序,Python等资源合集大放送,让我们一起学前端。
我们通常使用jquery封装好的ajax,很不错。想想自己也可以封装一个。这样方便很多。而且修改起来也很方便:
话不多说直接上代码
(function(){
function createXHR() {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
return xhr;
}
function ajax(obj) {
var xhr = createXHR();
//通过params()将名值对转换成字符串
obj.data = params(obj.data);
//判断请求方式
if (obj.method === "get") {
//如果是get请求则将url加在后面,并且需要根据是否存在问好和&来处理
obj.url += obj.url.indexOf("?") == -1 ? "?" + obj.data : "&" + obj.data;
}
//同步
if (obj.async === false) {
callback();
}
//异步
if (obj.async === true) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
callback();
}
}
}
xhr.open(obj.method, obj.url, obj.async);
if (obj.method === "post") {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(obj.data);
} else {
xhr.send(null);
}
function callback() {
if (xhr.status == 200) { //判断http的交互是否成功,200表示成功
console.log(obj);
obj.success(xhr.responseText); //回调传递参数
} else {
obj.error("请求错误");
}
}
//键值对转换字符串
function params(data){
var arr = [];
for(var i in data){
arr.push(i+"="+data[i]);
}
return arr.join("&");
}
}
window.ajax = ajax;
})();
下面是调用方式:
ajax({
method:"get",
url:"http://localhost/sevice.php?username=allen&age=12",
// data:{
// "username":"iwen",
// "age":"12"
// },
success:function(message){
alert(message);
},
async : true,
error:function(error){
alert(error);
}
});
下面是服务器上最简单的可以返回数据的代码:
<?php
echo $_GET['username'].$_GET['age'];
>