|
从一个用户名校验的例子来认识Ajax的基础应用
首先创建html事件触发端的代码
<!--ajax方式下不需要使用表单来进行数据提交，因此不用写表单标签-->
<!--ajax方式不需要name属性，需要一个id的属性-->
<inputtype="text"id="username"/>
"button"value="校验"onclick="verify()"/>
<!--这个div用于存放服务器段返回的信息，开始为空-->
<!--id属性定义是为了利用dom的方式找到某一个节点，进行操作-->
<div"result"></div>
当我们得到服务器端返回的数据后动态的填充到div标记中
然后，服务器端我们创建一个Servlet命名为AJAXServer,用于校验客户端的数据并返回，实际上客户端的数据是由我们的AJAX引擎接收到并传给服务器端，然后再由AJAX引擎接收到服务器端的数据，返回给客户端动态加载的，这是一个异步的机制，这是后话，我们先来创建我们的Servlet
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
publicclassAJAXServerextendsHttpServlet{
protectedvoiddoPost(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse)throwsServletException,IOException {
doGet(httpServletRequest,httpServletResponse);
}
voiddoGet(HttpServletRequest httpServletRequest,IOException {
try{
httpServletResponse.setContentType("text/html;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();
//1.取参数
String old = httpServletRequest.getParameter("name");
//2.检查参数是否有问题
if(old ==null|| old.length() ==0){
out.println("用户名不能为空");
}else{
String name = URLDecoder.decode(old,"UTF-8");
//3.校验操作,模拟数据并没有真正的取数据库信息，这个不是客户端关心的，客户端只看是不是服务器返回的数据
if(name.equals("jerry")){
//4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面端，而不是将一个新的页面发送给用户
out."用户名["+ name +"]已经存在，请使用其他用户名");
}else{
out."]尚未存在，可以使用该用户名注册 ");
}
}
}catch(Exception e){
e.printStackTrace();
}
}
}
好了，服务器端校验完成，开始创建我们真正的AJAX应用了，来创建我们对应到客户端html中的js文件了，取名为checkUserName，当然我们不能忘了再客户端html文件中引入我们创建的js文件<script"text/javascript"src="jslib/checkUserName.js"></script>
下面我们来具体来创建操作的代码
varxmlhttp;
functionverify(){
//1.使用dom的方式获取文本框中的数据
//document.getElementById("username")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如果<input>
//.value可以获取一个元素节点的value属性值
varuserName = document.getElementById("username").value;
//2.创建XMLHTTPRequest对象
//这是XMLHTTPRequest对象五步使用中最复杂的一步
//需呀针对IE和其它类型的浏览器建立这个对象的不同方式写不同的代码
if(window.XMLHttpRequest){
//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
xmlhttp =newXMLHttpRequest();
//针对某些特定banben的mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}elseif(window.ActiveXObject){
//针对IE5,IE5.5,IE6(IE7,IE8)
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js数组中
//排在前面的版本较新
varactivexName =["MSXML2.XMLHTTP",255);">"Microsoft.XMLHTTP"];
for(vari=0;i<activexName.length;i++){
try{
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，抛出异常，然后继续循环，继续尝试创建
xmlhttp =newActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
//确认XMLHttpRequest对象创建成功
if(!xmlhttp){
alert("XMLHttpRequest对象创建失败");
return;
}else{
alert(xmlhttp);
}
//2.注册回调函数
//注册回调函数时，只需要函数名，不要加括号
//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
xmlhttp.onreadystatechange=callback;
//3.设置链接信息
//第一个参数表示http的请求方式，支持所有http的方式，主要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也会在URL中
//第三个参数表示采用异步还是同步方式交互，true表示异步
xmlhttp.open("GET",255);">"AJAXServer?name="+ userName,true);
//4.发送数据，开始和服务器端进行交互
//同步范式下，send这句话会在服务器端数据回来后才执行完
//异步方式下，send这句话会立即完成执行
xmlhttp.send(null);
// Post请求方式的代码
xmlhttp.open("POST",255);">"AJAXServer",128);">true);
//POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type",255);">"application/x-www-form-urlencoded");
//POST方式发送数据
xmlhttp.send("name="+ userName);
}
//回调函数
functioncallback(){
//5接收响应数据
//判断对象的状态是交互完成
if(xmlhttp.readyState ==4){
//判断http的交互是否成功
if(xmlhttp.status ==200){
//获取服务器端返回的数据
//获取服务器端输出的纯文本数据
varresponseText = xmlhttp.responseText;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素节点
vardivNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = responseText;
}
}
}
好了，AJAX应用的具体步骤代码中都有详细的解释了，一个简单的AJAX的应用完成了，赶快试试吧 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
