JS——我的第二个AJAX程序

关注

原创最新推荐文章于 2026-03-28 02:25:39 发布 489 阅读 AI 写同款· GEO 优化 ›

银河麒麟（桌面版/服务器版）远程桌面配置全攻略：XRDP与VNC实战指南本文提供了银河麒麟操作系统（桌面版与服务器版）配置远程桌面的完整实战指南。详细对比并演示了XRDP与VNC两种主流方案的安装、配置与连接步骤，涵盖从环境准备、软件安装、服务启动到客户端连接的全过程，并针对常见的黑屏、连接失败等问题给出了有效的排坑解决方案，帮助用户实现跨平台的便捷图形化远程管理。阅读详情

common.js

//common.js
function $(id){
	return document.getElementById(id);
}
var xhr;
function createXhr() {
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
		return xhr;
	}else{
		xhr = new ActiveXObject("Microsoft XMLHttp");// Microsoft XMLHttp大小写随意
		return xhr;
	}
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="common.js"></script>
</head>
<body>
	用户名：<input type="text" id="uname">
	<button onclick="getMsg()">发送请求</button>
	<div id="show"></div>
	<script>
		function getMsg(){
			//1. 创建xhr
			var xhr = createXhr();
			console.log(xhr);
			//2. 创建请求
			var uname = $("uname").value;
			xhr.open("GET","04-response.php?uname="+uname+"&upwd=123456",true);
  		 	//3. 设置回调函数—onreadystatechange
  		 	xhr.onreadystatechange = function() {
  		 		if(xhr.readyState == 4 && xhr.status == 200){ //status
  		 			//接收响应数据
  		 			console.log("1111");
  		 			var resText = xhr.responseText;
  		 			$("show").innerHTML = resText;
  		 			console.log(resText);
  		 		}
  		 	}
  		 	//4. 发送请求
  		 	xhr.send();
		}
	</script>
</body>
</html>

04-response.php

<?php 
	
	@$uname = $_REQUEST["uname"];
	if($uname == null || $uname == ""){
		die("uname required");
	}
	@$upwd = $_REQUEST["upwd"];
	if($upwd == null || $upwd == ""){
		die("upwd required");
	}
	echo $uname;
	echo $upwd;
	echo "我的第一个AJAX程序";
?>

收录于