Ajax操作步骤
1.创建XMLHttpRequest对象
除老版本ie(IE5，IE5.5，IE6)外，其他现代浏览器都内建XMLHttpRequest对象。
创建XMLHttpRequest对象前先检查浏览器支持哪种对象创建方式。
var xmlHttp = false;//用于存储XMLHttpRequest对象
var createXmlHttp = function(){
//针对老版本ie(IE5，IE5.5，IE6)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e2) {
xmlHttp = false;
}
}
//针对IE7+, Firefox, Chrome, Opera, Safari
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
//不支持的浏览器
if(xmlHttp==undefined||xmlHttp==null){
alert("error!");
}
};
2.设置要发送到服务器的请求，调用XMLHttpRequest对象的open()方法。
open(method,url,async);
参数解释
method:为请求的类型：GET或POST；
GET方式提交参数列表存放在url中，大小限制在1kb下，同时参数将被显示在地址栏中，并被浏览器缓存。
所以为了避免得到浏览器缓存的结果，使用GET方式时想URL添加唯一标识，日期或随机数；
例如：xmlHttp.open("GET","test.jsp?t="+Math.random(),true);
使用GET方式需要处理参数中文问题，url = encodeURL(url);
服务器端处理参数乱码问题：value = new String(value.getBytes("iso-8859-1"),"UTF-8");
POST方式提交时浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，
而不是作为URL地址的参数进行传递，使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。
使用POST方式时需要设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.
通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")
例如：xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
url:为请求的路径地址可以为任何类型的文件，发送方式为GET时后接参数列表如：url ? name='name' & pwd='pwd';
其中url指向路径为Servlet时 该url为Servlet路径名不要'/'；
async:true或false?;
async设置为true时表示允许发送异步请求，用于AJAX，默认，需要设置回调函数；
设置为true时JS无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本；
当响应就绪后对响应进行处理。
async为false时JS会等到服务器响应就绪后才继续执行，一般不推荐使用，不需要设置回调函数。
3.执行发送请求，调用XMLHttpRequest对象的send()方法；
send(string);
string:仅用于post方式提交，发送要提交到服务器的参数列表的等信息；
get情况下使用send(null),null表示firefox和ie都支持发送；
4.利用xmlHttp的onreadystatechange事件来监视xmlHttp.readyState的状态，每次改变都调用回调函数；
例如：xmlHttp.onreadystatechange = callBack;
XMLHttpRequest对象的三个重要属性：
onreadystatechange：存储函数，每当readyState属性改变时，就会调用该函数；
readyState:存有XMLHttpRequest的状态，从0到4变化；
0：请求为初始化；
1：服务器连接已建立；
2：请求已接受；
3：请求处理中；
4：请求已完成，且响应已就绪。
status:xmlHttpRequest的交互状态，其值有;
200：请求成功；
202：请求被接受，但未被完成；
404：请求资源未找到；
500：内部服务器错误。
5.在回调函数中处理返回值；
如果要接受来自服务器的响应，使用XMLHttpRequest对象的responseText或responseXML属性；
login.jsp
<html>
<head>
<script type="text/javascript" src="ajaxConf.js"></script>
<title>login</title>
</head>
<body>
<form name="" action="" >
用户名：<input type="text" name="userName" id="userName"><div id="show"></div><br/>
<input type="button" value="Click" onclick="check()">
</form>
</body>
</html>
ajaxConf.js
var xmlHttp = false;
var createXmlHttp = function(){
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
if(xmlHttp==undefined||xmlHttp==null){
alert("error!");
}
};
var check = function(){
createXmlHttp();
alert(xmlHttp);
var userName = document.getElementById("userName");
var url = "checkAjax?userName="+userName+"&btn=check";
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = callBack;
};
var callBack = function(){
if (xmlHttp.readyState == 4) {
alert(xmlHttp.status);
if (xmlHttp.status == 200) {
var message = xmlHttp.responseText;
var show = document.getElementById("show");
show.innerHTML = message;
}
}
};
checkAjax.java
public class checkAjax extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String userName = request.getParameter("userName");
String btn = request.getParameter("btn");
if(btn!=null && btn.equals("check"))
if(userName==null) {
out.print("用户名不能为空");
} else {
if (userName.equals("wangjue"))
out.print("用户名"+userName+"已被使用");
else
out.print("用户名可以使用");
}
out.close();
}
}
谙an谧
- 浏览: 9604 次
- 性别:
- 来自: 北京
-
相关推荐
对于Ajax初学者，可以参考以下资源： 1. W3School的Ajax教程（https://www.w3school.com.cn/ajax/） 2. MDN Web文档的XMLHttpRequest（https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest） 3. 实战...
**Ajax初学入门教程** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得用户可以与网页进行更流畅、更快捷的交互，提高了网页应用的用户体验...
本教程是为Ajax初学者准备的入门资料，将帮助你快速理解并掌握Ajax的基本概念和应用。 Ajax的核心组件包括JavaScript、XMLHttpRequest对象、DOM（Document Object Model）、CSS和JSON。首先，JavaScript是驱动Ajax...
**Ajax初学者快速入门** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得用户可以与网页进行更流畅的交互，提升了用户体验。Ajax的核心是...
**Ajax 初学者教程** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页内容的技术。这种技术的核心是利用JavaScript与服务器进行异步通信，通过XML或其他格式的...
Ajax.基础教程。包含Ajax的基本知识，是Ajax初学者必备的教材。
本文主要针对AJAX初学者，介绍其基本概念、工作原理和实践步骤。 首先，理解AJAX的核心在于XMLHttpRequest对象。这个对象是JavaScript中的一个内置对象，它提供了与服务器进行异步通信的能力。在所有现代浏览器中，...
### AJAX初学必读知识点详解 #### 一、引言 在现代Web开发领域中，随着Web 2.0的兴起和发展，AJAX作为一种核心技术，极大地提升了用户体验与网站的交互能力。本文档基于《征服Ajax：Web2.0开发技术详解》的部分...
【标题】中的“[聊天留言]适合ajax初学者的简易聊天程序 v1.0_simplechat（ASP.NET源码）.rar”表明这是一个基于Ajax技术的简单聊天程序，主要用于教学目的，适用于初学者学习Ajax和ASP.NET框架。这个程序的版本为...
在这个"ASP.NET源码——[聊天留言]适合ajax初学者的简易聊天程序.zip"中，我们有一个特别针对AJAX初学者设计的简单聊天应用。 AJAX，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需...
这个压缩包"ASP.NET-[聊天留言]适合ajax初学者的简易聊天程序v1.0.zip"显然包含了一个专为AJAX（Asynchronous JavaScript and XML）初学者设计的简单聊天程序。AJAX是一种在无需刷新整个网页的情况下，能够更新部分...
适合ajax初学者的简易聊天程序 v1.0 适合ajax初学者的简易聊天程序 v1.0
Ajax.基础教程。包含Ajax相关的基础知识，是Ajax初学者必备的教材之一。
Ajax初学者教程 API（清晰版）
**Ajax（Asynchronous JavaScript and XML）技术是Web开发中的一个重要组成部分，它允许在...这个"ajax初学必读"资料集将带你一步步走进Ajax的世界，通过实践和理解，你将能够自如地运用Ajax构建高效、流畅的Web应用。
本AjaxDEMO适合初学者学习，旨在提供一个基础的实践平台，帮助理解Ajax的工作原理及其在实际开发中的应用。** ### 1. Ajax基础知识 Ajax的核心是JavaScript对象XMLHttpRequest，它允许在后台与服务器端通信。当...
对于初学者来说，Ajax.dll是一个很好的起点。在VS2005（Visual Studio 2005）中，你可以轻松地集成这个库，创建出具有Ajax功能的应用。它降低了Ajax技术的学习曲线，使得开发者可以快速上手，专注于业务逻辑的实现，...
适合ajax初学者的简易聊天程序_网站在线聊天留言源码
本教程将引导初学者深入理解AJAX（异步JavaScript和XML）技术，通过一个实际的在线聊天程序项目来阐述其核心概念和应用。这个简易聊天程序的实现不依赖任何第三方的AJAX库，如jQuery或Prototype，而是完全依靠原生的...