一、Ajax简介

Ajax(Asynchronous JavaScript and Xml)--异步刷新技术

Ajax的关键元素包括以下内容：

① JavaScript语言：Ajax技术的主要开发语言。

② XML/JSON/HTML等：用来封装请求或响应的数据格式

③ DOM(文档对象模型)：通过DOM属性或方法修改页面元素，实现页面局部刷新

④ CSS：改变样式，美化页面效果，提升用户体验度

⑤ Ajax引擎：即XMLHttpRequest对象，以异步方式在客户端与服务器之间传递数据。

二、Ajax工作流程

三、常用方法：

四、常用属性

五、实现思路：

1、锁定用户名文本框，注册onblur事件

2、创建XMLHttpRequest对象。通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式

3、设置回调函数。通过onreadystatechange属性设置回调函数，其中回调函数需要自定义

4、初始化XMLHttpRequest对象。通过open()设置请求的发送方式和路径

5、发送请求

准备简单页面：

 <body>

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

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

  </body>

创建Servlet：回送信息

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");

        }

注：

步骤一：通过window。XMLHttpRequest的返回值判断当前浏览器创建XMLHttpRequest对象的方式。如果为true，说明是新版本IE或其他浏览器，可使用new XMLHttpRequest()方式创建XMLHttpRequest对象；如果为false，说明是老版本IE浏览器，需使用new ActiveXObject("Microsoft.XMLHttp")的方式创建XMLHttpRequest对象

步骤二：通过XMLHttpRequest对象的onreadystatechange属性设置回调函数，用于当请求成功后接收服务器端返回的数据

步骤三：通过XMLHttpRequest对象的open()方法，传入参数完成初始化XMLHttpRequest对象的工作。第一个参数为Http请求方式，选择发送Httpget 请求，因此参数为get。第二个参数为要发送的url请求路径，将要发送的数据附加到url路径后面

步骤四：调用XMLHttpRequest对象的send()方法，参数为要发送到服务器端的数据，因为采用"get"方式请求时，参数已经附加到url路径后，所以直接设置为null。如果send()方法不设值，在不同的浏览器下可能存在不兼容问题。

执行完毕后，异步请求的发送过程就结束！

注：使用Ajax发送Post请求需注意要设置setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

采用Get方式发送请求时，通常会将需要携带的参数附加在URL路径后面一起发送，所以send()不需要传递参数，设置为null即可

六 、使用jQuery实现Ajax

jQuery常用的Ajax方法

语法：$.ajax([settings]);

常用属性参数:

常用函数参数：

使用$.ajax()验证用户名--使用$.ajax() 实现异步交互

注：需引jquery-1.11.1.js库

<html>

  <head>

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

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

    <script type="text/javascript" src="js/jquery-1.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(result){

    alert(result);

    }

    });

    }

    </script>

  </head>

  <body>

  <h2>使用jQuery实现Ajax</h2>

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

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

  </body>

实现效果：

若输入的非admin，即可注册，否则无法注册

若是post请求，调试效果如下：

七、JSON简介

JavaScript Object Notation是一种轻量级的数据交换格式

①定义Json对象

语法：var json对象={key:value,key:value,...}

② 定义Json数组

语法：var json数组=[value,value,...]

<script type="text/javascript">

    var data={"firstName":"Brett","lastName":"hehe"};

    $.each(data,function(i,dom){

    alert(dom);

    }); 

/* var data={

    "people":[

        {"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},

        {"firstName":"Jason","lastName":"Hunter","email":"bbbb"},

        {"firstName":"Elliotte","lastName":"Harold","email":"cccc"}

    ]

};

$.each(data.people,function(i,dom){

    alert(dom.firstName);

    });

     */

    </script>

那么即可拿到每个dom对象：

Ajax与jQuery、json的更多相关文章

  1. Struts2+Jquery实现ajax并返回json类型数据

    来源于:http://my.oschina.net/simpleton/blog/139212 摘要 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的 ...

  2. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  3. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

  4. Jquery Ajax方法传递json到action

    ajax向后台传入json需要设置option,如下 contentType:'application/json' data:Json.Stringify(jsObj) 后台处理复杂json对象(不知 ...

  5. 转载：Struts2+Jquery实现ajax并返回json类型数据

    摘要: 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的数据,并转换为json类型模式数据 3.配置struts.xml文件 4.页面脚本接受并处理数 ...

  6. jquery ajax调用返回json格式数据处理

    Ajax请求默认的都是异步的 如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "some.php", async: ...

  7. jQuery ajax读取本地json文件

    jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...

  8. 一、Ajax 二、JSON数据格式 三、Ajax+Jquery 四、分页的实现

    一.Ajax概述###<1>概述 ###<2>组成 以XMLHttpRequest为核心,发送Ajax请求和接收处理结果 以javascript为语言基础 以XML/JSON作 ...

  9. struts1、ajax、jquery、json简单实例

    1.页面ajax代码,使用$.ajax,获得json对象后each $.ajax({ type:"GET", url:ctx + "/uploadImg.do" ...

  10. struts2 + jquery + json 简单的前后台信息交互

    ajax 是一种客户端与服务器端异步请求的交互技术.相比同步请求,大大提高了信息交互的速度和效率.是当下非常实用和流行的技术. 这里简单的说明 struts2 + jquery + json 下的 信 ...

随机推荐

  1. 【小贴士】zepto find元素以及ios弹出键盘可能让你很头疼

    前言 在此,我不得不说移动端的兼容问题很多,并且很令人头疼,这不,这个星期又有两个让我逮着了,一个是使用zepto过程中出现的问题,一个是ios虚拟键盘的问题 我这里做一次记录,以免以后忘了,同时希望 ...

  2. CoreDataManager-OC版-兼容iOS10以前的版本

    头文件: #import <Foundation/Foundation.h> #import <CoreData/CoreData.h> /** CoreData管理器 */ ...

  3. JavaScript上传图片及时预览

    /*******************************正面图片上传预览开始****************************/        function previewImage ...

  4. 浅谈FloatingActionButton(悬浮按钮)

    一.介绍 这个类是继承自ImageView的,所以对于这个控件我们可以使用ImageView的所有属性 android.support.design.widget.FloatingActionButt ...

  5. App开发流程之右滑返回手势功能

    iOS7以后,导航控制器,自带了从屏幕左边缘右滑返回的手势功能. 但是,如果自定义了导航栏返回按钮,这项功能就失效了,需要自行实现.又如果需要修改手势触发范围,还是需要自行实现. 广泛应用的一种实现方 ...

  6. 运维之Centos apache vsftpd配置

    安装Apache yum install httpd -y chkconfig httpd on service httpd start 配置一下iptables iptables -I INPUT ...

  7. Genome2D编译方法

    Genome2D是一个高效的2D引擎,现在支持Flash(stage3d)和HTML5,因为只有作者一个人在维护,就没开源代码. 最近和作者沟通了下,已经开源啦. 作者划分了几个模块,编译起来不是特别 ...

  8. WPF学习之路（八）页面

    传统的应用程序中有两类应用程序模式:桌面应用,Web应用.WPF的导航应用程序模糊了这两类应用程序的界限的第三类应用程序 WPF导航表现为两种形式,一是将导航内容寄宿于窗口,二是XAML浏览器应用程序 ...

  9. 7、软件质量工程师要阅读的书籍 - IT软件人员书籍系列文章

    软件质量工程师在项目组中的作用不是那么明显,但是它是软件质量的重要度量标准人员.有句话说:软件质量是生产出来的,不是开发出来的.通过软件质量审查,能够对软件项目的代码等质量进行衡量,最起码要能够对代码 ...

  10. Linux high memory 学习总结

    在free命令中有个参数l,它表示 show detailed low and high memory statistics.其实最先是对High Memory总是为零有些不解(Linux是64为). ...