方法1方法1/2：编码

1. 1为编写Ajax程序准备一张图片。将图片保存在显示Ajax程序的html和文本文件所在的文件夹中。在本文中，“ProgramInAjax”目录设置在安装WampServer的“www”目录下的“wamp”文件夹中。

2. 2打开任何文本编辑器。本文使用Notepad++作为文本编辑器。

3. 3在文本编辑器中创建新文件。键入以下内容：&lt；h2&gt；哦哦！黄花去了哪里&lt/h2&gt；您可以在html标记中键入任何需要的内容&lt；h2&gt&lt/h2&gt；在这里

4. 4将文件另存为名为“ajax data.txt”的文本文档实际上，您可以根据需要为文件命名，但请确保在这一行的编码中输入相同的文件名：xmlhttp。打开（“GET”，“ajax data.txt”，true）；然而，HTML标签&lt；h2&gt&lt/h2&gt；用于标题，使其看起来更大、更不可见。

5. 5为网页创建新文件。该文件用于在Web浏览器中查看Ajax程序的HTML文件。

6. 6复制以下代码：&lt；！DOCTYPE html&gt&书信电报；html&gt&书信电报；头&gt&书信电报；标题&gt；我的第一个Ajax程序&lt/标题&gt&lt--将Ajax代码放在下面--&gt&书信电报；脚本&gt；函数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&amp；xmlhttp.status==200）{document.getElementById（“myImage”）.innerHTML=xmlhttp.responseText；}xmlhttp。打开（“GET”，“ajax data.txt”，true）；xmlhttp。send（）；}&lt/脚本&gt&lt--脚本结束--&gt&lt/头&gt&书信电报；body style=“文本对齐：居中；”&gt&lt--下面是一幅测试Ajax程序的图片--&gt&书信电报；div id=“myImage”&gt&书信电报；h2&gt；点击下面的按钮使花消失&lt/h2&gt&书信电报；img src=“MyPicture.png”width=“500px”height=“300px”title=“Yellow Flower”alt=“黄色花朵的图像”/&gt&lt/部门&gt&书信电报；br/&gt&lt--这里有一个按钮--&gt&书信电报；button type=“button”onclick=“loadXMLDoc（）”&gt；点击这里使图片消失&lt/按钮&gt&lt/车身&gt&lt/html&gt；

7. 7.保存文件。单击菜单栏上的“保存”按钮。“另存为”框已打开。输入文档的名称。在本文中，文件名为“index”

8. 8单击下拉箭头选择文件扩展名。在“另存为类型”字段中，单击下拉箭头选择文件扩展名。

9. 9选择“超文本标记语言文件”确保括号内有“html”。选择“html”后单击“保存”

10. 10在Web浏览器中测试HTML文件。在web浏览器中打开网页。进入顶部菜单栏上的“跑步”。单击它并选择“在Chrome中启动”或系统中安装的任何浏览器。本文使用谷歌浏览器进行测试。您可能在Notepad++中安装了其他浏览器。你可以选择你最喜欢的浏览器。另一个选项是，您可以单击屏幕底部任务栏上的WampServer图标，然后选择“Localhost”你应该在那里看到你的目录，然后点击索引文件。

11. 11单击图片下方的按钮测试脚本。
12. 12你的最后一页。你的网页应该用你在开始时输入文本文件的信息刷新。花和标题应替换为新标题“哦哦！黄色的花去哪里了？”

方法2方法2/2：代码解释

1. 1车身部分。HTML的主体有“div”部分和一个按钮。本节将用于显示从服务器返回的信息。如果单击该按钮，它将调用名为“loadXMLDoc（）”的函数&书信电报；！DOCTYPE html&gt&书信电报；html&gt&书信电报；头&gt&书信电报；标题&gt；我的第一个Ajax程序&lt/标题&gt&lt/头&gt&书信电报；body style=“文本对齐：居中；”&gt&lt--下面是一幅测试Ajax程序的图片--&gt&书信电报；div id=“myImage”&gt&书信电报；h2&gt；点击下面的按钮使花消失&lt/h2&gt&书信电报；img src=“MyPicture.png”width=“500px”height=“300px”title=“Yellow Flower”alt=“黄色花朵的图像”/&gt&lt/部门&gt&书信电报；br/&gt&lt--这里有一个按钮--&gt&书信电报；button type=“button”onclick=“loadXMLDoc（）”&gt；点击这里使图片消失&lt/按钮&gt&lt/车身&gt&lt/html&gt；

2. 2头部。HTML文件的头部分有一个脚本标记，其中包含“loadXMLDoc（）”函数&书信电报；头&gt&书信电报；标题&gt；我的第一个Ajax程序&lt/标题&gt&lt--将Ajax代码放在下面--&gt&书信电报；脚本&gt；函数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&amp；xmlhttp.status==200）{document.getElementById（“myImage”）.innerHTML=xmlhttp.responseText；}xmlhttp。打开（“GET”，“ajax data.txt”，true）；xmlhttp。send（）；}&lt/脚本&gt&lt--脚本结束--&gt&lt/头&gt；

3. 3更多解释。Ajax最重要的是XMLHttpRequest对象。它用于与服务器交换数据，所有现代浏览器都支持该对象。创建XMLHttpRequest（）对象的语法是variable=new XMLHttpRequest（）；但同时，创建使用ActiveX对象的旧版本Internet Explorer（IE5和IE6）的语法是variable=new ActiveXObject（“Microsoft.XMLHTTP”）；。为了处理所有现代浏览器，它需要检查浏览器是否支持XMLHttpRequest对象。如果是，它将创建一个XMLHttpRequest对象。如果没有，它将为其创建一个ActiveX对象。然后它会向服务器发送请求。将使用名为“open（）”和“send（）”的XMLHttpRequest对象的方法。xmlhttp。打开（“GET”，“ajax_info.txt”，true）；xmlhttp。发送（）；。

• 另一个预览结果的选项是，你可以打开你最喜欢的浏览器，在网址栏中输入“localhost/ProgramInAjax”来显示网页。如果您将HTML文件命名为“index.HTML”，您应该能够看到该网页
• 在工作中更频繁地保存html文件。同时按Ctrl键和S键可以为窗口用户节省更多时间。
• 确保将保存的HTML文件添加到图像和数据文本文件所在的位置。
• 命名文件时，在代码中添加这些名称时区分大小写。例如，“myImage”不同于“myImage”或“myImage”