对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>
分享到：
相关推荐
在本篇“AJAX学习总结（一）--基于jQuery第一个实例”中，我们将探讨如何使用jQuery库实现异步JavaScript和XML（AJAX）技术。AJAX允许我们在不刷新整个页面的情况下，更新网页的部分内容，从而提供更流畅的用户体验...
IBM作为全球领先的IT企业，提供了丰富的Ajax学习资源，帮助开发者深入理解并掌握Ajax的核心原理和应用。这篇文档集是IBM官方对Ajax技术的详细解读，对于初学者来说，无疑是一份宝贵的入门资料。 Ajax的核心概念在于...
### AJAX学习笔记详解 #### 一、引言 在当今快速发展的互联网技术中，异步JavaScript和XML（AJAX）已成为构建动态Web应用的关键技术之一。通过本篇笔记，我们将深入探讨AJAX的核心概念和技术要点，并针对实际开发...
1. **AJAX在教学网站中的应用研究**：这篇论文可能探讨了如何利用AJAX技术改善教学网站的用户体验，例如通过异步加载课程资料、实时更新学生进度或提供交互式学习工具，提高教学效率和学生参与度。 2. **基于AJAX...
在本篇Java相关课程系列笔记之十一中，我们聚焦于Ajax的学习，这是一项在Web开发中广泛使用的技术，用于创建动态、无刷新的用户界面。Ajax全称Asynchronous JavaScript and XML，即异步JavaScript和XML，它允许网页...
本篇文章将深入探讨jQuery中的Ajax学习，主要聚焦于如何使用jQuery进行异步数据交换，以及它如何帮助开发者创建更高效、更流畅的用户界面。 首先，jQuery的`$.ajax()`函数是实现Ajax的核心方法。它允许我们发送HTTP...
总之，这份Ajax学习资料包是一个完整的教学体系，从基础知识到实战技巧，再到性能优化和安全防范，覆盖了Ajax开发的方方面面。只要你按部就班地学习并实践，相信你很快就能熟练掌握Ajax技术，为你的Web应用带来更...
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
### Ajax学习网址备忘录知识点概述 #### 一、什么是Ajax？ Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换来实现...
[asp ajax dll]IT学习网20081127 IT学习网 请先运行regdll.bat注册itstudyajax20081127.dll组件，然后才能正常访问页面。 注册一个用户就可以发表文章。 管理登陆页面可通过主页index.asp底部“2006”链接访问。...
【ASP.NET与AJAX简介】 ...总之，"asp.net+ajax网站开发典型实例（第一篇）"是学习ASP.NET和AJAX结合应用的良好起点，通过实例化的学习，能有效提升开发者的技能，并为后续的Web开发工作打下坚实基础。
总结，这个经典AJAX简单入门篇结合PDF教程和源码实例，将帮助你快速理解并掌握AJAX的基本用法和DOM操作，是学习Web开发中AJAX技术的宝贵资源。通过学习，你将能够构建更高效、更互动的网页应用程序。
在“AJAX学习总结（四）---解决缓存问题”这篇博文中，作者LC2586详细讲解了这些方法，并可能通过实例展示了如何在代码中应用它们。通过阅读和实践，你可以更深入地掌握AJAX缓存管理技巧，提升你的Web应用质量。
本篇文章将深入探讨Ajax的核心概念、工作原理以及在实际开发中的应用。 ### 1. Ajax的核心概念 - **异步通信**：Ajax的最大特点在于其异步性，即浏览器在发送请求后不会等待服务器的响应，而是继续执行其他任务，...
本人几年的学习摘要。对想学习ASP.NET的朋友很有帮助。 里面知识面广，内容都是我在实践中遇到的困难的解决方法，和我自己的实现片段代码。现在与大家分享。
本篇文章将详细探讨AJAX的原理、应用及其在"自动提示信息"和"用户名检测"两个案例中的实践。** ### AJAX 原理 AJAX的核心是JavaScript对象XMLHttpRequest，它允许JavaScript向服务器发送异步HTTP请求。当用户触发...
本教程包含了23个不同的Ajax实例，非常适合初学者进行学习和实践。 1. **P46_Color**: 这个实例可能涉及到使用Ajax动态改变网页元素的颜色。通过发送请求到服务器获取颜色数据，然后使用JavaScript更新元素样式，...
1. **基础篇**：理解Ajax的基本概念，熟悉XMLHttpRequest对象的使用，学习GET和POST请求。 2. **进阶篇**：掌握异步请求的处理，了解JSON数据格式，学习错误处理和跨域问题。 3. **实战篇**：通过实际项目练习，如...
这篇学习记录主要探讨了AJAX的基本原理、使用方法以及常见应用。 **一、AJAX基础** 1. **异步通信**：AJAX的核心是XMLHttpRequest对象，它使得JavaScript能够向服务器发送异步请求，即在用户与页面交互时，后台...