完整的案例效果如下，在浏览器中用网络地址打开网页，get效果请看下面两张图
点击下图按钮；
按钮点击后，获取下图列表内容
完整的案例效果如下，在浏览器中用网络地址打开网页，post发送效果请看下面两张图
在表单中输入信息，点击下图 提交；
按钮提交后，调试窗口会显示对应的内容。如下图
上述效果实现代码如下
1.1.html文档
新建一个文档，把下面代码复制到文档中
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ajax封装</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<ul id="ul"></ul>
<form action="">
<input type="text" name="username" id="username">
<input type="text" name="age" id="age">
<input type="submit" id="sub">
</form>
<script>
sub.onclick = function (e) {
e.preventDefault();
var usVal = username.value;
var ageVal = age.value;
ajaxFunc(postData, 'POST', './post.php', 'username='+ usVal +'&age=' + ageVal, true)
}
btn.onclick = function () {
ajaxFunc(showList, 'GET', './getNews.php', '', true);
ajaxFunc(postData, 'POST', './post.php', 'username=ai&age=21', true);
}
function ajaxFunc(callback, method, url, data, flag) {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
if (method == 'POST') {
xhr.open('POST', url + '?' + data, flag);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
} else if (method == "GET") {
xhr.open(method, url, flag);
xhr.send();
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
callback(xhr.responseText);
}
}
}
}
function showList(data) {
var d = JSON.parse(data);
var str = '';
d.forEach(function (ele, index, arr) {
str += '<li>' + ele.title + ' ' + ele.date + '</li>';
})
ul.innerHTML = str;
}
function postData(data) {
console.log(data);
}
</script>
</body>
</html>
1.2.post.php文档
新建一个文档，把下面代码复制到文档中
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$username = $_POST['username'];
$age = $_POST['age'];
echo "名字: {$username}, 年龄: {$age}";
?>
1.3.getNews.php文档
新建一个文档，把下面代码复制到文档中
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$news = array(
array('title'=>'德国女总理默克尔滑雪时摔倒 骨盆断裂','date'=>'2014-1-6'),
array('title'=>'中日驻英外交官撰文互称对方国家为"伏地魔"','date'=>'2014-1-6'),
array('title'=>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=>'2014-1-6'),
array('title'=>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=>'2014-1-6'),
array('title'=>'习近平：嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'),
array('title'=>'习近平：嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'),
array('title'=>'习近平：嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'),
array('title'=>'习近平：嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'),
array('title'=>'习近平：嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'),
array('title'=>'中国长达13年游戏机禁令正式解除 外企可进入','date'=>'2014-1-6'),
array('title'=>'70种证件伴中国人一生:领养老金要办生存证明','date'=>'2014-1-6'),
array('title'=>'德国女总理默克尔滑雪时摔倒 骨盆断裂','date'=>'2014-1-6'),
array('title'=>'中日驻英外交官撰文互称对方国家为"伏地魔"','date'=>'2014-1-6'),
array('title'=>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=>'2014-1-6'),
array('title'=>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=>'2014-1-6'),
);
echo json_encode($news);
?>
现在完整的代码己经记录完毕了，以后再也不用担心找不到代码了，可以随查随用了。
博主联系方式:
- 微信：34419369
- QQ: 34419369
- 公众号：前方录
- 有什么不懂的地方欢迎联系我，帮到你是我会很开心