AJAX

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

 

  AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

http://www.w3school.com.cn/ajax/index.asp

在要刷新的页面input中动态更新

<body

<TR>
                                <th width="20%" align="center">用户登录名</th>
                                <TD class="BGCgray"><input name="ur_loginName" type="text"
                                    class="inputbox" id="ur_loginName"
                                    style="width:160px;hight:20px"
                                    value="${sessionScope.user.ur_loginName }" onblur="lnTest()"><span
                                    id="login" style="color:red"></span></TD>
                            </TR>

</body>

<script>

    function lnTest() {
        var ur_loginName = document.getElementById("ur_loginName").value;
        var login = document.getElementById("login");
        var id = "${sessionScope.user.ur_id}";
        var ymsz = /^[A-Za-z0-9]+$/;
        var loginname = document.getElementById("loginname").value;
        if(loginname==ur_loginName){
            return true;
        }else if (kong.test(ur_loginName)) {
            login.style.color = "red";
            login.innerHTML = " × 账户不可以为空";
            return  false;
        } else if (ymsz.test(ur_loginName)) {
            xml = new XMLHttpRequest();
            xml.open("get", "AJAXServlet.do", true);
            xml.setRequestHeader("name", ur_loginName);
            xml.setRequestHeader("ur_id", id);
            xml.send(null);
            xml.onreadystatechange = function(){                
                if (xml.readyState == 4) {
                    var msg = xml.responseText;
                    var login = document.getElementById("login");
                    if (msg == 1) {
                        login.style.color = "red";
                        login.innerHTML = " × 该用户名已被使用";
                        return false;
                    } else if (msg != 1) {
                        login.style.color = "green";                
                        login.innerHTML = " √ 该用户名可以使用";
                        return true;
                    }
                }
                
                
            };
        } else {
            login.style.color = "red";
            login.innerHTML = " × 账户格式不正确 ";
            return false;
        }
    }

</script>

使用ajax来在点击input框时,动态更新用户名,判断输入的用户名是否在原数据库中存在

ajaxservlet.java

 

package com.xxpx.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.xxpx.bean.User;
import com.xxpx.service.UserService;
import com.xxpx.service.UserServiceImpl;

public class AJAXServlet extends HttpServlet{

    UserService service = new UserServiceImpl();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        System.out.println("--->AJAX");        
        String id = request.getHeader("ur_id");        
        System.out.println("id="+id);
        List list1 = new ArrayList();
        list1.add(id);
        System.out.println("list1="+list1);
        HttpSession session = request.getSession();
        List<User> list = this.service.AjaxUser(list1);                
        String name = request.getHeader("name");
        System.out.println("name="+name);
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        boolean flag = false;
        for(User a : list){
            System.out.println(a.getUr_loginName());
            if((a.getUr_loginName()).equals(name)){
                flag = true;                
            }
        }
        if(flag == true ){
            out.print(1);
        }else{
            out.print(0);
        }
          out.flush();
          out.close();
    }

}
web.xml配置

<display-name>AJAXTest</display-name>
  <servlet>
    <servlet-name>AJAXServlet</servlet-name>
    <servlet-class>com.xxpx.servlet.AJAXServlet</servlet-class>
  </servlet>
  <servlet-mapping>  
  <servlet-name>AJAXServlet</servlet-name>
  <url-pattern>/AJAXServlet.do</url-pattern>
  </servlet-mapping>
 
 

posted @ 2017-06-05 17:30  蓁蓁  阅读(166)  评论(0编辑  收藏  举报