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. yii criteria select column as 与 时间段查询

    需要查询某时间段的记录,但是数据库里只有一个时间记录,如果写sql的话,很快的,放到yii里一时竟然没办法... 不过,最后还是解决了,使用了一个第三方的插件 参考http://www.yiifram ...

  2. yii cgridview 默认的筛选如何做成选择框

    效果图 参照 http://www.yiiframework.com/doc/api/1.1/CGridColumn http://www.yiiframework.com/doc/api/1.1/C ...

  3. git常用命令<转>

    (转自)https://www.akii.org/git-concise-operating-tutorial.html git工作原理: 分布式,每个克隆或更新远程仓库的用户都拥有⼀一份最新的完整的 ...

  4. MM32初识(兼容STM32)

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

  5. 12、第十二节课，css伪类 （转）

    一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...

  6. JSP验证码

    ImageServlet.java package cn.hist.test.servlet; import java.awt.Color; import java.awt.Font; import ...

  7. iOS-OC-基础-NSObject常用方法

    Person *person1 = [[Person alloc]init]; Person *person2 = [[Person alloc]init]; // 可以调用类中的私有方法,但是会有一 ...

  8. Swift - 40 - 枚举更加灵活的使用方式

    //: Playground - noun: a place where people can play import UIKit /* 这里的枚举没有给它的成员默认值, 而是给它绑定了一个类型, 之 ...

  9. R1：创建Libevent库

    原文链接:http://www.wangafu.net/~nickm/libevent-book/Ref1_libsetup.html Setting up the Libevent library ...

  10. JS-商品图片点击轮换

    //小图预览区域图片轮换键const LIWIDTH=62;var moveCount=0;document.getElementById("btForward").onclick ...