ajax初学
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();
}
}
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo