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>

Ajax解析的更多相关文章

  1. jQuery ajax解析xml文件demo

    解析xml文件,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息. 前端代码: <!doctype html> <html> <hea ...

  2. 使用js接收ajax解析的json再拼成一个自己想要的json

    //ajax解析的json{ "status": 1, "content": { "pathsInfo": [ { "id&quo ...

  3. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

  4. JQuery AJAX 解析获得的JSON数据

    下面的解析的Json是一个二级循环. <!DOCTYPE html> <html> <head> <script src="https://code ...

  5. 关于ajax解析

    出处:http://www.cnblogs.com/huashanlin/archive/2006/10/09/524707.html 要很好地领会Ajax技术的关键是了解超文本传输协议(HTTP), ...

  6. asp.net中，我们使用ashx获取数据列表，在前端使用$.ajax()解析

    一直在想在asp.net中怎么才能向在java中那样用struts那样做页面请求. 当然asp.net mvc就是类似struts的东西吧,不过还没来得及学习. 今天就用ashx来接收页面请求,并调用 ...

  7. 使用Ajax解析数据遇到的问题

    数据格式 我最近在使用JQuery的$.ajax访问后台的时候,发现竟然无法解析返回的数据,具体的错误记不清了(以后在遇到问题先截个图),可以在浏览器的Console中看到一个错误,但是去看这条请求是 ...

  8. IE6 ajax解析parseerror

    IE6下,用a[href="javascript:void(0);"]或者a[href="javascript:;"]发起ajax|jsonp请求会出现请求成功 ...

  9. 爬虫实战【7】Ajax解析续-今日头条图片下载

    昨天我们分析了今日头条搜索得到的信息,一直对图集感兴趣的我还是选择将所有的图片下载下来. 我们继续讲一下如何通过各个图集的url得到每个图集下面的照片. 分析图集的组成 [插入图片,某个图集的页面] ...

  10. 使用ajax解析后台json数据时：Unexpected token o in JSON at position 1

    json数据解析异常 今天在做json数据的时候,出现了如下错误,说是解析异常. VM1584:1 Uncaught SyntaxError: Unexpected token o in JSON a ...

随机推荐

  1. Win10系统修改MAC地址

    本地管理地址,输入想修改的MAC地址后,点确定即完成修改.在CMD窗口中,使用ipconfig 命令可以查看新的MAC地址. 再次钩选不存在,则还原为原来的MAC地址.

  2. MM32初识(兼容STM32)

    MM32初识(兼容STM32) 资源与开发环境 keil 5.0 MM32 miniboard 提要 stm32入门(MM32兼容) 点亮LED思路简介 GPIO配置 stm32寄存器理解与操作步骤 ...

  3. ASP.NET 2.0服务器控件开发的基本概念(转载)

    利用ASP.NET 2.0技术,创建Web自定义服务器控件并不是一件轻松的事情.因为,这需要开发人员了解并能够灵活应用多种Web开发技术,例如,CSS样式表.客户端 脚本语言..NET开发语言.服务器 ...

  4. Shell中的数值计算

    #!/bin/bash echo "please input number:" read n a=`expr $n / 100` #a1=`expr $n - $a * 100` ...

  5. 武汉科技大学ACM：1007: 文本编辑器

    Problem Description YB打算写一个功能强大的文本编辑器,并取一个炫酷拉风,高端优雅的名字,比如“YB牌文本编辑器”之类的.既然功能强大,那肯定得有个查找功能吧.但是他在完成这个功能 ...

  6. 武汉科技大学ACM：1004: 华科版C语言程序设计教程（第二版）习题5.6

    Problem Description 这天老师又给小豪出了一道题目:给你三根长度分别为a,b,c的火柴,让你计算这三跟火柴能组成的三角形的面积. Input 输入每行包括三个数a,b,c. Outp ...

  7. String 类 Copy-On-Write 技术以及使用时存在的风险

    先来看一下string 面试时的简易写法(使用的是深拷贝): class String { String() :str(]) { str[] = '\0'; } String(char* p, siz ...

  8. 请写一个C函数，判断处理器是大端存储还是小端存储，若处理器是Big_endian的，则返回0；若是Little_endian的，则返回1

    [解答] int checkCPU() { { union w { int a; char b; }c; c.a=1; return (c.b==1); } } [剖析] 嵌入式系统开发者应该对Lit ...

  9. Yandex 2013Q(Atoms: There and Back Again-贪心+模拟+List)

    Atoms: There and Back Again Time limit 2 seconds Memory limit 256Mb Input stdin Output stdout Legend ...

  10. keybd_event 转载

    转自 http://apps.hi.baidu.com/share/detail/14468670 Option Explicit Private Declare Sub keybd_event Li ...