ajax初步

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

导读：Ajax并非是一种新的技术么日式由早期已经存在的XMlHttpRequest，Javasctipt，HTML,CSS,XML组成的。 (1)XmlHttpRequest：XmlHttpRequest对象允许浏览器通过它与Web服务器进行通讯。这个对象为页面提供了客户端和服务器的一部通信功能。在Internet Explore中

Ajax并非是一种新的技术么日式由早期已经存在的XMlHttpRequest，Javasctipt，HTML,CSS,XML组成的。
(1)XmlHttpRequest：XmlHttpRequest对象允许浏览器通过它与Web服务器进行通讯。这个对象为页面提供了客户端和服务
器的一部通信功能。在Internet Explore中，这个功能是由MSXML ActiveX组件提供：在FireFox中，这个功能由一个叫做
XmlHttpRequest的对象来提供。在编写Ajax代码时，需要判断浏览器类型，并为不同的浏览器提供不同的XmlHttpRequest
调用代码。
(2)JavaScript：所有浏览器都支持JavaScript脚本语言。Ajax使用JavaScript脚本语言来操作XmlHttpRequest对象，操作
DOM和CSS等。
(3)DHTML/DOM：能正确显示Ajax应用程序页面的浏览器必须要能通过DOM动态更新HTML元素。
(4)使用XML解析技术，虽然也能使用HTML或其他格式在客户端和服务器之间传递数据，不过XML显然是标准的做法，并且使
用XML容易结构化和层次化。
XmlHttpRequest可以说是Ajax核心中的核心，通过它可以和服务器通信。例如下面是一个异步获取服务器时间：
index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>XmlHttpRequest Demo</title>
<script type ="text/javascript" language ="javascript" >
var req;
//创建xmlhttprequest
function creatReq()
{
var url="ajaxserver.jsp";
if(window.XMLHttpRequest)
{
req=new XMLHttpRequest();
}
else
{
alert("你的浏览器不支持，换一个吧！");
}
if(req)
{
req.open("GET",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步)
req.send(null);
req.onreadystatechange = callback; //指定回调函数

}
}

function callback()
{
if(req.readyState==4) //请求状态为4表示成功
{
if(req.status==200)
{
Dispaly(); //显示数据
}
else
{
alert("服务端返回状态" + req.statusText);
}
}
else
{
document .getElementById ("myTime").innerHTML ="数据加载中";
}
}

function Dispaly()
{
document.getElementById ("myTime").innerHTML =req.responseText;
}

</script>
</head>
<body>
<div id="myTime"></div>

<input id="Button1" type="button" value="时间" onclick ="creatReq();"/>
</body>
</html>

index.jsp中的JavaScript代码将向服务器发送请求，并获取ajaxserver.jsp发出的数据显示在index.jsp页面。
ajaxserver.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'ajaxserver.jsp' starting page</title>
</head>

<body>
hello,ajax
<%
Date d = new Date();
out.println(d.toLocaleString());
%>
</body>

</html>

（编辑：李大同）

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