当前位置： 移动技术网 > IT编程>开发语言>Jsp > AJAX和JSP混合使用

AJAX和JSP混合使用

2018年12月28日  | 移动技术网IT编程  | 我要评论

首先要知道ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

什么是 ajax ？

ajax = 异步 javascript 和 xml。

ajax 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 ajax）如果需要更新内容，必需重载整个网页面。

ajax工作原理

这里写图片描述

ajax请求

ajax请求是依靠xmlhttprequest对象,因此在请求前先要创建其对象

    var xmlhttp;
    //兼容性写法创建请求实例,ie5 6支持else里面的方法
 if (window.xmlhttprequest){
            xmlhttp = new xmlhttprequest();
        }else {
            xmlhttp = new activexobject("microsoft.xmlhttp");
        }

接着向服务器发送请求
open函数有三个参数,请求方式,请求地址,请求是异步还是同步
send(string)函数有一个参数,只有当请求方式为post的时候,string参数才需要带上

那么get和post的区别呢?
与 post 相比，get 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 post 请求：

 

无法使用缓存文件（更新服务器上的文件或）
向服务器发送大量数据（post 没有数据量限制）
发送包含未知字符的用户输入时，post 比 get 更稳定也更可靠

 

//设置传送方式,地址,以及同步还是异步
        xmlhttp.open("get","test.jsp?value="+escape(value),true);
         xmlhttp.onreadystatechange = callback;//状态改变的时候执行这个函数,用来判断是否请求完毕
        xmlhttp.send();//请求服务器,如果使用post方式,则send里面要带上传递的参数
        //post方式
         /**
         xmlhttp.open("post","test.jsp",true);
         xmlhttp.setrequestheader("content-type","application/x-www-form-urlencoded");
         xmlhttp.send("value="+value);
         */

然后服务器端处理并返回,这个放在实例里面有具体代码

在回调函数callback中设置对返回响应

onreadystatechange 存储函数（或函数名），每当 readystate 属性改变时，就会调用该函数。
readystate 存有 xmlhttprequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status 200: “ok”
404: 未找到页面

相应服务器的类型
responsetext 获得字符串形式的响应数据。
responsexml 获得 xml 形式的响应数据。 这个一般当open里面的url为xml文件的时候用

function callback(){
        //请求完成表示
        if(xmlhttp.readystate ==4 && xmlhttp.status==200){
            //设置相应操作
            }
        }
    }

总体来说就这几个步骤,下面是详细代码

实例

首先创建一个文本框,用于测试用户名,并且添加监听事件onblur,意思是当失去焦点则执行,并在其后面创建个span空标签,用来动态显示信息,表示名称是否被占用

<form action="ajax.jsp" method="post">
	<table>
	<tbody>
		<tr>
		<td><code class="hljs xml"><input id="userid" onblur="checkuser()" type="text" /></code></td>
		</tr>
	</tbody>
	</table>
</form>

接下来是js代码,使用ajax把输入的内容发送到服务器,服务器来检验

var xmlhttp;
    function checkuser(){
        var value = document.getelementbyid("userid").value;
        //兼容性写法创建请求实例,ie5 6支持else里面的方法
        if (window.xmlhttprequest){
            xmlhttp = new xmlhttprequest();
        }else {
            xmlhttp = new activexobject("microsoft.xmlhttp");
        }
        //设置传送方式,地址,以及同步还是异步
        xmlhttp.open("get","test.jsp?value="+escape(value),true);
        xmlhttp.onreadystatechange = callback;//状态改变的时候执行这个函数,用来判断是否请求完毕
        xmlhttp.send();//请求服务器
    }

然后服务器端获得数据后写回

<%
    response.setheader("cache-control","no-store");//http1.1
    response.setheader("pragma","no-cache");//http1.0
    response.setdateheader("expires",0);//禁止在服务器中缓存
    string value = request.getparameter("value");//获取传送过来的参数
    response.getwriter().write(value);//模拟数据写回

%>

客户端再回调函数中处理服务器写回的数据

 /**
     * 回调函数
     */
    function callback(){
        //请求完成表示
        if(xmlhttp.readystate ==4 && xmlhttp.status==200){
            alert(xmlhttp.responsetext);//相应返回的text
//            alert(xmlhttp.responsexml);//相应返回的xml
            if (xmlhttp.responsetext){//这里直接判断不为空,应该根据数据库返回值来进行不同的显示
                var spanid = document.getelementbyid("spanid");
                spanid.innerhtml = "注册成功";
            }
        }
    }

效果就是当输入框失去焦点就立即判断,当然实际判断是要连接数据库的,为了简单就直接打印出来了
这里写图片描述

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网