利用Ajax实现MVC模式
1）实现View层
创建index.jsp页，在其中放置一个用于收集用户输入会员名和密码的表单。
并将存放在该表单单元格的ID属性设置为login
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> 利用Ajax实现MVC模式</title> <link href="Css/style.css" rel="stylesheet"> <script language="javascript" src="JS/fun.js"></script> </head> <body> <table width="793" height="829" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bg.jpg"> <tr> <td valign="top"><table width="100%" height="309" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="3%" height="206"></td> <td width="20%"></td> <td width="77%"></td> </tr> <tr> <td height="103"></td> <td valign="top" id="login"> <form name="form1" action="" onSubmit="checkU(form1);return false"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="24">会员名 <input name="username" type="text" class="txt_grey" id="username" size="16"></td> </tr> <tr> <td height="24">密码 <input name="PWD" type="password" class="txt_grey" id="PWD" size="16" onKeydown="if(event.keyCode==13) form1.submit();"></td> </tr> <tr> <td height="31"> <input name="Button" type="button" class="btn_grey" value="注册"> <input name="Submit2" type="submit" class="btn_grey" value="登录"> <input name="Submit3" type="reset" class="btn_grey" value="重置"></td> </tr> </table> </form> </td> <td></td> </tr> </table></td> </tr> </table> </body> </html>
编写javascript文件fun.js ，用于通过XMLHttpResult对象以一部方式发送请求并通过XMLHttpRequest对象的onreadystatechange属性监听更新数据，然后更具实际情况显示赶回的结果
/**
* Ajax框架
*/
var http_request = false;
function createRequest(url) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml'); //设置MIME类别
}
} else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert("不能创建XMLHttpRequest对象实例！");
return false;
}
http_request.onreadystatechange = getResult; //调用返回结果处理函数
http_request.open('POST',url,true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var formData ="";
var elem = "";
for(var i=0;i<form1.elements.length;i++){
element = form1.elements[i];
if(formData != ''){
formData += '&';
}
formData += element.name+"="+element.value;
}
http_request.send(formData);
}
function getResult() {
if (http_request.readyState == 4) { // 判断请求状态
if (http_request.status == 200) { // 请求成功，开始处理返回结果
deal(http_request.responseText); //调用deal()方法处理返回结果
} else { //请求页面有错误
alert("您所请求的页面有错误！");
}
}
}
function deal(result){
if(result=="err"){
alert("您输入的会员名称或密码错误，请重新输入！");
}else{
login.innerHTML=result;
}
}
//表单验证
function checkU(myform){
if(myform.username.value==""){
alert("请输入会员名!");myform.username.focus();return false;
}
if(myform.PWD.value==""){
alert("请输入密码!");myform.PWD.focus();return false;
}
createRequest("loginservlet");
}
2）实现control层
创建一个类LoginServlet，该类继承HttpServlet类，在其中编写doGet()和doPost()方法，用于调用Model层中的编写check()方法
package com.xhd;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
String username=new String(request.getParameter("username").getBytes("iso-8859-1"),"utf-8"); //此处需要进行转码，否则将产生中文乱码
String pwd=new String(request.getParameter("PWD").getBytes("iso-8859-1"),"utf-8");
DealModel dealModel=new DealModel();
String result=dealModel.check(username,pwd);
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
System.out.println("返回结果："+result);
PrintWriter out = response.getWriter();
out.print(result);
out.flush();
out.close();
}
public void doPost(HttpServletRequest request,IOException {
doGet(request,response);
}
}
3）创建web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>com.xhd.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/loginservlet</url-pattern>
</servlet-mapping>
</web-app>
4)实现Model层
创建一个类DealModel,在其中编写用于验证会员身份的方法check().
package com.xhd;
public class DealModel {
public String check(String username,String pwd){
String result="";
System.out.println(username);
if(username.equals("mr")){
if(pwd.equals("mrsoft")){
result="登录成功！<br>当前登录会员：<br>"+username;
}else{
result="err";
}
}else{
result="err";
}
return result;
}
}
原文链接：https://www.f2er.com/ajax/164742.html
