【Ajax技术】准备AJAX服务器端和客户端环境

前端之家收集整理的这篇文章主要介绍了【Ajax技术】准备AJAX服务器端和客户端环境前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.准备Ajax服务器端环境

我们将使用jQuery来实现Ajax的效果
jQuery,顾名思议,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。

使用Ajax技术服务器端要做的四步
1.取参数
2.检查参数是否有问题
3.校验操作
4.和传统应用不同之处,这一步需要将用户感兴趣的数据(data)返回给页面端,而不是将新的页面(view)返回给用户。(MDC_vs_MVC)

I.
首先建立工程AjaxTrain。
在src里创建一个Servlet,作为Ajax的服务端(目前是用传统的方式去传输数据,我们将逐步改写,直至完全实现Ajax的异步刷新):

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServer extends HttpServlet {


	 protected void doPost(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse) throws ServletException,IOException {
	        doGet(httpServletRequest,httpServletResponse);
	 }


	 protected void doGet(HttpServletRequest httpServletRequest,IOException {
	        try{


	            httpServletResponse.setContentType("text/html;charset=utf-8");
	            PrintWriter out = httpServletResponse.getWriter();


	            //inte用来记录验证次数
	            Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
	            int temp = 0;
	            if (inte == null) {
	                temp = 1;
	            } else {
	                temp = inte.intValue() + 1;
	            }
	            httpServletRequest.getSession().setAttribute("total",temp);


	            //1.取参数
	            String old = httpServletRequest.getParameter("name");
	     
	            String name = URLDecoder.decode(old,"UTF-8");


	            //2.检查参数是否有问题
	            if(old == null || old.length() == 0){
	                out.println("用户名不能为空");
	            } else{
			//3.数据校验
	                if(name.equals("hpu")){
	                    //4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新的页面发送给用户
	                    //写法没有变化,本质发生了改变
	                    out.println("用户名[" + name + "]已经存在,请使用其他用户名," + temp);
	                } else{
	                    out.println("用户名[" + name + "]尚未存在,可以使用该用户名注册," + temp);
	                }
	            }
	        } catch(Exception e){
	            e.printStackTrace();
	       } 
	 }


}

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>
    <servlet-name>AjaxServer</servlet-name>
    <servlet-class>AjaxServer</servlet-class>
  </servlet>


  <servlet-mapping>
    <servlet-name>AjaxServer</servlet-name>
    <url-pattern>/AjaxServer</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
</web-app>

与服务对应的静态页面:index.html
<html>
<head>
  <title></title>
</head>
<body>
    校验用户名是否存在的例子<br/>
    <form action="AjaxServer" method="GET">
        用户名:<input type="text" name="name"/>
        <input type="submit" value="检验"/>
    </form>
</body>
</html>

实现了一个传统的校验模式,经测试成功。

下面写Ajax的客户端的代码(html+javascript)

2.准备Ajax客户端环境

此篇总结Ajax的客户端环境搭建:

首先在上一篇创建的java web工程的webRoot下创建静态页面ajax.html:
(首先别忘记下载Javascript的jquery类库:jquery.js。我下载的是jquery-1.8.0.js)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>用户校验ajax实例</title>
    <script type="text/javascript" src="js/verify.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
  </head>
  
  <body>
    <h1> 用户校验ajax实例</h1><br>
    请输入用户名:<br/>
    <!-- ajax不需要使用表单进行数据提交,因此不用写表单标签 -->
    
    <!-- ajax不需要name属性,只需要一个id的属性 -->
    <input type="text" id="username"/>
    <input type="button" value="校验" onclick="verify()"/>
    <!-- 这个div用于存放服务器返回的信息,开始为空 -->
    <!-- id属性定义是为了利用dom的方式找到某一个节点,进行操作 -->
    <div id="result">
    
    </div>
    <!-- div和span的值的差异,div的内容独占行,span的内容和其他内容相处良好 -->
    
  </body>
</html>

verify.js:
//定义用户名校验的方法
function verify(){
	alert("哎呦!别点人家~");
}

测试:点击ajax.html页面的校验按钮之后,弹出对话框,测试成功。

接下来就要开始实现真正的Ajax了。

详情关注下一篇总结

转载请注明出处:http://www.jb51.cc/article/p-ymljsezf-bay.html

原文链接:https://www.f2er.com/ajax/163087.html

猜你在找的Ajax相关文章