Thread: JavaScript AJAX callback function work only for Spring

Hello

I've checked AJAX call working really well in the Spring Framework.

However it doesn't work for Chrome or Explorer.

Code:

/************ AJAX (request.js   FILE) /

var request = null;
function getRequest()
{
	if(window.ActiveXObject)
	{
		try{
			
			return new ActiveXObject("Msxml12.XMLHTTP");		
		}catch(e){
			try{
				
				return new ActiveXObject("Microsoft.XMLHTTP");		
			}catch(ee){
				return null;
			}
		}
	}else if(window.XMLHTTPRequest){
		
		return new XMLHTTPRequest();
	}else{
		return null;
	}
}

function sendRequest(url,params, callback, method){
	
	request = getRequest();
	
	var httpMethod = method ? method : 'GET';
    
	if(httpMethod!='GET' && httpMethod!='POST')
		httpMethod='GET';
	
	var httpParams = (params == null || params=='') ? null : params;
	
	var httpUrl = url;

	if(httpMethod=='GET' && httpParams !=null)
		httpUrl += "?"+httpParams;
	
	request.onreadystatechange=callback; //error line
	
	request.open(httpMethod,httpUrl, true);
	
	request.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	request.send(httpMethod=='POST'? httpParams : null); //날리는 내용 
	
	//alert(url);
	//alert(params);
}









/**First AJAX CALL FILE(hello.jsp)**/
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<script type="text/javascript" src="${bean.prefix }resources/res/ajax/request.js"></script>

<script type="text/javascript">
	function suggest()
	{
		setTimeout("sendKey()", 500);
		//document.getElementById("****").value=document.frm.sch.value;
	}
	
	
	var last;
	function sendKey() {
		var key = document.getElementById("chk").value;
		//alert(key);
		
		if(key==''){
			last = key;
			hide();
		}else if(last != key){
			last = key;
			
			var params = "infoDTO.id="+encodeURIComponent(key);
			
			sendRequest("${bean.prefix}info/chkexist", params, viewMsg, 'get'); //call request here 
			//alert(params);
		}
		
	}
	
	
	function viewMsg()
	{
		if(request.readyState==4 )
		{
			alert(request.status);
			if(request.status==200)
			{
				
				var arr = request.responseText;
				//alert(arr);
				var res =arr;
				
				
				var list = document.getElementById("list");
				//alert(res);
				show();
				list.innerHTML = res;
				//alert(list);
				
			}else{
				
			}
		}
	}
	
	
	function hide() {
		
		var list = document.getElementById("list");
		list.style.display = "none";
		
	}
	
	
	function show()
	{
		var list = document.getElementById("list");
		list.style.display = "";
	}
	

	
</script>

<style>

	#hellocss{
	
	 padding:0px 0px 0px 70px;
	 
	}

</style>


<table border="0" id="hellocss">
	<tr>
		<td width="600px" align="center"><h3>hello</h3></td>
	</tr>
	
	<c:forEach items="${bean.data }" var="buf" >
	<tr>
		<td align="center">
			<a href="${bean.prefix }pscenter/notice/BoardDetail?pscenterDTO.id=${buf.id }&page=1"> 
			${buf.title } </a>
		</td>
	</tr>
	<tr>
    <td>
    	<img src="${bean.prefix }resources/res/img/line123.png">
    </td>
    </tr>
	</c:forEach>
	<tr>
		<td>
			<img src="${bean.prefix }resources/res/img/introduce.png">
		</td>
	</tr>
	<tr>
		<td>
			<input type="text" name="chk" id="chk" onkeydown="suggest()"> //call method of suggest()
			<div id="list"></div> 
		</td>
	</tr>
</table>

I get these errors with the above code in the Chrome:

Uncaught TypeError: Cannot set property 'onreadystatechange' of null


this is line of the call request
sendRequest("${bean.prefix}info/chkexist", params, viewMsg, 'get');



this is line of error
request.onreadystatechange=callback;


What is wrong? please comment

Thanks.

I would suggest to use jQuery's ajax function to gain maxium browser compatibility, that is why jQuery is created for.

- Stone