Ajax.js ajax是通过流的方式处理页面请求
var createAjax = function(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
try{
ajax = new XMLHttpRequest();
}catch(e2){
alert("请换掉你的浏览器");
}
}
return ajax;
}
/* 判断用户名 */
document.getElementById("username").onblur = function(){
var username = this.value;
var span = document.getElementById("myspan");
if(username.length==0){
span.innerHTML="用户名不能为空";
}else{
var ajax = createAjax();
var method = "POST";
var url="${pageContext.request.contextPath }/AjaxServlet?time="+new Date().getTime();
ajax.open(method,url);
/* 设置请求头,ajax默认是get提交方式 */
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
username= encodeURI(username);
/*请求参数*/
var content = "username=" + username;
ajax.send(content);
/* ---------------------------- */
ajax.onreadystatechange = function(){
if(ajax.readyState==4 && ajax.status == 200){
var valueSrc = ajax.responseText;
var img = document.createElement("img");
img.src = valueSrc;
img.style.width="12px";
img.style.height="12px";
span.innerHTML="";
span.appendChild(img);
}
}
}
}
在servlet中的处理
String username = request.getParameter("username"); username = new String(username.getBytes("ISO-8859-1"), "utf-8"); System.out.println(username); if ("ss".equals(username)) { response.getWriter().write("image/MsgError.gif"); } else { if (username.length() > 0) { response.getWriter().write("image/MsgSent.gif"); } }
步骤详情
<h1>Ajax实例</h1> <div id="myAjax">ajax将要获取的内容</div> <button id="myBtn" onclick="btnClick()">获取内容</button> <script type="text/javascript"> function btnClick(){ //获取ajax var ajax = createAjax(); //ajax的请求方式 var method = "POST"; //ajax向服务器(action)发送请求 var url = "${pageContext.request.contextPath }/ajaxActiont_start.action?time=" + new Date().getTime(); //ajax拼接字符串,准备请求,请求方式+请求地址 ajax.open(method, url); /* 设置请求头,ajax默认是get提交方式 */ //前一个参数文本内容,后一个参数文本内容字符集,基本上是会自动给你转换为utf-8 ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //这里实际上是把表单中数据转为utf-8的一种方法 //username = encodeURI(username); /*请求参数*/ //这里的参数就是类似于键值对的方式提交,准确的说就是.properties文件中的键值对所以是如下形式传参数 var content = "username=" + "1"; //发送请求 ajax.send(content); /* ---------------------------- */ //当请求状态改变的时候 ajax.onreadystatechange = function(){ //动态状态码为4并且浏览器状态为200的时候 if(ajax.readyState==4 && ajax.status == 200){ //获取返回的文本流数据 var value = ajax.responseText; //获取到指定div var text = document.getElementById("myAjax"); //给指定div中插入数据 text.innerHTML = value; } } } </script>
jQuery中ajax应用
$.ajax({type : "POST", url : "${pageContext.request.contextPath}/suspicious/suspectParty?time="+ new Date().getTime(), data : { partyid : $pno }, success : function(data) { //alert(data.rst.id); var ccd = ''; if (data.rst.partyClassCd == 'C') { ccd = '对公当事人'; } if (data.rst.partyClassCd == 'I') { ccd = '个人当事人'; } $("#ptytb").append("<tr id='ptytr'><td>" + "<input id='rdo' type='radio' onclick='rdocl()'/>" + "</td>" + "<td>" + data.rst.partyId + "</td>" + "<td>" + data.rst.partyChnName + "</td>" + "<td>" + data.rst.cardNo + "</td>" + "<td>" + "36" + "</td>" + "<td>" + ccd + "</td></tr>"); } }); });