我用一个简单的用户名验证的例子来谈一谈我对Ajax的了解:
这个例子用到了两个JSP和一个JS,我没有用后台来验证,因为原理是一样的.
1.用户注册表单页:ajaxCheckUser.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax检测用户名</title>
<script type="text/javascript" src="../js/ajaxCheckUser.js"></script>
</head>
<body>
<form action="">
用户名：<input type="text" id="username" onblur="checkUserAjax();"/><br/>
<div id="msg"></div>
密 码：<input type="password" id="password"/><br/>
Email：<input type="text" id="email"/><br/>
<input type="button" id="submit" value="submit" />
<input type="button" id="reset" value="reset" />
</form>
</body>
</html>
2.用于说明Ajax技术的基本原理的JS文件:ajaxCheckUser.js
//当输入框失去焦点时触发些函数
function checkUserAjax(){
//第一步:创建XMLHttpRequest对象
var xhr = createXmlHttpRequest() ;
//第二步:建立对服务器的调用
/**
* open(method,url,asynch)方法和属性介绍
* 1.XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。
* 2.method：请求类型，类似 "GET"或"POST"的字符串。
* 若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。
* 若需要向服务器发送数据，用POST。
* 3.url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
* 在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。
* 如果对每个请求的响应不同，这就会带来不好的结果。把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免浏览器缓存结果。
* 例如:var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
* 4.asynch：表示请求是否要异步传输，默认值为true(异步)。
* 指定true，在读取后面的脚本之前，不需要等待服务器的相应。
* 指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。
*/
var username = document.getElementById("username").value ;//获得输入的用户名
xhr.open("post","checkUser.jsp?username="+username,true) ;
/**
* setRequestHeader()方法和属性介绍
* 1.当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。
* 首部信息用来声明一个请求是 GET 还是 POST
* 2.Ajax 请求中，发送首部信息的工作可以由 setRequestHeader完成
* 3.参数header： 首部的名字; 参数value：首部的值。
* 4.如果用 POST 请求向服务器发送数据，需要将 "Content-type" 的首部设置为 "application/x-www-form-urlencoded".它会告知服务器正在发送数据，并且数据已经符合URL编码了。
* 5.该方法必须在open()之后才能调用
*/
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")//如果发送方式为POST时,需要设置首部信息 ;
//第三步:向服务器发送请求
/**
* send(data)方法和属性介绍
* 1.open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令
* 2.data：将要传递给服务器的字符串
* 3.若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：xhr.send(null);
* 4.当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.
*/
xhr.send(null) ;
//第四步:接收服务器的处理结果
/**
* 用 XMLHttpRequest 的方法可向服务器发送请求。在 Ajax 处理过程中，XMLHttpRequest 的如下属性可被服务器更改：
* 1.readyState:
* 该属性表示Ajax请求的当前状态。它的值用数字代表:
* (1).0 代表未初始化。 还没有调用 open 方法
* (2).1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
* (3).2 代表已加载完毕。send 已被调用。请求已经开始
* (4).3 代表交互中。服务器正在发送响应
* (5).4 代表完成。响应发送完毕
* 每次 readyState 值的改变，都会触发 readystatechange 事件。
* 如果把 onreadystatechange 事件处理函数赋给一个函数，那么每次 readyState 值的改变都会引发该函数的执行。
* readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4
* 2.status:
* 服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。
* 常用状态码及其含义：
* (1).404 没找到页面(not found)
* (2).403 禁止访问(forbidden)
* (3).500 内部服务器出错(internal service error)
* (4).200 一切正常(ok)
* (5).304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
* 在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，可以确保服务器是否已发送了一个成功的响应
* 3.responseText:
* 该属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。
* 当 readyState 属性值变成 4 时, responseText 属性才可用，表明 Ajax 请求已经结束。
* 4.responseXML:
* 如果服务器返回的是 XML， 那么数据将储存在 responseXML 属性中。
* 只用服务器发送了带有正确首部信息的数据时， responseXML 属性才是可用的。 MIME 类型必须为 text/xml
*/
//指定响应处理函数
xhr.onreadystatechange = function(){
//对象的状态为4表示已完成
if(xhr.readyState==4){
//成功返回200,没有修改返回304
if(xhr.status==200||xhr.status==304){
//开始处理信息
//alert(xhr.responseText) ;
document.getElementById("msg").innerHTML = xhr.responseText ;
}
}
}
}
/**
* 创建XMLHttpRequest实例(兼容IE和Firefox等浏览器)
*/
function createXmlHttpRequest(){
var xmlhttp = null;
try{
//适用的浏览器Firefox, Opera 8.0+, Safari
xmlhttp=new XMLHttpRequest();
}catch(e){
//IEIE7.0以下的浏览器以ActiveX组件的方式来创建XMLHttpRequest对象
var MSXML =
['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var n = 0; n < MSXML.length; n ++){
try{
//根据MSXML数组循环获得支持ActiveX插件的IE版本号,如果抛出异常,那么继续判断下一个否则产生XMLHttpRequest对象跳出循环
xmlhttp = new ActiveXObject(MSXML[n]);
break;
}catch(e){}}
}
return xmlhttp;
}
3.用于处理显示结果的JSP文件:checkUser.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String username = request.getParameter("username") ;
String msg = "" ;
if(username!=null){
if("admin".equals(username)){
msg = "用户名已经存在" ;
}else{
msg = "用户名可以使用" ;
}
}else{
username = "" ;
}
out.print(msg) ;
%>
以上就OK了,我也是为了学习ExtJS所以才看了看Ajax,现在我把我的学习笔记贴上了,供大家参考,同时给予指正.
如果在后台想往前台传XML格式的结果,那么可以在上面的JS文件中加入这个方法.并且修改返回结果的JSP文件.具体如下:
ajaxCheckUser.js文件增加函数如下:
//适用于返回结果为XML格式
function checkUserAjaxXML(){
//第一步:创建XMLHttpRequest对象
var xhr = createXmlHttpRequest() ;
//第二步:建立对服务器的调用
xhr.open("post","checkUserXML.jsp",true) ;
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")//如果发送方式为POST时,需要设置首部信息 ;
//第三步:向服务器发送请求
var username = document.getElementById("username").value ;//获得输入的用户名
xhr.send("username="+username) ;
//第四步:接收服务器的处理结果
//指定响应处理函数
xhr.onreadystatechange = function(){
//对象的状态为4表示已完成
if(xhr.readyState==4){
//成功返回200,没有修改返回304
if(xhr.status==200||xhr.status==304){
//开始处理信息
//document.getElementById("msg").innerHTML = xhr.responseText ;
//此处用XML专有的方式接收
var xmlResult = xhr.responseXML ;
/*
第一种拆分XML的方法 start
var root = xmlResult.documentElement ;//获得XML的根节点
var codeNode = root.firstChild ;//获得Code节点
var msgNode = root.lastChild ;//获得Msg节点
if(codeNode.firstChild.nodeValue){
document.getElementById("msg").innerHTML = lastNode.msgNode.nodeValue ;
}
第一种拆分XML的方法 end
*/
//第二种拆分XML的方法DOM start
var codeNode = xmlResult.getElementsByTagName("code")[0] ;//获得code节点
var msgNode = xmlResult.getElementsByTagName("msg")[0] ;//获得msg节点
if(codeNode.firstChild.nodeValue){
document.getElementById("msg").innerHTML = msgNode.firstChild.nodeValue ;
}
//第二种拆分XML的方法DOM end
}
}
}
}
注意:此处的下面部分,已经做了修改.
xhr.open("post","checkUserXML.jsp",true) ;
接收方式也改为.
var xmlResult = xhr.responseXML ;
之后重新建立一个checkUserXML.jsp文件,用于返回XML格式的结果.代码如下:
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%><?xml version="1.0" encoding="UTF-8"?>
<%
String username = request.getParameter("username") ;
String msg = "" ;
int code = 0 ;
if(username!=null){
if("admin".equals(username)){
msg = "用户名已经存在" ;
code = 0 ;
}else{
msg = "用户名可以使用" ;
code = 1 ;
}
}else{
username = "" ;
}
//out.print(msg) ;
%><result><code><%=code%></code><msg><%=msg%></msg></result>
注意 :
1.<?xml version="1.0" encoding="UTF-8"?>这个XML首部分,必须追加到脚本末尾,不能有回车,不然会出现意想不到的结果.... ....
2.contentType="text/xml; charset=UTF-8"中已经由原来的text/html改为text/xml了.如果不改为xml会很麻烦.
如果想在后台往回传JSON格式的内容,那么请在ajaxCheckUser.js文件中增加下面这个函数:
//适用于返回结果为JSON格式
function checkUserAjaxJSON(){
//第一步:创建XMLHttpRequest对象
var xhr = createXmlHttpRequest() ;
//第二步:建立对服务器的调用
xhr.open("post","checkUserJSON.jsp",true) ;
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")//如果发送方式为POST时,需要设置首部信息 ;
//第三步:向服务器发送请求
var username = document.getElementById("username").value ;//获得输入的用户名
xhr.send("username="+username) ;
//第四步:接收服务器的处理结果
//指定响应处理函数
xhr.onreadystatechange = function(){
//对象的状态为4表示已完成
if(xhr.readyState==4){
//成功返回200,没有修改返回304
if(xhr.status==200||xhr.status==304){
//开始处理信息
var xmlResult = xhr.responseText ;
var msgJson = eval("("+xmlResult+")") ;//注意此处必须写"("和")",目的是先解析xmlResult的内容,再将其转换
if(msgJson){
document.getElementById("msg").innerHTML = msgJson.msg ;
if(msgJson.code==1){
//如果用户名已经存在那么将光标重新定位
document.getElementById("msg").focus ;
}
}
}
}
}
}
checkUserJSON.jsp文件内容如下:
<%@ page language="java" contentType="text/json; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String username = request.getParameter("username") ;
String msg = "" ;
int code = 0 ;
if(username!=null){
if("admin".equals(username)){
msg = "用户名已经存在" ;
code = 0 ;
}else{
msg = "用户名可以使用" ;
code = 1 ;
}
}else{
username = "" ;
}
//out.print(msg) ;
%>{"code":"<%=code %>","msg":"<%=msg %>"}
注意 :需要将contentType="text/html; charset=UTF-8"中的text/html改为text/json.
在后台Action中可以用request.getParameter("参数名称") ; 方法获取。
其他的没啥了,请做试验... ...
当然,我已经通过试验了.
刚才有个哥们第一时间给我指出了错误,说我这个不是原理是步骤,我也是比较赞同的,呵呵.不过我还属于菜鸟,刚开始接触Ajax,所以还得大家多多指教啊.呵呵,我自己认为Ajax就是异步刷新的代名词吧,且是局部刷新,呵呵.
相关推荐
**Ajax技术基本应用** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它的核心是利用JavaScript与服务器进行异步数据交换，通过XML或者JSON等格式传输数据，...
总结，ASP.NET中的AJAX技术结合了服务器端的强大功能和客户端的交互性，极大地提升了用户体验。通过学习和实践表单验证和级联菜单等实例，开发者可以更好地理解和掌握AJAX在ASP.NET中的应用，为Web应用程序带来更...
### 一、Ajax基本原理 1. **异步通信**：Ajax的核心特性就是异步，它通过JavaScript创建XMLHttpRequest对象，向服务器发送请求，同时用户可以继续在页面上进行其他操作。 2. **局部更新**：Ajax请求返回的数据可以...
**Ajax（Asynchronous JavaScript and XML）技术是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量...不过，理解其基本原理和流程对于任何前端开发者来说仍然至关重要。
Ajax的基本原理包括以下几个关键组成部分： 1. **异步通信**：Ajax的关键特性是异步性，这意味着用户可以继续与页面交互，而后台数据请求和处理不会阻塞用户界面。通过XMLHttpRequest对象，JavaScript可以在后台与...
#### 一、什么是Ajax技术？ Ajax（Asynchronous JavaScript and XML，异步JavaScript与XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页...
首先，了解AJAX的基本原理是至关重要的。AJAX通过XMLHttpRequest对象实现异步通信，它可以在后台与服务器进行通信，而无需刷新整个页面。JavaScript负责触发请求、处理响应以及更新DOM（文档对象模型）来更新页面...
### Ajax底层原理及使用方式详解 ...以上就是关于Ajax的基本原理、使用方式以及一些面试中可能会遇到的问题。掌握这些知识不仅能够帮助开发者更好地利用Ajax提升网站性能，也能在面试时展现出扎实的技术功底。
在这个主题“ASP.NET AJAX基本原理2”中，我们将深入探讨ASP.NET AJAX的核心组件以及如何使用HoverMenu控件。 ASP.NET AJAX的核心组件包括： 1. **ScriptManager**：这个服务器控件是ASP.NET AJAX的基础，它负责...
**AJAX技术原理** AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它的核心是XMLHttpRequest对象，它允许JavaScript在后台与服务器进行通信，实现页面的...
本文将深入讲解AJAX的基本原理、使用方法以及与XML的联合应用。 一、AJAX基本原理 AJAX的核心是JavaScript对象XMLHttpRequest，它允许在后台与服务器进行通信，而不会中断用户的交互。通过创建XMLHttpRequest对象...
综上所述，学习Ajax需要理解其基本原理、使用XMLHttpRequest对象进行异步请求，处理各种数据格式，并考虑浏览器兼容性和其他挑战。通过熟练掌握Ajax，开发者可以构建更加高效、用户友好的Web应用。
AJAX（Asynchronous JavaScript and XML）分页技术是一种在网页不刷新的情况下，通过JavaScript与服务器进行异步数据交互...但无论采用何种技术，了解AJAX分页的基本原理和实现方式，对于任何Web开发者来说都是有益的。
**Ajax的基本原理** Ajax的核心是XMLHttpRequest对象，它允许JavaScript在后台与服务器进行通信，而无需用户感知。当用户在页面上执行某些操作时，如点击按钮，JavaScript会创建一个XMLHttpRequest实例，通过它向...
### Web开发技术之Ajax工作原理 #### 一、引言 在现代Web开发领域中，Ajax（Asynchronous JavaScript and XML...理解其基本原理有助于开发者更好地掌握Ajax技术的应用场景，从而构建出更加高效、用户友好的Web应用。
Ajax的基本工作原理 Ajax的核心是JavaScript对象XMLHttpRequest，它在用户与服务器之间建立了一个无形的连接，使得页面可以发送和接收数据而不需重新加载。一个典型的Ajax请求包含以下步骤： 1. **创建...
实验五主要涵盖了AJAX技术的运用以及JSP验证码的开发，这两个知识点对于前端开发者来说是至关重要的。AJAX，即Asynchronous JavaScript and XML（异步JavaScript和XML），它允许网页在不重新加载整个页面的情况下与...
**Ajax开发原理简略** Ajax（Asynchronous ...总之，Ajax技术通过异步数据交换和局部更新，极大地提升了Web应用的交互性和效率。理解其工作原理并熟练运用Ajax控件，可以帮助开发者构建更加流畅、高效的Web应用。
**一、Ajax 基本原理** 1. **创建 XMLHttpRequest 对象**：这是 Ajax 的核心，它是浏览器提供的一个内置对象，用于与服务器建立通信连接。 2. **打开连接**：使用 XMLHttpRequest 对象的 `open()` 方法，指定请求...