对ajax工作原理:
下面这段是来自一个网友的blog:
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起,来看看它的工作原理。
首先,我们先来看看XMLHttpRequest这个对象的属性。
它的属性有:
onreadystatechange每次状态改变所触发事件的事件处理程序。
responseText从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
status Text伴随状态码的字符串信息
readyState对象状态值
0 (未初始化)对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化)对象已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中)已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成)数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
看了上面的一段话我们知道了,ajax的原理。
所以对于ajax开发步骤应该是:
1. 创建对象
2.
打开服务器
3.
发送数据
4.
接受服务器的数据相应。
下面做一个简单例子用get方式的实现和servlet的一个交互:这个是一个index.jsp
<%@
page language="java"import="java.util.*"pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEHTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<scripttype="text/javascript"src="js/fish.js"></script>
</head>
<body>
<inputid="mybutton"type="button"value="加载数据"/>
</body>
</html>
第二个是fish.js
window.onload = function() {
function createXMLHttpRequest() {
var xmlhttp=null;//请求对象
try {//IE浏览器中创建此对象
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {//IE浏览器中创建此对象
xmlhttp =
new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
// Firefox, Chrome, Opera, Safari浏览器中创建此对象
xmlhttp =
new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} catch (e) { alert("浏览器不支持xmlHttpRequest!");}
}
}
return xmlhttp;
}
document.getElementById("mybutton").onclick =function() {
//得到xmlhttprequest对象
var xmlreq=createXMLHttpRequest();
xmlreq.onreadystatechange=function(){//每次状态改变都会调用这个函数
alert(xmlreq.readyState);
alert(xmlreq.status);//如果返回200就说明请求成功了。
}
//打开与服务器的连接
xmlreq.open("get","servlet/MyServlet",true);//在第二个参数后可以跟着一些数据的。
//发送数据
xmlreq.send(null);//如果是get方式那么必须是null
}
}
3servlet代码
package com.fish;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
publicclassMyServlet
extends HttpServlet {
publicvoid doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
System.out.println("**************");
// String a= request.getParameter("fish");
// System.out.println(a);
//
}
}
5.
这个是servlet在xml的配置
<?xmlversion="1.0"encoding="UTF-8"?>
<web-appversion="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<servlet>
<servlet-name>MyServlet</servlet-name>
<servlet-class>com.fish.MyServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MyServlet</servlet-name>
<url-pattern>/servlet/MyServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
分享到:
相关推荐
[asp ajax dll]IT学习网20081127 IT学习网 请先运行regdll.bat注册itstudyajax20081127.dll组件,然后才能正常访问页面。 注册一个用户就可以发表文章。 管理登陆页面可通过主页index.asp底部“2006”链接访问。...
本人几年的学习摘要。对想学习ASP.NET的朋友很有帮助。 里面知识面广,内容都是我在实践中遇到的困难的解决方法,和我自己的实现片段代码。现在与大家分享。
本篇内容主要给大家讲解了Android Webview拦截ajax请求的详细讲解,需要的朋友一起来学习一下。
《Ajax+PHP程序设计实战详解》分为5篇,分别为:PHP基础篇、PHP Web应用篇、Ajax基础开发篇、组合篇和实例篇。内容囊括了PHP开发的基础知识、Ajax开发的基础知识、PHP+Ajax组合开发Web2.0程序和:PHP+Ajax实例程序。...
ASP.NET AJAX入门系列(9):在母版页中使用UpdatePanel 导读:本文简单介绍一下在母版页中使用UpdatePanel控件,翻译自官方文档。 ASP.NET AJAX入门系列(10):Timer控件简单使用 导读:本文主要通过一个简单...
首先,你要对AJAX技术有一个很好的了解,学习关于它的属性和方法,然后开发相应的后台和前端,最后非常希望你能够创建出一个至少能够体面地实现既定功能的可工作的HTTP程序。之后,你可以通过逐步地改进它以达到最终...
python 零基础学习篇
这是一篇针对w3school中关于AJAX内容学习的整理文档。比较全面的包含了w3school中AJAX的大部分的实例。值得收藏!
python 零基础学习篇
python 零基础学习篇
python 零基础学习篇
针对读者的不同学习阶段,共分技术篇、实践篇与部署篇三大部分进行循序渐进地讲解。 本书为高性能Java EE应用开发人员提供一整套实用的主流开发技术,融入了作者多年的高性能Java EE应用开发经验。
在这篇文件里,我将要讨论最基础的GWT,并且展示Java开发人员如何使用GWT来创建一个简单的AJAX应用以从一个远程API获取查询结果并且显示在浏览器上。 介绍Google Web Toolkit(GWT) Google Web Toolkit是一个由Java...
16. extJs 2.0学习笔记(Ajax篇) 38 17. extJs 2.0学习笔记(Ext.data序论篇) 39 18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21....
16. extJs 2.0学习笔记(Ajax篇) 38 17. extJs 2.0学习笔记(Ext.data序论篇) 39 18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21....
通过本书,您将学习到这些框架之间是如何进行协同以满足AJAx应用需求的。本书将为您提供开发ASP.NET AJAX应用所必需的技能和知识。 内容简介 本书以AJAX为核心阐述对象,介绍了它对JavaScript所做的各种扩展,还...
从零开始学习jQuery pdf,第一篇:开天辟地入门篇;第二篇:jQuery最重要的部分——万能的选择器;第三章:管理Jquery包装集;第四章:使用jQuery操作元素的属性与样式;第五篇:事件与事件对象…… 通过一步步的...
学习完这篇教程以后.你会明白想要实现够炫够酷的的ajax效果.你必须要熟练掌握JavaScript Dom 这些技术精通. 刚刚我喝多了,上面的这段话是我在两天前就写好的.我本来想直接睡觉的.但我想试试.是不是在我喝酒...
作者:hopesoft出处:http://www.51ajax.com 一、前言自去年开始,AJAX一下成了关注的技术热点,各种AJAX框架迅速的发展了起来,其中又分为客户端AJAX架构,服务器...作为早期的开源AJAX架构之一,Dojo开始于2004年9月