jsp实现ajax的一个例子

最新推荐文章于 2024-08-12 12:09:40 发布

福瑞得尔

最新推荐文章于 2024-08-12 12:09:40 发布

阅读量2.6k

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/u013190444/article/details/50353180

版权

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），局部提出请求得到服务器响应，并将相应结果显示在客户端，不重新加载整个网页，异步更新！

需要4步：1.获取xmlhttprequest对象，Ajax 的核心是 JavaScript 对象 XMLHttpRequest，这个对象的创建需要考虑浏览器！

2.打开与服务器的连接，其中需要3个参数，分别是：请求方式，请求url，请求是否异步

3.发送请求与请求参数

4.添加监听，根据服务器反应结果做出相应的客户端调整

详细如下：（2个文件）

1.在ajax1.jsp文件中：

//创建XMLHttpRequest，为了考虑浏览器兼容所以写了个方法
function createXMLHttpRequest(){
var xmlHttp ;
try {
xmlHttp = new XMLHttpRequest(); //大部分的浏览器都支持
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//兼容ie6
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //兼容ie5.5,及以下版本
} catch (e) {
alert("浏览器不兼容");
}
}
}
return xmlHttp;
}

//添加事件
window.οnlοad=function(){
var btn = document.getElementById("btn"); //获取按钮
btn.οnclick=function(){ //给按钮添加监听事件

//ajax四部操作---得到服务器响应，并将相应结果显示在客户端
//1.获取xmlhttprequest对象
var xmlHttp = createXMLHttpRequest();

//2.打开与服务器的连接 3个参数：请求方式，请求url，请求是否异步
xmlHttp.open("post","/项目名/AServlet",true);

//!!!!!!! pos请求时，需要设置content-type
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

var uname = document.getElementById("username").value;
//3.发送请求 post请求时，可以传递参数
xmlHttp.send("username="+uname); //get请求没有请求体，这里参数设置为null，不可省略，若省略火狐浏览器可能发送失效

//4.给异步的onreadystatechange事件添加监听
xmlHttp.onreadystatechange=function(){ //当xmlHttp状态发生变化时
//判断状态： 1.xmlHttp的状态为4--响应服务器结束 2.响应状态码是否为200---响应结果是否成功
if(xmlHttp.readyState==4&&xmlHttp.status==200){
var text = xmlHttp.responseText; //获取响应结果
document.getElementById("usererr").innerHTML=text; //将结果显示在指定的位置
}
}
}
}

</script>

<body>

</body>

在文件AServlet的核心代码：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");

String name = request.getParameter("username");

String ss [] = {"tom","张三","jack","李四"}; //假如这是从数据库拿到的数据

System.out.println("从浏览器拿来的数据："+name);
boolean b = true;

for(String s:ss){
if(s.equalsIgnoreCase(name)){
b = true;
break;
}else{
b = false;
}
}

if(b){
response.getWriter().print("已经存在");
}else{
response.getWriter().print("ok");
}
}