从 W3Schools.cn 开始学习 WEB 编程技术

XML 教程

XML HOME XML Introduction XML How to use XML Tree XML Syntax XML Elements XML Attributes XML Namespaces XML Display XML HttpRequest XML Parser XML DOM XML XPath XML XSLT XML XQuery XML XLink XML Validator XML DTD XML Schema XML Server XML Examples XML Quiz

XML AJAX

AJAX Introduction AJAX XMLHttp AJAX Request AJAX Response AJAX XML File AJAX PHP AJAX ASP AJAX Database AJAX Applications AJAX Examples

XML DOM

DOM Introduction DOM Nodes DOM Accessing DOM Node Info DOM Node List DOM Traversing DOM Navigating DOM Get Values DOM Change Nodes DOM Remove Nodes DOM Replace Nodes DOM Create Nodes DOM Add Nodes DOM Clone Nodes DOM Examples

XPath 教程

XPath Introduction XPath Nodes XPath Syntax XPath Axes XPath Operators XPath Examples

XSLT 教程

XSLT Introduction XSL Languages XSLT Transform XSLT <template> XSLT <value-of> XSLT <for-each> XSLT <sort> XSLT <if> XSLT <choose> XSLT Apply XSLT on the Client XSLT on the Server XSLT Edit XML XSLT Examples

XQuery 教程

XQuery Introduction XQuery Example XQuery FLWOR XQuery HTML XQuery Terms XQuery Syntax XQuery Add XQuery Select XQuery Functions

XML DTD

DTD Introduction DTD Building Blocks DTD Elements DTD Attributes DTD Elements vs Attr DTD Entities DTD Examples

XSD Schema

XSD Introduction XSD How To XSD <schema> XSD Elements XSD Attributes XSD Restrictions

XSD Complex

XSD Elements XSD Empty XSD Elements Only XSD Text Only XSD Mixed XSD Indicators XSD <any> XSD <anyAttribute> XSD Substitution XSD Example

XSD Data

XSD String XSD Date XSD Numeric XSD Misc XSD Reference

Web Services

XML Services XML WSDL XML SOAP XML RDF XML RSS

参考手册

DOM Node Types DOM Node DOM NodeList DOM NamedNodeMap DOM Document DOM Element DOM Attribute DOM Text DOM CDATA DOM Comment DOM XMLHttpRequest DOM Parser XSLT Elements XSLT/XPath Functions

AJAX 简介

AJAX是开发人员的梦想,因为您可以:

  • 在不重新加载网页的情况下更新网页
  • 从服务器请求数据-页面加载后
  • 从服务器接收数据-页面加载后
  • 在后台向服务器发送数据

尝试一下每章例句

在每一章中,您都可以在线编辑示例,然后单击按钮查看结果。

AJAX Example

Let AJAX change this text

尝试一下 »


AJAX示例说明

HTML Page

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

HTML页面包含<div>部分和<button>

<div> 部分用于显示来自服务器的信息。

<button> 调用函数(如单击)。

函数从web服务器请求数据并显示:

Function loadDoc()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

"ajax_info.txt" looks like this:

<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a technique for accessing web servers from a web page.</p>
<p>AJAX stands for Asynchronous JavaScript And XML.</p>


什么是AJAX?

AJAX = 异步JavaScript和XML。

AJAX不是一种编程语言。

AJAX只是结合使用了:

  • 浏览器内置的XMLHttpRequest对象(从web服务器请求数据)
  • JavaScript和HTML DOM(显示或使用数据)

AJAX是一个误导性的名字。AJAX应用程序可能使用XML来传输数据,但以纯文本或JSON文本的形式传输数据也同样常见。

AJAX允许通过在后台与web服务器交换数据来异步更新web页面,这意味着可以在不重新加载整个页面的情况下更新部分web页面。


AJAX的工作原理

AJAX

  • 1. 网页中发生事件(加载网页,单击按钮)
  • 2. XMLHttpRequest对象是由JavaScript创建的
  • 3. XMLHttpRequest对象向web服务器发送请求
  • 4. 服务器处理请求
  • 5. 服务器将响应发送回网页
  • 6. 响应由JavaScript读取
  • 7. 正确的操作(如页面更新)由JavaScript执行