1.ajax 对象的属性说明（常用的）

　　（1）open(method,url,boolean);创建请求，method :填请求类型（get post）,url :请求的地址，

　　　　　　boolean：true代表同步（即ajax操作过程中仍然可以操作html）

　　（2）send("name="+name); 发送请求，通过属性名“name” 获取属性的值：name;

　 　(3)setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8"); 设置post请求的http 消息头

　　 (4)onreadystatechange(); 发生任何状态变化时 事件控制对象， 通常绑定回调函数

　　　(5) readyState : 请求的状态
　　　　0: 尚未初始化 创建open时
　　　　1：正在发送  send
　　　　2：请求完成 
　　　　3.请求成功    正在响应
　　　　4：数据接收成功 响应完毕

　　(6) status 服务器返回的响应值
　　　　200：请求成功
　　　　202：请求被接收，但是没完成处理
　　　　400：错误请求
　　　　404：资源找不到
　　　　500：内部服务器错误

　　(7) responseText 服务器返回的文本

　　(8) responseXML 返回的xml，可以当作DOM处理

　　(9) abort()；取消请求

　　(10) getAllResponseHeader(); 获取响应的所有HTTP头对象

　　(11) getResponseHeader("指定"); 获取指定的HTTP头对象

　　　　注：为解决 get请求缺省值中文乱码问题，在TOMcat conf 下的 server 的xml文件中的如下位置 添加URLEncoding="utf-8";

2. 获取ajax 对象

　　将 获取ajax 对象的方法封装在 js文件中，方便调用。同时可以在js文件自定义函数方法

　　　　

  // 创建 ajax.js  文件    

function getxhr(){
    var xhr;
    if(window.XMLHttpRequest){  // 获取ajax 对象，使用if-else语句是为了避免浏览器不兼容现象
        xhr=new window.XMLHttpRequest();
    }else{
        xhr=new ActionXObject('Microsoft.XMLHttp');
    }
    return xhr;
}

function $(id){ // 自定义获取id对象的函数
    return document.getElementById(id);
}

function $V(id){ // 自定义获取id对象文本值 的函数
    return $(id).value;
}

3.使用ajax 将页面数据提交到服务器Servlet

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习阿贾克斯</title>
    <script type="text/javascript" src="lib/pra_ajax.js"></script>
    <script type="text/javascript">

        function getUsername(){// 使用ajax 检测用户名长度是否规范
            var xhr=getxhr();
            var str;
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    var str=xhr.responseText;
                $("usernamespan").innerHTML=str;
                  }
                    }
            var username=$V("username");
            xhr.open("get","getUsername.do?username="+username,true);
            xhr.send(null);
        }

        function postPassword(){// 使用ajax 检测两次密码是否相同
            var xhr=getxhr();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    var str=xhr.responseText;
                $("password2span").innerHTML=str;

                }
            }

            xhr.open("post","postPassword.do",true);
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");
            var password1=$("password1").value;
            var password2=$("password2").value;
            xhr.send("password1="+password1+"&password2="+password2);
        }

    </script>

</head>
<body>
    <form action="#">
    <fieldset>
        <legend style="font-stretch: semi-condensed;">注册</legend>
    <table>
        <tr>
            <td>账号：</td>
            <td><input type="text" name="username" onchange="getUsername()" id="username"></td>
            <td><span id="usernamespan"></span></td>
        </tr>

        <tr>
            <td>密码：</td>
            <td><input type="text" id="password1"></td>
            <td><span id="password1span"></span></td>
        </tr>

        <tr>
            <td>确认密码：</td>
            <td><input type="text" id="password2" onchange="postPassword()" ></td>
            <td><span id="password2span"></span></td>
        </tr>
    </table>
        <input type="submit" value="注册" >
    </fieldset>
    </form>
</body>
</html>

4. 服务器Servlet将页面提交的数据进行处理

　　

package Ajax;

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 Action extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public Action() {
        super();
        // TODO Auto-generated constructor stub
    }

	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter pw=response.getWriter();
		String path=request.getRequestURI(); // 获取URI
                         // 获取 地址的关键字段来匹配相应的方法
		String action=path.substring(path.lastIndexOf("/")+1,path.lastIndexOf(".")); 

		if("getUsername".equals(action)) { // 对用户名进行判断
			String username=request.getParameter("username");
			System.out.println(username);
			if(username.length()<4||username.length()>8) {// 判断条件，响应页面

				pw.println("<font color=red>用户名长度不合适</font>");
			}else {
				pw.println("<font color=green>用户名长度太他妈的合适聊，给你点个赞！！！</font>");
			}
		}

		if("postPassword".equals(action)) {// 对密码进行判断
			String password2=request.getParameter("password2");
			String password1=request.getParameter("password1");
			System.out.println(password1);
			System.out.println(password2);
			if(password1.equals(password2)) {
				pw.println("<font color=green>两次的密码相同！！！！！！！！！！！</font>");
			}else {
				pw.println("<font color=red>密码不同</font>");
			}
		}

	}
}

　　end;

AJAX（阿贾克斯）的简单应用的更多相关文章

  1. ajax代码及简单封装

    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); ...

  2. Ajax学习(1)-简单ajax案例

    1.什么是Ajax? Ajax是Asynchronous JavaScript and XML 的缩写,即异步的Javascript和XML. 可以使用Ajax在不加载整个网页的情况下更新部分网页信息 ...

  3. 轻松搞定Ajax（分享下自己封装ajax函数，其实Ajax使用很简单，难是难在你得到数据后来怎样去使用这些数据）

    hey,guys!今天我们一起讨论下ajax吧!此文只适合有一定ajax基础,但还是模糊状态的同志,当然高手也可以略过~~~ 一.概念 Ajax(Asynchronous Javascript + X ...

  4. 原生Ajax用法——一个简单的实例

    Ajax全名(Asynchronous(异步) JavaScript and XML )是可以实现局部刷新的 在讲AJax之前我们先用简单的实例说一下同步和异步这个概念 /*异步的概念(就是当领导有一 ...

  5. 毕业设计---json,Struts,ajax以及JQuery简单案例

    <!-- Struts2的xml文件配置 --><struts> <package name="default" namespace="/& ...

  6. jQuery下ajax事件的简单分析

    昨天写了一篇关于监视页面动态生成元素问题的文章,引起了一些小小的争议,不过我从中学到了很多.文章在这,<jQuery下实现等待指定元素加载完毕>当然 动态生成的节点元素 分很多种情况,这里 ...

  7. 树结构ztree的 ajax交互的简单使用

    今天做前端页面要用到树结构,用了第三方插件ztree,搞了好久不过终于弄出来了,, 一点小心得.(用的版本 V3 ) 首先看下载的文件结构: 一:将要用到的CSS 和 JS 拷贝到工程中,我这里在工程 ...

  8. 关于Ajax实现的简单示例

    一.代码示例 关于Ajax的基本概念(包括XMLHttpRequest对象及其相关方法属性)移步这里(w3school中文版)学习了解. <!doctype html> <html ...

  9. AJAX封装数据处理简单操作

    数据的封装处理主要展现在JS中,在页面里面引入封装的JS, "js/ajax.js" 简单封装将get和post方法都写入,get的方法和post的方法依然需要严格区分,包括typ ...

  10. 分页ajax+springmvc的简单实现

    页面部分源码: <li class="paginItem"><a href="javascript:getNewsList(2);">2 ...

随机推荐

  1. iOS Framework制作流程

    1.新建工程选择iOS —> Cocoa Touch Framework 2.进入创建好的工程删除掉自带的工程同名头文件 3.添加所需文件 4.TARGETS —> Build Setti ...

  2. phpstudy后门漏洞复现php5.2

    前段时间phpstudy被人发现某些版本存在后门,许多人就这样被当作肉鸡长达两年之久 后门隐藏在程序自带的php的php_xmlrpc.dll模块 影响的版本:phpstudy2016和2018 在H ...

  3. eshop4-tomcat 安装

    1. 下载tomcat 7 2. 解压缩 注意:是否使用sudo 权限执行请根据具体环境来决定 3. sudo vim /etc/profile 在最下方增加 export CATALINA_HOME ...

  4. MyBatis: No MyBatis mapper was found in '[xx.mapper]' package. Please check your configuration

    在应用入口加入@MapperScan("com.IBM.XXXXX.dao")

  5. Ubuntu19.04的安装过程详解以及操作系统初始化配置

    Ubuntu19.04的安装过程详解以及操作系统初始化配置                                                                       ...

  6. Idea--使用Idea调试设置

    参考 https://blog.csdn.net/yyjava/article/details/81453748 关闭一些Idea默认设置,否则懵逼到爆炸.. 1.关闭集合类视图 2.关闭watch视 ...

  7. Flink Window窗口机制

    总览 Window 是flink处理无限流的核心,Windows将流拆分为有限大小的"桶",我们可以在其上应用计算. Flink 认为 Batch 是 Streaming 的一个特 ...

  8. 设置虚拟机静态ip

    1.查看本机ip.网关.dns服务器 IPv4地址:本机局域网ip 路由器:网关地址 nameserver:局域网内部dns服务器 其他dns服务器 移动.电信和联通:114.114.114.114 ...

  9. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记：SSM（Spring+Spring MVC+MyBatis）框架整合搭建详细步骤

    因为 Spring MVC 是 Spring 框架中的一个子模块,所以 Spring 与 SpringMVC 之间不存在整合的问题.实际上,SSM 框架的整合只涉及 Spring 与 MyBatis ...

  10. spring源码 AutowireCapableBeanFactory接口

    对于想要拥有自动装配能力,并且想把这种能力暴露给外部引用的BeanFactory类需要实现此接口.正常情况下,不要使用此接口应该更倾向于使用BeanFactory或者ListableBeanFacto ...