AJAX（阿贾克斯）的简单应用
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（阿贾克斯）的简单应用的更多相关文章
- ajax代码及简单封装
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); ...
- Ajax学习(1)-简单ajax案例
1.什么是Ajax? Ajax是Asynchronous JavaScript and XML 的缩写,即异步的Javascript和XML. 可以使用Ajax在不加载整个网页的情况下更新部分网页信息 ...
- 轻松搞定Ajax（分享下自己封装ajax函数，其实Ajax使用很简单，难是难在你得到数据后来怎样去使用这些数据）
hey,guys!今天我们一起讨论下ajax吧!此文只适合有一定ajax基础,但还是模糊状态的同志,当然高手也可以略过~~~ 一.概念 Ajax(Asynchronous Javascript + X ...
- 原生Ajax用法——一个简单的实例
Ajax全名(Asynchronous(异步) JavaScript and XML )是可以实现局部刷新的 在讲AJax之前我们先用简单的实例说一下同步和异步这个概念 /*异步的概念(就是当领导有一 ...
- 毕业设计---json,Struts,ajax以及JQuery简单案例
<!-- Struts2的xml文件配置 --><struts> <package name="default" namespace="/& ...
- jQuery下ajax事件的简单分析
昨天写了一篇关于监视页面动态生成元素问题的文章,引起了一些小小的争议,不过我从中学到了很多.文章在这,<jQuery下实现等待指定元素加载完毕>当然 动态生成的节点元素 分很多种情况,这里 ...
- 树结构ztree的 ajax交互的简单使用
今天做前端页面要用到树结构,用了第三方插件ztree,搞了好久不过终于弄出来了,, 一点小心得.(用的版本 V3 ) 首先看下载的文件结构: 一:将要用到的CSS 和 JS 拷贝到工程中,我这里在工程 ...
- 关于Ajax实现的简单示例
一.代码示例 关于Ajax的基本概念(包括XMLHttpRequest对象及其相关方法属性)移步这里(w3school中文版)学习了解. <!doctype html> <html ...
- AJAX封装数据处理简单操作
数据的封装处理主要展现在JS中,在页面里面引入封装的JS, "js/ajax.js" 简单封装将get和post方法都写入,get的方法和post的方法依然需要严格区分,包括typ ...
- 分页ajax+springmvc的简单实现
页面部分源码: <li class="paginItem"><a href="javascript:getNewsList(2);">2 ...
随机推荐
- Java基础学习总结（二）
Java语言的特点: Java语言是简单的 Java语言是面向对象的 Java语言是跨平台(操作系统)的(即一次编写,到处运行) Java是高性能的 运行Java程序要安装和配置JDK jdk是什么? ...
- eclipse、idea中自动生成元模型JPA元模型对象
一.eclipse 1.首先准备好两个jar包hibernate-jpa-2.0-api-1.0.1.Final和hibernate-jpamodelgen-4.3.5.Final 2.选中项目右击 ...
- 二次urldecode注入
原理大多数web程序都会对输入字符进行转换,例如addslashes(),mysql_real_escape_string(),mysql_escape_string(),也就是对单引号',双引号&q ...
- JavaScript动态实现div窗口弹出&消失功能
先积累一个JavaScript动态实现div窗口弹出&消失功能 首先是index.jsp代码 <html> <head> <link rel="styl ...
- Redis数据类型及其操作
redis数据类型即操作 1. 字符串 set 设置字符串 格式: set key value 例子: set name kainhuck get 获取字符串的值 格式: get key 例子: ge ...
- python接口自动化26-发xml格式post请求《转载》
python接口自动化26-发xml格式post请求 https://cloud.tencent.com/developer/article/1164987
- Python基础笔记：函数：调用函数、定义函数、函数的参数、递归函数
一.定义一个求二元一次方程的根的函数 #Sublime Text import math def ee(a,b,c): delta=b*b-4*a*c if delta<0: return 'n ...
- 九十五、SAP中查看自定义包的所有模块，对象，函数主，事务等
一.输入SE80 二.选择包,再查下Z* 三.可以看到,查下出来的包 四.可以看到我们想要的内容了
- 五十八、SAP中常用预定义数据类型
一.SAP中常用预定义数据类型 注意事项如下: 1.默认的定义数据类型是CHAR. 2.取值的时候C型默认从左取,N型从右取,超过定义长度则截断. 3.C类型,可以赋值数值,也可以赋值字符,还可以混合 ...
- (HN)AHOI2018 转盘
题意: 有 \(n\) 个格子围成一圈,每个格子里有一个物品,每个物品的出现时间为 \(T_i\) .开始时选择一个格子为起点,每个单位时间可以向前走一格或不动,若当前格的物品已出现则将其标记.有 \ ...