AJAX 教程---菜鸟教程

文章目录

  • AJAX 简介
  • AJAX 实例
  • XHR 创建对象
  • XHR 请求
    • 向服务器发送请求
    • GET 还是 POST?
    • GET 请求
    • POST 请求
    • url - 服务器上的文件
  • XHR 响应
    • responseText 属性
    • responseXML 属性
  • XHR readyState
    • 使用回调函数

AJAX 简介

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

什么是 AJAX?
AJAX = Asynchronous JavaScript and XML

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

AJAX 工作原理
AJAX 教程---菜鸟教程_第1张图片

AJAX 实例

为了帮助您理解 AJAX 的工作原理,我们创建了一个小型的 AJAX 应用程序:

<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
script>
head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容h2>div>
<button type="button" onclick="loadXMLDoc()">修改内容button>

body>

AJAX 教程---菜鸟教程_第2张图片
AJAX 教程---菜鸟教程_第3张图片
AJAX 实例解析
上面的 AJAX 应用程序包含一个 div 和一个按钮。

div 部分用于显示来自服务器的信息。当按钮被点击时,它负责调用名为 loadXMLDoc() 的函数:

<div id="myDiv"><h2>使用 AJAX 修改该文本内容h2>div>
<button type="button" onclick="loadXMLDoc()">修改内容button>

接下来,在页面的 head 部分添加一个

你可能感兴趣的:(ajax,javascript,firefox)