码迷,mamicode.com
首页 > 编程语言 > 详细

14.javaweb AJAX技术详解

时间:2017-11-11 23:50:10      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:password   sys   request对象   完成   cep   取值   for   pre   query   

一、简介

1,  ajax:在不重新加载网页的前提下,与服务器交换数据并更新部分网页的技巧,但其本身并不是一种新技术

 技术分享

2,  核心:XMLHttpRequest对象。AJAX技术主要是通过此对象完成的。

 技术分享

在创建此对象的时候一定要考虑浏览器的问题

XMLHttpRequest对象的创建

 技术分享

XMLHttpRequest对象属性

 技术分享

其中readyState有五种取值

 技术分享

XMLHttpRequest对象方法

 技术分享

 

3,  简单示例:利用ajax完成局部刷新功能:局部刷新,在<span>中导入content.html内容

 

content.html内容

 技术分享

Flush.html

 技术分享

 

xmlHttp.onreadystatechange=showMsgCallback;表示当xmlHttp的请求状态改变时,就会调用showMsgCallback()方法,事实上,当xmlHttp.send()发送请求到响应完成,readyState会经历”2“(请求正在处理)、”3”(请求已经处理)、”4“(响应完成)三次变化,如果回调函数在xmlHttp.send()之前设置,便会调用三次showMsgCallback()方法。我们设置readyState=4时执行操作,因为此时响应完成,服务器会把回应内容填充到xmlHttp.response***属性中

 

点击“调用ajax显示内容”则会动态的在<span>中生成”取得数据”

技术分享

二、ajax异步验证:当新用户注册信息时,输入ID后,异步验证ID是否可用

 

login.html

 技术分享

 

注意此处用到的地址重写的方式

 

Checkservlet

package com.chen.ying;

import java.io.PrintWriter;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class CheckId extends HttpServlet {

    final String DBDIVRE="com.mysql.jdbc.Driver";

    final String URL="jdbc:mysql://localhost:3306/test";

    final String USER="root";

    final String PASSWORD="1995228";

     Connection conn=null;

    PreparedStatement pstmt=null;

    ResultSet rs=null;

    public void doGet(HttpServletRequest req,HttpServletResponse res){

        int  userid=Integer.parseInt(req.getParameter("userid"));

        try{

            System.out.println(userid);

            PrintWriter out=res.getWriter();//得到回应的输出流

            Class.forName(DBDIVRE);

            conn=DriverManager.getConnection(URL,USER,PASSWORD);

            String sql="select userid from person where userid=?";

            pstmt=conn.prepareStatement(sql);

            pstmt.setInt(1, userid);

            rs=pstmt.executeQuery();

            if(rs.next()){

                System.out.println("用户ID重复");

                out.print("true");

            }

            else{

                System.out.println("ID可用");

                out.print("false");

            }

        }catch(Exception e){

            System.out.println(e);

        }  

        }

    public void doPost(HttpServletRequest req,HttpServletResponse res){

        this.doGet(req, res);

    }

}

 

效果

当用户输入id,光标离开输出框后,利用ajax技术,异步验证输入的id是否重复

 技术分享

 

 技术分享

 

三、返回XML数据

1,  要求

 技术分享

 

  

14.javaweb AJAX技术详解

标签:password   sys   request对象   完成   cep   取值   for   pre   query   

原文地址:http://www.cnblogs.com/chenxd/p/7820269.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!