您现在的位置是： 网站首页> 前端技术> JavaScript JavaScript
JavaScript 原生 AJAX 使用示例
Smile
2020-09-22
PHP
HTML
Javascript
阅读：1145
简介Ajax通过在后台与服务器进行少量数据交换，可以使网页实现异步更新，能够在用户没有察觉的情况下更新部分网页，给用户更好的使用体验，下面简单介绍下 JavaScript 原生 AJAX 的使用示例
1、HTML 页面和 JavaScript Ajax代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" id="input" placeholder="输入ID获取用户信息"><span onclick="getUser();">点击获取</span>
<ul>
<li>ID：<span id="id"></span></li>
<li>姓名：<span id="name"></span></li>
<li>年龄：<span id="age"></span></li>
<li>电话：<span id="phone"></span></li>
</ul>
<script type="text/javascript">
function getUser(){
var id = document.getElementById("input").value;
// alert(id);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
var user = data.data;
document.getElementById("id").innerHTML = user.id;
document.getElementById("name").innerHTML = user.name;
document.getElementById("age").innerHTML = user.age;
document.getElementById("phone").innerHTML = user.phone;
}
};
xhr.open("POST", "user.php", true);
xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('id='+id);
}
</script>
</body>
</html>readyState：XMLHttpRequest 的状态
- 0：请求未初始化
- 1：服务器连接已建立
- 2：请求已收到
- 3：正在处理请求
- 4：请求已完成且响应已就绪
2、PHP 后端代码
<?php
if(isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && strtolower($_SERVER["HTTP_X_REQUESTED_WITH"])=="xmlhttprequest"){
$userArr = [
1=>['id'=>1,'name'=>'小明','age'=>18,'phone'=>'13435277888'],
2=>['id'=>2,'name'=>'小里','age'=>17,'phone'=>'18498743675'],
3=>['id'=>3,'name'=>'小张','age'=>13,'phone'=>'15435347458'],
4=>['id'=>4,'name'=>'小林','age'=>15,'phone'=>'14485477643'],
];
$idArr = [1,2,3,4];
$id = $_POST['id'];
// echo $id;exit;
if (in_array($id, $idArr)) {
$user = $userArr[$id];
echo json_encode(['code'=>0,'msg'=>'success','data'=>$user]);
}else{
echo json_encode(['code'=>0,'msg'=>'暂无数据']);
}
}
?>很赞哦！ (0)
