Ajax and JavaScript

本文详细介绍了如何使用 AJAX 调用 JSP,并在调用过程中遇到的问题及解决策略,包括将 JS 提取到单独文件、等待内容加载、处理错误消息以及在 JSP 中实现特定功能的优化方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

when we use AJAX to call jsp, then the content in jsp will be composed in current page, but the JS in the jsp file can not be parsed. 

So we need to abstract the JS to a separate file, then include the js file in the HEAD of current page.

you can refer to JS function appendSpecificJS() below.

As you know, AJAX is an Asynchronous call, so we need to wait for some time to get the content. If we want to get the element value in the JSP file, we need to use window.setTimeout(functionName, delay).

 

 

    var xmlhttp = getXMLHttpRequest();

	function getXMLHttpRequest() {
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			return new XMLHttpRequest();
		} else {// code for IE6, IE5
			return new ActiveXObject("Microsoft.XMLHTTP");
		}

	}

	
	function ajaxValueChange(areaName, errMsg, url) {
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4) {				
				if (xmlhttp.status == 200) {
					document.getElementById(areaName).innerHTML = xmlhttp.responseText;
					showHint('');
					appendSpecificJS();
				} else {
					showHint(errMsg);
				}
			}
				
		}
		xmlhttp.open("POST", url, true);
		xmlhttp.send();
}		

function baseAction() {
// ajax call here
ajaxValueChange("specificProduct", 'Failed to load specific Product.', "./specificProduct.jsp?servername=" + servername);


//     var delayInterval = 1000;
//     window.setTimeout(appendSpecificJS, delayInterval);
}

function appendSpecificJS() {

		var head = document.getElementsByTagName('HEAD').item(0);
		var script = document.createElement("script"); 
// <input type="hidden" id="jsfilename" name="jsfilename" value="<%=jsFileName %>" />  in   [specificProduct.jsp] file
		script.src = document.getElementById("jsfilename").value;
		script.type="text/javascript";
		script.charset="utf-8";
		
		
		if (isLoadJS) {
			head.replaceChild(script, oldNode);
		} else {
			head.appendChild(script);
		}
		
		isLoadJS = true;
		oldNode = script;
		
	}

 

You also can put appendSpecificJS(); in the Ajax response successfully segment to avoid use Timer.

 

There are two points we should pay attention to:

1) the JS file path can NOT be under /web-root

2) we should fix the JS function name in sepecific product JS, so the base js can invoke them.

 eg. specificParam() is defined in specific js file. 

To avoid JS error in explorer, when we call specificParam(), we need to add if condition.

 

 

	function baseSave() {
		
		if (isSaved) {
			showHint("This is already saved successfully.");
			
			return;
		}

		clearHint();

		var url = window.document.location.href;
		var pos = url.indexOf("?");
		var params = url.substr(pos);
		

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4) {
				if (xmlhttp.status == 200) {
					showHint(xmlhttp.responseText);
					
					isSaved = true;
					
					loadReport();
				} else {
					isSaved = false;
					
					showHint('Failed to save.');
				}
			} 
		}
		
		var specificParam = '';
		
		if (isLoadJS) {
			
			specificParam = specificParam();
			
		}

		xmlhttp.open("POST", "./persistence.jsp" + params + specificParam, true);
		xmlhttp.send();


	}
  

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值