前言

先前在入门AJAX这篇文章中，简单描述了AJAX一些基础。其实这里也是基础的使用，通过这个例子在结合之前学习的方法再好好理解运用一番。

实例

html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A simple AJAX example</title> </head>
<body>
<h1>简单的ajax例子</h1>
<p id="obj">加载作者<a id='link' href="data.xml" title="View the author." οnclick="Author('data.xml'); this.style.display='none'; return false">作者是谁！</a><span id="author" style="color: olive; font-weight: bolder"></span></p>
</body>
</html>

js

<script type="text/javascript">function Author(file){ //创建xmlHttpRequest对象var xmlObj = null; if(window.XMLHttpRequest){ xmlObj = new XMLHttpRequest(); } else if(window.ActiveXObject){ xmlObj = new ActiveXObject("Microsoft.XMLHTTP"); } else { return; } //当加载xml成功，则将指定的元素值赋值为xml的内容xmlObj.onreadystatechange = function(){ if(xmlObj.readyState == 4){ updateObj('author',  xmlObj.responseXML.getElementsByTagName('name')[0].firstChild.data); } } //加载xml文件xmlObj.open ('GET', file, true); //发送请求的数据xmlObj.send (''); } //将xml的数据赋值到相应的子标签下function updateObj(obj, data){ var textNode = document.createTextNode(data); document.getElementById(obj).appendChild(textNode); } </script>

效果

方法

open()：建立到服务器的新请求。

在该实例中，就是open（"get",url,true）.就是使用get的方法来打开data.xml这个路径下的文件。我这里使用的就是根目录，所以直接就是文件名，true表示的就是表示这个链接是异步的；false表示就是同步的。也就是发出请求后需要等待服务器响应才能继续下面的工作，如果最后一个参数为true，那么用户可以在一边进行对服务器的请求，一边处理其他的工作。

send()：向服务器发送请求.

实例中，send并没有对参数进行设置，仅仅给出了空字符，当然这里还可以使用null值。

abort()：退出当前请求。

readyState：提供当前 HTML的就绪状态。

0：请求未初始化（还没有调用 open()）。

1：请求已经建立，但是还没有发送（还没有调用 send()）。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。

4：响应已完成；您可以获取并使用服务器的响应了。

在实例中，我们可以看到。有这样一个判断当readystate属性为4的时候，我们就执行下面的代码。这里4表示就是响应已经完成。这样一个readystate就是用来表示

responseText：服务器返回的请求响应文本。

总结

虽然这是一个简单基础的例子，但是对于ajax的使用都比较全面。在ajax中，大致的使用就是：

1.获取需要的数据。

2.拿到连接到服务器的 URL。

3.打开url。

4.在服务器返回请求后的处理，这里就是在readystate的值等于4的时候进行的处理。

简单的小例子，还是好好学习一下。后面还是需要对这里的东西更加熟练的使用。

转载于:https://www.cnblogs.com/guziming/p/4232704.html

AJAX实例演示加载xml相关推荐

ajax异步查询demo,ASP.NET中AJAX的异步加载（Demo演示）
此次的demo是一个页面,页面上有两行字,然后后面用ajax,使用一个下拉框去替换第一行文字[/code] 第一个是被替换的网页 var xmlhttprequest; function create ...
PHP+Ajax点击加载更多列表数据实例
PHP+Ajax点击加载更多列表数据实例一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过"更多"按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的 ...
FLASH加载XML相册
刚刚制作完简单的flash相册后在网上搜索下,又找到一个分页相册,目前还没全部弄明白,先转载上来,再学习吧. 关于FLASH加载XML相册,在网上百度一下.一大把源码.但大多都没给出完整教程.刚好最近 ...
php ajax 下载图片路径,JavaScript_批量下载对路网图片并生成html的实现方法，对路使用ajax实现异步加载内容 - phpStudy...
批量下载对路网图片并生成html的实现方法对路使用ajax实现异步加载内容,在它的js代码中找到了相关代码 type : 'POST', url : '/index.php/request/new_ ...
Caffe2教程实例，加载预训练模型
Caffe2教程实例,加载预训练模型概述本教程使用模型库中的预训练模型squeezenet 里分类我们自己的图片.我们需要提供要分类图片的路径或者URL信息作为输入.了解ImageNet对象代码可 ...
Spring中加载xml配置文件的六种方式
Spring中加载xml配置文件的六种方式博客分类: Spring&EJB XMLSpringWebBeanBlog 因为目前正在从事一个项目,项目中一个需求就是所有的功能都是插件的形式装 ...
Spring 3.1 –从数据库加载XML配置的属性
Spring使通过其PropertyPlaceholderConfigurer和(Spring 3.1之前)PropertySourcesPlaceholderConfigurer(Spring 3. ...
ajax加载进度百分比,在ajax中显示加载百分比的进度条，php
您好我正在使用ajax加载数据库内容.我想显示加载或图像的总百分比.在ajax中显示加载百分比的进度条,php 这是我的脚本 function name1(str) { if (str.length= ...
spring加载xml配置文件
spring 中加载xml配置文件的方式 spring 中加载xml配置文件的方式,好像有3种, xml是最常见的spring 应用系统配置源. Spring中的几种容器都支持使用xml装配bean, ...

AJAX实例演示加载xml

前言

实例

html

js

效果

方法

总结

AJAX实例演示加载xml相关推荐

最新文章

热门文章