AJAX示例——极简版

最新推荐文章于 2023-11-21 13:31:26 发布

欧阳方超

最新推荐文章于 2023-11-21 13:31:26 发布

阅读量481

点赞数

分类专栏： AJAX 文章标签： AJAX

本文链接：https://blog.csdn.net/u012288582/article/details/58678858

版权

AJAX 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

AJAX的出现使得页面部分内容更新成为现实，下面的示例程序演示了AJAX的工作原理。

第一，使用AppServ工具包所带的服务器作为Web服务器，该工具包安装成功后，访问其首页，会出现如下所示画面：

第二，在index.html页面中编写用JavaScript实现的AJAX代码，如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="AJAX">
  <meta name="Description" content="AJAX">
  <title>LearnAJAX</title>
  <script type="text/javascript">
      function useAjax() {
		  var xmlHttpReq = null;
		  if (window.ActiveXObject){
		      xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
		  }
		  else if (window.XMLHttpRequest){
		      xmlHttpReq = new XMLHttpRequest();
		  }

		  xmlHttpReq.open("GET", "test.txt?t=" + Math.random(), true);
		  xmlHttpReq.onreadystatechange = RequestCallBack;
	          xmlHttpReq.send(null);


		  function RequestCallBack() {
		  if (xmlHttpReq.readyState == 4)
		  {
			  if (xmlHttpReq.status == 200)
			  {
				  document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
			  }
		  }
	  }
	  }

	  
  </script>
 </head>
 <body>
     <input type="text" id="textId" οnkeyup="useAjax();" />
     <div id="resText">此处显示异步请求到的内容</div>
 </body>
</html>

代码中所请求的是test.txt文件，该文件中只有一行内容：You are using AJAX!

第三，把index.html和test.txt文件放在AppServ安装目录的www文件夹下；当input输入框输入内容时会触发onkeyup事件，进而实现异步请求，并把请求到的内容显示到输入框下方，如下：

这就是初步了解AJAX的示例。

欧阳方超

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX示例——极简版

AJAX的出现使得页面部分内容更新成为现实，下面的示例程序演示了AJAX的工作原理。第一，使用AppServ工具包所带的服务器作为Web服务器，该工具包安装成功后，访问其首页，会出现如下所示画面：第二，在index.html页面中编写用JavaScript实现的AJAX代码，如下： LearnAJAX function us
复制链接

扫一扫