（一）AJAX基本介绍和简单实例01

发布时间：2020-12-16 02:07:32 所属栏目：百科来源：网络整理

导读：AJAX技术基础 AJAX简介 AJAX即“ A synchronous J avascript A nd X ML ”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异

AJAX技术基础

AJAX简介

AJAX即“AsynchronousJavascriptAndXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

很多初学者都以为AJAX是一门是一种新的编程语言，其实它只是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

AJAX基本原理

从图中我们可以看出，在客户端的用户界面通过Javascript引用Ajax引擎，Ajax引擎调用HttpRequest对象（已经被Javascript封装，直接声明即可！）访问WEB服务器，WEB服务器将获得的数据结果生成XML的形式返回至页面前端，并生成对应的HTML+CSS。

Ajax实例01

Demo01.html文件内容如下

<html>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<head>
<scripttype="text/javascript">
functionloadXMLDoc1()
{
//声明一个对象
varxmlhttp;
//解决浏览器兼容问题
if(window.XMLHttpRequest)
{
//IE7+,Firefox,Chrome,Opera,Safari版本的浏览器使用
xmlhttp=newXMLHttpRequest();
}
else
{
//IE6,IE5浏览器使用
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
//xmlhttp对象的onreadystatechange是此对象的成员。每当readyState属性改变时，就会调用该函数。
xmlhttp.onreadystatechange=function()
{
/*
xmlhttp.readyState的值有5个,从0到4发生变化。
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成，且响应已就绪
*/
/*
xmlhttp.status的值一般有两个：
200:"OK"
404:未找到页面
*/
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
/*
将对应的元素的值改为xmlhttp.responseText
responseText：获得字符串形式的响应数据。
responseXML：获得XML形式的响应数据。
*/
document.getElementById("myDiv1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","./Demo01.php",true);
xmlhttp.send();
}

functionloadXMLDoc2()
{
//声明一个对象
varxmlhttp;
//解决浏览器兼容问题
if(window.XMLHttpRequest)
{
//IE7+,从0到4发生变化。
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成，且响应已就绪
*/
/*
xmlhttp.status的值一般有两个：
200:"OK"
404:未找到页面
*/

if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
/*
将对应的元素的值改为xmlhttp.responseText
responseText：获得字符串形式的响应数据。
responseXML：获得XML形式的响应数据。
*/
vartxt="";
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("author");
for(i=0;i<x.length;i++)
{
txt=txt+x[i].childNodes[0].nodeValue+"<br/>";
}
alert(x);
document.getElementById("myDiv2").innerHTML=txt;
}
}
xmlhttp.open("GET","./Demo01.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX实例Demo01</h2>
<buttontype="button"onclick="loadXMLDoc1()">请求数据,返回形式为字符串！</button>
<divid="myDiv1"></div>
<buttontype="button"onclick="loadXMLDoc2()">请求数据,返回形式为XML文件的内容！</button>
<divid="myDiv2"></div>
</body>
</html>

Demo01.php的内容

<?php
echo“我是获取到的数据！”;
?>

Demo01.xml的内容

<?xmlversion="1.0"encoding="utf-8"?>
<bookstore>
<bookcategory="children">
<titlelang="en">HarryPotter</title>
<author>JK.Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<bookcategory="cooking">
<titlelang="en">EverydayItalian</title>
<author>GiadaDeLaurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<bookcategory="web"cover="paperback">
<titlelang="en">LearningXML</title>
<author>ErikT.Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<bookcategory="web">
<titlelang="en">XQueryKickStart</title>
<author>JamesMcGovern</author>
<author>PerBothner</author>
<author>KurtCagle</author>
<author>JamesLinn</author>
<author>VaidyanathanNagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>

提示：为了您的方便，我上传了本次实例的附件，您也可以下载试验！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!