AJAX简介

最新推荐文章于 2025-04-07 13:20:53 发布

健健csdn

最新推荐文章于 2025-04-07 13:20:53 发布

阅读量259

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_39788493/article/details/81384191

版权

AJAX 专栏收录该内容

1 篇文章

订阅专栏

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

AJAX 应用

运用XHTML+CSS来表达资讯；
运用JavaScript操作DOM（Document Object Model）来执行动态效果；
运用XML和XSLT操作资料;
运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；
注意：AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。

AJAX是基于现有的Internet标准

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

举例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
  <body>
    <h2>问题1：</h2>
    <div id="q1"></div>
    <div id="a1"></div>
    
    <button onclick="loadQuestion()">加载问题</button>
    <button onclick="loadAnswer()">查看答案</button>
  </body>
  
  <script>
  	function loadQuestion(){
  		var xhr = new XMLHttpRequest();     //XMLHttpRequest用于发送和接收http请求
  		
  		xhr.onreadystatechange = function(){     //响应完成后触发
  			if(xhr.readyState == 4 && xhr.status == 200){  //readyState == 4表示响应已完成
  				document.getElementById("q1").innerHTML = xhr.responseText;  //把响应的内容放到q1里面
  			}
  		};
  		
  		xhr.open("GET", "file/question.txt", true);   //true表示异步调用, false同步调用
  		xhr.send();
  		
  		/* if(xhr.readyState == 4 && xhr.status == 200){  
			document.getElementById("q1").innerHTML = xhr.responseText; 
		} */
  	}
  	
  	
  	function loadAnswer(){
  		var xhr = new XMLHttpRequest();     //XMLHttpRequest用于发送和接收http请求
  		
  		xhr.onreadystatechange = function(){     //响应完成后触发
  			if(xhr.readyState == 4 && xhr.status == 200){  //readyState == 4表示响应已完成
  				document.getElementById("a1").innerHTML = xhr.responseText;  //把响应的内容放到q1里面
  			}
  		};
  		
  		xhr.open("GET", "file/answer.txt", true);   //true表示异步调用, false同步调用
  		xhr.send();
  		
  	}
  
  
  </script>
</html>