你的位置:首页 > Java教程

[Java教程]Ajax简述


一、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>