初学Ajax

javaweb- Ajax初学(一)

简述:

AsynchronousJavascriptAndXML(异步JavaScript 和 XML)Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

异步
不用重新加载页面获取服务器的内容
比如:在注册账号时经常可以看到如果用户名已存在,会在该行的后面显示用户名已存在,整个过程页面并未重新加载,这个过程就是通过ajax异步来处理的
通过刷新页面部分内容不用提交form表单,从而达到连接服务器的目的

1.1ajax核心xmlhttpresquest

xmlhttpresquest是ajax的核心,在开发ajax之前必须创建该对象,不同浏览器的创建方式略有不同
Firefox,Chrome,IE8

 var xmlhttp= new XMLHttpRequest();

IE8前的版本

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

1.2xmlhttprequest对象的方法和属性﹑方法

(1)open()方法
xmlhttprequest对象通过调用open(method,url,async,username,password)方法进行初始化操作
参数解释:

• method:该参数是必须的,发送HTTP请求(get,post,put,delete,head)
• url:指定xmlhttprequest对象将请求发送到服务器的地址,该地址被自动解析为绝对地址
• async:指定请求是否异步,默认为true,若设置为false是执行同步
• usename,password:如果服务器需要验证访问用户,可以设置这两个参数,二者可选

(2)send()方法
open()方法只对xmlhttprequest对象进行初始化,调用send()方法将会按照open()方法所设置的参数发送请求,当open()放方法中的async参数设置为true时该方法将在调用后立即返回,如果执行post请求该方法可以提交参数格式为
“url?参数名=参数值&参数名=参数值”
如果执行get请求可以在open方法中的url中传递参数格式为
“?参数名=参数值&参数名=参数值”
(3)setRequestHeader()方法
该方法用于设置HTTP请求的头部信息,必须在open()方法调用后才可使用
该方法方法包含两个参数header,键名和键值
在发送post请求时必须要设置请求头
如

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

里面的参数将以如下方式传递

(4)readystate属性
当xmlhttprequst对象创建成功后,其readystate标志了对象当前的状态
readystate:状态值有如下

• 0:未初始化还没有调用send()方法
• 1:准备发送状态:正在发送请求,调用send()方法
• 2:载入完成:在send()方法调用后,响应信息接受之前,send()方法以调用完成
• 3:正在接收状态:此时已接收到HTTP响应的头部信息,消息主体尚未完成接收
• 4:完成响应:此时响应已完成接收并解析完成,可以在客户端调用
  当上述状态码改变时该属性所设置的回调函数都将被调用
  (5)onreadystatecheang属性
  每次readystate(状态值)发生改变时该属性设置的回调函数都会被调用
  (6)status属性
  status属性设置了HTTP的状态码.只有当readystatus属性的值为3or4时才能访问status值常见的状态码如:404,500等
  (7)responseXML属性
  获取响应的xml文档,如果readystate的值不为4(响应完成),那么responseXML的值将为null,如果content-type不是text/xml或application/xml是,该属性的值也将为null
  (8)responseText属性
  接受服务器响应的内容(服务器返回的值),只有在readystatus值为4时才会包含完整的响应信息.其他值时为null

2代码

以用户注册为例
html代码

<h1>用户注册</h1>
<form action="userShow" method="post">
//文本框失去焦点事件
    用户名<input type="text"  id="name" onblur="check()"/><br/>
    <span id="info"></span>
    密码<input type="password" name="pwd"><br/>
    <input type="submit" value="提交">
</form>

ajax部分

<script>
    var xmlhttp;
    //创建xhr对象的函数
    function createUser() {
        try {
            //使用标准的方式创建(Chrome,Firefox,IE8都支持)
            return new XMLHttpRequest();
        } catch (e) {
            //出现异常,就意味着是IE7之前的版本
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    //用户文本框失去焦点处理的函数
    function check() {
        //创建xmlhttprequest对象
        xmlhttp = createUser();
        //得到文本框内容
        var userName =document.getElementById('name').value;
        //设置回调函数
        xmlhttp.onreadystatechange = callback;
        //get请求,请求数据在uRL的后面
        // xmlhttp.open("GET", "userShow?userName="+userName+"&pwd="+"11",true);
        // xmlhttp.send();
        //post请求
        xmlhttp.open('POST',"userShow",true);
        //application/x-www-form-urlencoded:post请求需要设置请求头,它会将数据编码为名称/值的格式可通过名称调用值
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //传递多参数时可以用+"&名称="+值的方式传递
        xmlhttp.send("userName="+userName/*+"&pwd=01520"*/);
    }
    //回调函数
    function callback() {
        //判断请求是否完成并且返回成功200表示成功
      if (xmlhttp.readyState===4 && xmlhttp.status===200){
          //responseText接受后台返回的数据
        document.getElementById("info").innerText=xmlhttp.responseText;
      }else {
          document.getElementById("info").innerText=xmlhttp.responseText;
      }
    }
</script>

后台代码

@WebServlet(name = "UserServlet",urlPatterns = "/userShow")
public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置响应字符集
        resp.setContentType("text/html;charset=utf-8");
        //设置请求字符集
        req.setCharacterEncoding("utf-8");
        PrintWriter out=resp.getWriter();
        String name=req.getParameter("userName");
        //测试多参数传递
//        String pwd=req.getParameter("pwd");
//        System.out.println(pwd);
//        System.out.println(name);
        //向数据库查询用户名是否存在
        UserDao userDao=new UserDaoImpl();
        String mapList=userDao.findByUser(name);
        //判断是否存在并向浏览器输出值
        if (mapList==null){
            out.println("用户名不存在");
        }else {
            out.println("用户名已存在");
        }
    }
}

dao接口

public interface UserDao {
    String findByUser(String trim);
}

实现类

    @Override
    public String findByUser(String trim) {
        //查询用户名是否存在
        String sql="select * from user where uname=?";
        String id= BaseDao.findSection(sql,trim,"uname");
        return id;
    }

Basedao

 /**
     *
     * @param sql sql语句
     * @param params 查询条件
     * @param columnName 单列列名
     * @return 该列的值
     * 该方法用于用户注册,登录,查询用户是否存在,或用于单列只有一条数据的查询
     */
    public static  String  findSection(String sql, Object params,String columnName){
        //声明结果表格
        String find = null;
        //声明数据库连接
        Connection con = null;
        //声明预加载
        PreparedStatement ps = null;
        //声明结果集
        ResultSet rs = null;

        try {
            //连接数据库
            con = connection();
            //预加载sql
            ps = con.prepareStatement(sql);
            //设置sql参数
           ps.setObject(1,params);
            //执行查询
            rs = ps.executeQuery();
            while (rs.next()) {
                find=rs.getString(columnName);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            //关闭所以连接
            allClose(con, ps, rs);
        }
        return find;
    }

效果


数据库

初学ajax时留下笔记记录,如有错误,还望指正
同样给正在学习的同学留下脚印,以防走弯路
开发工具使用的是idea2020.1
数据库为MySQL