js 加载jsp

JavaScript013

js 加载jsp,第1张

jQuery用 Ajax 做起来非常简单:$('#area_id').load('xxx.jsp')

把 xxx.jsp 页面的数据加载进来,然后把数据插入 id 为 area_id 的标签内

如果没有使用jQuery,那么就请找找标准 Ajax 写法,那个代码很长我就不贴了。。。

java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码。所以加载执行顺序是是java>jsp>js。

2. js在jsp中的加载顺序

页面上的js代码时html代码的一部分,所以页面加载的时候是由上而下加载。所以js加载的顺序也就是页面中<script>标签出 现的顺序。<script>标签里面的或者是引入的外部js文件的执行顺序都是其语句出现的顺序,其中js执行的过程也是页面装载的一部分。

2.1 在js脚本中定义的全局变量和函数,都可以在后面的脚本中调用。变量的调用,必须是前面已经声明了的,否则变量返回的值是undefined。同一段脚本中,函数定义可以出现在函数的调用后面;若函数的定义和调用在两个脚本段中,函数调用在函数定义之前就会报函数未定义错误。

2.2 js中出现ajax的异步加载

由于ajax的异步加载可能会导致语句的执行顺序并不是按照语句的出现顺序来执行。下面以我做任务时遇到的问题为例:

在页面初始加载的时候需要向jsp发送请求来获得该页面所需的数据,在ajax成功函数中,对data的操作所需时间过长,就会导致在ajax函数 外面的confirm与loadTree比data操作后面的语句先执行。最终在loadTree中使用data的值得时候就为空,此时全局变量 openTab_Id就为空。

2.3控制js执行顺序

js中不能直接调用jsp,要获取数据可以通过ajax接口异步获取,然后在jsp上展示。

function validate() {

//获取表单提交的内容

var idField = document.getElementById("userName")

//访问validate.do这个servlet,同时把获取的表单内容idField加入url字符串,以便传递给validate.do

var url = "validate.do?id=" + escape(idField.value)

//创建一个XMLHttpRequest对象req

if(window.XMLHttpRequest) {

//IE7, Firefox, Opera支持

req = new XMLHttpRequest()

}else if(window.ActiveXObject) {

//IE5,IE6支持

req = new ActiveXObject("Microsoft.XMLHTTP")

}

/*

open(String method,String url, boolean )函数有3个参数

method参数指定向servlet发送请求所使用的方法,有GET,POST等

boolean值指定是否异步,true为使用,false为不使用。

我们使用异步才能体会到Ajax强大的异步功能。

*/

req.open("GET", url, true)

//onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态

req.onreadystatechange = callback

//send函数发送请求

req.send(null)

}

function callback() {

if(req.readyState == 4 &&req.status == 200) {

var check = req.responseText

show (check)

}

}

function show(str) {

if(str == "OK") {

var show = "<font color='green'>恭喜!!用户名可用!</font>"

document.getElementById("info").innerHTML = show

}

else if( str == "NO") {

var show = "<font color='red'>对不起,用户名不可用!!请重新输入!</font>"

document.getElementById("info").innerHTML = show

}

}