Ajax工作原理
*2 AJAX工作原理
AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合，包括Javascript、HTML和CSS、DOM、XML和XMLHttpRequest.
服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。 XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。AJAX 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择 HTML（Hypertext Markup Language,使用超文本标记语言）和 CSS（Cascading Style Sheet,级联样式单）标准化呈现； DOM（Document Object Model,文档对象模型）实现动态显示和交互； 使用XMLHttpRequest对象进行异步数据读取 使用JavaScript绑定和处理所有数据而非IE中以XMLHttpRequest对象出现。 2)每种浏览器都内置Ajax引擎对象，但需要通过JS来创建 3)AJAX的缺点： a)浏览器支持不统一 b)无页面刷时，所以浏览器的"前进"和"后退"按钮失效 c)一些浏媒体支持不完善 XMLHttpRequest对象XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。 XMLHttpRequest对象方法 方法 描述 XMLHttpRequest对象属性五个状态码：*3 AJAX开发步骤及详解1)创建ajax_1.html或ajax_1.jsp2)添加事件 3)在事件响应后创建Ajax引擎对象 4)异步发送请求 5)将响应结果放入Ajax引擎对象中 6)从Ajax引擎对象中取得响应结果 7)使用DOM和JS将响应结果动态添加到Html或Jsp面页中 8)对于POST请求，一定要设置请求头，代码如下： xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); 在open()之后，在send()之前 对于GET请求，无需设置请求头 Ajaxtest.jsp<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
</head>
<body>
<div align="center">
<input type="button" id="btu" value="ajax???éa?" />
<hr />
</div>
<script type="text/javascript">
//var btuElement = document.getElementById("btu");
var inputElement = document.getElementsByTagName("input")[0];
inputElement.onclick = function() {
//alert("a");
var xhr = createXHR();
/* window.alert(xhr != null);
xhr.open("get","");
xhr.send("key=value&&key==value"); */
xhr.onreadystatechange=function()
{
if(xhr.readyState==4)
{
if(xhr.status==200)
{
var msg=xhr.responseText;
alert(msg);
// var divElement=document.getElementsByName("Input")[0];
// divElement.innerHTML=msg;
}
}
}
xhr.open("GET","http://127.0.0.1:8080/ajaxTest/servlet/AjaxServlet");
xhr.send(null);
}
function createXHR() {
if(window.ActiveXObject) {
xhr = new ActiveXObject("microsoft.xmlhttp");
}
else {
xhr = new XMLHttpRequest();
}
return xhr;
}
</script>
</body>
</html>
AjaxServlet.javapackage servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
System.out.println("Ajaxservlet:start");
String msg=new Date().toLocaleString();
response.setContentType("text/heml;charset=UTF-8");
response.getWriter().write(msg);
}
}
运行：（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |