一、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. TOCControl上实现右键

    第一步:新建另外一个窗体 首先要定义一个全局变量 ILayer. 窗体要带参数,以便将 ILayer 传递过来. 获取属性列表. using System; using System.Collecti ...

  2. 使用 SQL的 for xml path来进行字符串拼接 (group by)

    参考: http://www.cnblogs.com/repository/archive/2011/01/18/1938418.html select convert(varchar(10),c.[ ...

  3. Android Material design

    1.Material Design:扁而不平 2.Android Support Design 库 之 Snackbar使用及源码分析 3.十大Material Design开源项目,直接拿来用!

  4. Android SharedPreference的使用

    在<Android 在内部存储读写文件>一文中,谈到了登录用户名和密码的方法,通过读取内存文件来实现,但是会出现问题,因为登录名和密码的形式通过username##password的形式, ...

  5. Markdown语法手册

    Markdown 语法手册 Markdown 是一种轻量级标记语言,能将文本换成有效的XHTML(或者HTML)文档,它的目标是实现易读易写,成为一种适用于网络的书写语言. Markdown 语法简洁 ...

  6. cocoapod-使用cocoapod安装AFNetworking3.0

    1. 在终端用cd命令加入到工程目录下,用命令:touch Podfile创建一个Podfile文件. 2. Podfile文件: #source 'https://github.com/CocoaP ...

  7. 一次对MKMapView的性能优化

    一次对MKMapView的性能优化 前言 最近做的项目主要是LBS这块 主打成员定位功能 我们的UI设计是这样的 乍一看上去是挺好挺美观的 不同的人会显示不同的头像 可是当人扎堆的时候 问题就来了 当 ...

  8. Enabling Cross-Origin Requests in ASP.NET Web API 2

    Introduction This tutorial demonstrates CORS support in ASP.NET Web API. We’ll start by creating two ...

  9. ORACLE AWR报告生成过程出现多个实例记录分析

    在一次生成AWR报告中,发现在"Instances in this Workload Repository schema"部分,出现了多个实例记录信息(host敏感信息被用host ...

  10. SQL Server 2012中Task是如何调度的？

    SQL Server 2012中Task是如何调度的?[原文来自:How It Works: SQL Server 2012 Database Engine Task Scheduling]     ...