AJAX 从入门到放弃

最新推荐文章于 2022-11-08 00:02:22 发布

不学无术的学混子

最新推荐文章于 2022-11-08 00:02:22 发布

阅读量239

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/liu_tian_wei/article/details/78764818

本文介绍了AJAX技术的基本概念及其工作原理。AJAX是一种利用现有标准的新方法，可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。文中详细解释了如何创建XMLHttpRequest对象、向服务器发送请求以及如何处理服务器响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX 介绍

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

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

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

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

AJAX 工作原理

AJAX

使用步骤

1，创建XMLHttpRequest 对象

        var xmlhttp;
	if (window.XMLHttpRequest){
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

2，向服务器发送请求

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

3，服务器响应

获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

实例解析

<script type="text/javascript">
  function loadXMLDoc(){
	
	
	//声明一个XMLHttpRequest 对象
	var xmlhttp;
	if (window.XMLHttpRequest){
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
	//responseText 属性返回字符串形式的响应
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			document.getElementById("a1").innerHTML=xmlhttp.responseText;//将服务器返回值回写到id为a1的标签位置
		}
	}
	//将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
	xmlhttp.open("GET","login.jsp",true);
	xmlhttp.send();
}
</script>