Ajax解析

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1.Ajax
Asynchronous(异步的) javascript and xml
技术组成：
CSS + xml +JavaScript +DOM
Ajax核心对象： XmlHttpRequest

2.创建一个WEB工程

2.1给文本框一个注册事件

      //给文本框注册一个失去焦点事件

    window.onload=function(){

        var dom=document.getElementById("txtName");

          dom.onblur=function(){

             myajax();

          };

    };

2.2定制对象，能力检测，构建请求地址，设置回调函数响应回来的数据，用send发送请求

 function myajax(){

       //01.定制出 xhr对象

       var xhr;

       //02.能力检测

       if(window.XMLHttpRequest){

           //非IE浏览器

          xhr=new XMLHttpRequest();

       }else{

          //IE内核

          xhr=new ActiveXObject("Microsoft.XMLHttp");

       }

        var dom=document.getElementById("txtName");

        var myspan=document.getElementById("msg");

        var myval=dom.value;

       //03.构建请求地址

       //xhr.open("请求类型","请求地址","是否异步");

       xhr.open("get","<%=path%>/servlet/CheckUserServlet?uname="+myval,true);

       //04.设置回调函数     响应回来的数据

       xhr.onreadystatechange=function(){

         //什么

         if(xhr.readyState==4&&xhr.status==200){

            //获取响应数据

            var data=xhr.responseText;

            if(data=='OK'){

                 myspan.innerText="用户名已经被注册";

            }else{

                 myspan.innerText="用户名可以注册";

            }

         }

       };

       //05.用send真正的发送请求

       xhr.send(null);

       }

3.index.jsp页面

 <body>

   用户名：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>

   密码： <input type="password" name="txtPwd"/>

  </body>

4.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 CheckUserServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        doPost(request,response);

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        String uname = request.getParameter("uname");

        if (uname.equals("admin")) {

            response.getWriter().write("OK");

        }else {

            response.getWriter().write("NO");

        }

    }

}

4.实现效果

5.使用Post方法

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>

    <script type="text/javascript">

      //给文本框注册一个失去焦点事件

    window.onload=function(){

        var dom=document.getElementById("txtName");

          dom.onblur=function(){

             myajax();

          };

    };

    function myajax(){

       //01.定制出 xhr对象

       var xhr;

       //02.能力检测

       if(window.XMLHttpRequest){

           //非IE浏览器

          xhr=new XMLHttpRequest();

       }else{

          //IE内核

          xhr=new ActiveXObject("Microsoft.XMLHttp");

       }

        var dom=document.getElementById("txtName");

        var myspan=document.getElementById("msg");

        var myval=dom.value;

       //03.构建请求地址

       //xhr.open("请求类型","请求地址","是否异步");

       xhr.open("post","<%=path%>/servlet/CheckUserServlet",true);

       //04.设置回调函数     响应回来的数据

       xhr.onreadystatechange=function(){

         //什么

         if(xhr.readyState==4&&xhr.status==200){

            //获取响应数据

            var data=xhr.responseText;

            if(data=='OK'){

                 myspan.innerText="用户名已经被注册";

            }else{

                 myspan.innerText="用户名可以注册";

            }

         }

       };

       //05.用send真正的发送post请求

       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

       xhr.send("uname="+myval);

       }

    </script>

  </head>

  <body>

    <input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>

    <input type="password" name="txtPwd"/>

  </body>

</html>

6.使用jQuery方法

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>

    <script type="text/javascript" src="js/jQuery1.11.1.js"></script>

    <script type="text/javascript">

      //给文本框注册一个失去焦点事件

      $(function(){

         //等待页面上所有标签完毕后执行

         var dom=$("#txtName");

         dom.blur(function(){

            myjquery();

         });

      });

      function  myjquery(){

      var dom=$("#txtName");

        $.ajax({

          url:'<%=path%>/servlet/CheckUserServlet',

          type:'post',

          data:{uname:dom.val()},

          success:function(today){

             //today server  打到 浏览器的数据

             alert(today);

          }

        });

      }

    </script>

  </head>

  <body>

  <h1>我是Jquery发送Ajax</h1>

    <input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>

    <input type="password" name="txtPwd"/>

  </body>

</html>