您现在的位置是：网站首页> 前端技术> JavaScript JavaScript

JavaScript 原生 AJAX 使用示例

Smile 2019-11-23 10:19:38 PHP HTML Javascript 阅读：2099

简介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)

下一篇：JavaScript常见数据类型转换