您的位置：首页 > 其它

基础2.通过Ajax获得servlet数据（最基础）

2017-01-04 21:51 330 查看

案列一：从服务器的得到输出的数据

Jsp界面

<script type="text/javascript" src="test.js"></script>   //引入js中的script语句
<body>
<form action="AjaxServlet">   //这里提交到哪里和下面的和谁连接没啥关系，这里改成AjaxServlet1
<input type="button" value="ok" id="ok">    //下面不变照样能够得到一样结果
</form>
</body>

AjaxServlet界面

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("connection succces");
response.getWriter().print("connection ok");  //这里为什么是write因为下面是responseText
}

test.Js界面

/**
*  Ajax建立与服务器端的连接  接收服务器的请求 处理服务器返回的数据
*      开发步骤：
*         1.创建XMLHttpRequest对象
*         2.打开和服务器的连接
*         3.发送数据
*         4.接收服务器端的响应
*/
/**
* 1.创建XMLHttpRequest 对象
*/
function createXMLHttpRequest() {       //万能模板

var XMLHttpReq;

if (window.XMLHttpRequest) {   // 是Mozilla浏览器

XMLHttpReq = new XMLHttpRequest();
} else if (window.ActiveXObject()) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); //因为ie也会出现不兼容所以抛异常
} catch (e) {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");  //微软的，记住就好
}
}
return XMLHttpReq;
}
//ok按钮点击时触发事件，这里我和之前所想的思维都不一样，因为正常情况window.onload一旦加载下面没有点击onclick，那么该方法不执行，然而后面当你点击按钮时，因为已经加载结束了，按道理来讲就算里面为onclick这个方法也不会执行，因为你在window.onload里面，大方法都没有执行，方法里面的方法是不会执行的，但这里还是触发了时间，这也说明老师说的window.onload除了有加载情况下，还有监听的作用，一点触发事件就会触发该方法，这点要明白，同时如果当你去window.onload=function，这个外层的方法，就算你触发事件也不会有反应，因为 document.getElementById("ok")是要放在方法里，而不是放在外面。

window.onload=function(){       //加载时运行，同时具有监听的作用
document.getElementById("ok").onclick=function(){ //通过按钮触发事件
//1.创建XMLHttpRequest对象
var xmlReq=createXMLHttpRequest();
//2.打开和服务器端的连接
xmlReq.open("GET","AjaxServlet",true);//有GTE和POST方法，中间代表连接路径，true代表异步
//3.发送数据
xmlReq.send(null); //因为采用的是get方法，所以方法为null
//4.接收服务器的响应
xmlReq.onreadystatechange=function(){
if(xmlReq.readyState==4){//判断对象状态是否完成
if(xmlReq.status==200){     //信息已经成功返回
var xmltext =xmlReq.responseText;  //得到AjaxServlet往外输出的数据
alert("data-"+xmltext);  //输出结果：data-connection ok
}
}
}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航