一、AJAX
AJAX 是一个比较莫名的缩写单词:Asynchronous JavaScript +
AJAX包含以下五个部分:
- 基于标准的表示技术,使用XHTML与CSS
- 动态显示和交互技术,使用Document Object Model(文档对象模型)
- 数据互换和操作技术,使用
- 异步数据获取技术,使用
- 而JavaScript 将以上的一切都结合在一起
二、创建
统一创建方法:
//创建function createif(window.//判断浏览器版本是不是IE7以上和其它浏览器 return new else if(window.ActiveXObject){//判断浏览器版本是不是IE5,IE6浏览器 return new ActiveXObject("Microsoft.); }}
工作原理
三、
3.1、详细介绍
四、
4.1、readyState属性
4.2、status属性
4.3、其它属性
五、发送get响应
六、Post方式
七、简单例子
servlet
package servlet;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 { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String uname=request.getParameter("uname"); boolean flag=false; if("accp".equalsIgnoreCase(uname)){ flag=true; out.println(flag); System.out.println(flag+" "+uname); }else{ out.println(flag); System.out.println(flag+" "+uname); } out.flush(); out.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }}
页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>用户注册</title><script type="text/javascript">//判断用户名function checkuname(ouser){ //取用户名的值 var uname=ouser.value; //判断是否为空 if(!uname){ alert("用户名不能为空!"); //ouser.focus(); return false; }/* get方式 //创建发送请求的url var url="LoginServlet?uname="+uname; //接收返回的*///post方式//请求的urlvar url="LoginServlet";//创建=create//创建回调函数=haoLeJiaoWo;//初始化"POST",url,true);//设置请求头类型"Content-Type","application/x-www-form-urlencoded");"uname="+uname);}//回调函数function haoLeJiaoWo(){ //表示数据接收完成,并正确返回 if(=4 && ==200){ //接收服务器返回的值这里为文本 var result=//去掉字符串前后的空格 result=result.replace(/(^\s*)|(\s*$)/g,""); //判断值 if(result=="true"){ alert("用户已经存在"); return false; }else{ alert("用户可以使用"); return true; } }}//创建function createif(window.//判断浏览器版本是不是IE7以上和其它浏览器 return new else if(window.ActiveXObject){//判断浏览器版本是不是IE5,IE6浏览器 return new ActiveXObject("Microsoft."); }}</script></head><body><form action="LoginServlet" method="get"><table align="center"><tr><td><p>用户账户:<input type="text" name="uname" onblur="checkuname(this);"/></p></td></tr><tr><td><p>用户密码:<input type="password" name="passwd"/></p></td></tr><tr><td><p>确认密码:<input type="password" name="repasswd"/></p></td></tr><tr><td><input type="submit" value="提交"/><input type="reset" value="重置"/></td></tr></table></form></body></html>
八、处理
九、
package servlet;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 doGetU extends HttpServlet { private static final long serialVersionUID = 1L; public doGetU() { } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置响应为 String uname=request.getParameter("uname"); response.setContentType("text/); PrintWriter out = response.getWriter(); StringBuilder bd=new StringBuilder(); bd.append("<userinfo>"); bd.append("<username>"); if(uname==null || uname.length()==0 ){ bd.append("请选择用户"); }else{ bd.append(uname); } bd.append("</username>"); bd.append("</userinfo>"); out.println(bd.toString()); out.flush(); out.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }}
页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Ajax中</title><script type="text/javascript">function checkUser(ouser){ //获取下拉框的值 var uname=ouser.value; //提交的URL get方式 var url="doGetU?uname="+uname; //创建&.status==200){ var </script></head><body> <form action="doGetU" method="get"> <table> <tr> <td>请选择用户:</td> <td style="width:150px"><select name="user" onchange="checkUser(this);"> <option value="accp">accp</option> <option value="test">test</option> </select></td> </tr> <tr> <td>用户名:</td> <td><input type="text" id="username" style="width: 150px" /> </td> </tr> </table> </form></body></html>
原标题:Ajax简述
关键词:ajax