ajax初步

前端之家收集整理的这篇文章主要介绍了ajax初步前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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>




原文链接:https://www.f2er.com/ajax/163389.html

猜你在找的Ajax相关文章