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. IPC进程间通信 - AIDL+Binder

      原理 http://www.linuxidc.com/Linux/2012-07/66195.htm   服务端,客户端处在用户空间,而binder驱动处在内核空间. 服务器端.一个Binder服 ...

  2. 使用solr报错,错误信息 include(SolrClient.php): failed to open stream: No such file or directory

    这个是因为本地没有安装php-solr的扩展导致的,安装方法(使用的是ubuntu) cd /optwget http://pecl.php.net/get/solr-1.0.2.tgztar -xv ...

  3. Javascript 第一阶段 学习使用总结

    JavaScript 是一种轻量级的编程语言.JavaScript 是可插入 HTML 页面的编程代码.脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中 ...

  4. Socket服务端口长连接最多能支持多少？

    答案是无限的.视服务端的资源而不同. 以前一直认为服务端在Accept客户端连接后,会开启一个新的端口与客户端建立链路,但这是错误的.事实上,一个连路是由Server IP+server Port + ...

  5. css动画+滚动的+飞舞的小球

    源代码如下: <!DOCTYPE html><html><head> <title>xi</title> <meta charset= ...

  6. jquery.ajax提交多值(数组)

    偶尔会遇到类似复选框的一个属性存在多值情况,若使用ajax提交的化,设置data :{ids:[1,2,3,4]} 提交后,后台无法使用ids获取到数据. 这里可以用到ajax的 traditiona ...

  7. 杀掉linux所有进程的命令

    ps -ef|grep 'opt/*/tomcat_ssi'|grep -v "grep"|awk '{print $2}'|xargs kill -9

  8. Windbg简单介绍

    1.1 使用帮助 Windbg中的命令分为三种:基本命令.元命令和扩展命令.基本命令和元命令都是调试器自带的,元命令以" ."开头. 扩展命令是外部加入的,以"!&quo ...

  9. java虚拟机内存分析

    1.大致来说java虚拟机分为:堆  栈 栈在数据结构就是那个先进后出的栈.堆...这名字我一听就觉得大..毕竟我们形容东西多又没什么大多的组织的时候就是一堆一堆的....(原谅我发散性的思维,我是妹 ...

  10. flask开发restful api系列(7)-蓝图与项目结构

    如果有几个原因可以让你爱上flask这个极其灵活的库,我想蓝图绝对应该算上一个,部署蓝图以后,你会发现整个程序结构非常清晰,模块之间相互不影响.蓝图对restful api的最明显效果就是版本控制:而 ...