Ajax

Ajax简介

　　Ajax技术，从用户发送请求到获取响应，当用户界面在整个过程中不会受到干扰，而且我们可以在必要的时候只刷新页面的一小部分，而不用刷新整个页面，即"无刷新"技术

　　Ajax(Asynchronous JavaScript and Xml)并不是一种全新的技术，而是整合了JavaScript.XML.CSS等几种技术而成

　　Ajax的执行流程是，在用户界面触发事件调用JavaScript,通过Ajax引擎---XMLHttpRequest对象异步发送请求到服务器,服务器返回XML.JSON或HTML等格式的数据，然后利用返回的数据使用DOM和CSS技术局部更新用户界面

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

　　1.JavaScript语言：Ajax技术的主要开发语言

　　2.XML/JSON/HTML等：用来封装请求或者相应的数据格式

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

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

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

XMLHttpRequest

XMLHttpRequest常用方法

XMLHttpRequest常用属性

编写测试（提交方式为get） (index.jsp页面上有两个文本框，一个name为txtName，一个name为txtPwd，当在txtName输入用户名时（鼠标光标移除文本框时）来判断用户名是否被注册并提示错误信息)

步骤一.搭建环境，新建Web工程,新建一个Servlet

  1. package cn.happy.servlet;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  10.  
  11. public class CheckUserServlet extends HttpServlet {
  12.     public void doGet(HttpServletRequest request, HttpServletResponse response)
  13.             throws ServletException, IOException {
  14.         doPost(request,response);
  15.     }
  16.     public void doPost(HttpServletRequest request, HttpServletResponse response)
  17.             throws ServletException, IOException {
  18.             //定义一个字符串uname，request.getParameter("uname")中的uname是从前端页面获取的
  19.             String uname=request.getParameter("uname");
  20.             //判断字符串uname的值是否为andmin
  21.             if(uname.equals("admin"))
  22.             {
  23.                 response.getWriter().write("OK");
  24.             }else
  25.             {
  26.                 response.getWriter().write("NO");
  27.             }
  28.     }
  29. }

步骤2:在index.jsp页面中进行配编写

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.     <title>Ajax校验</title>
  12.     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  13.     <script type="text/javascript">
  14.        window.onload=function(){
  15.         var dom=document.getElementById("txtName");
  16.           dom.onblur=function(){
  17.              myajax();
  18.           };
  19.     };
  20.     function myajax(){
  21.        //01.定制出 xhr对象
  22.        var xhr;
  23.        //02.能力检测
  24.        if(window.XMLHttpRequest){
  25.            //非IE浏览器
  26.           xhr=new XMLHttpRequest();
  27.        }else{
  28.           //IE内核
  29.           xhr=new ActiveXObject("Microsoft.XMLHttp");
  30.        }
  31.         var dom=document.getElementById("txtName");
  32.         var myspan=document.getElementById("msg");
  33.         var myval=dom.value;
  34.        //03.构建请求地址
  35.        //xhr.open("请求类型","请求地址","是否异步");
  36.        xhr.open("get","<%=path%>/servlet/CheckUserServlet?uname="+myval,true);
  37.  
  38.        //04.设置回调函数     响应回来的数据
  39.        xhr.onreadystatechange=function(){
  40.          //什么
  41.          if(xhr.readyState==4&&xhr.status==200){
  42.             //获取响应数据
  43.             var data=xhr.responseText;
  44.             if(data=='OK'){
  45.  
  46.                  myspan.innerText="用户名已经被注册";
  47.             }else{
  48.  
  49.                  myspan.innerText="用户名可以注册";
  50.             }
  51.          }
  52.        };
  53.        //05.用send真正的发送请求
  54.        xhr.send(null);
  55.        }
  56.     </script>
  57.   </head>
  58.   <body>
  59.     <h1>register</h1>
  60.     用户名：<input name="uname" id="txtName"/><br/><span id="msg"></span>
  61.     <br/>
  62.   密      码：<input name="upwd" type="password" id="txtPwd"/>
  63.   </body>
  64. </html>

步骤三：在浏览器端测试效果

当在txtName输入不是admin的字符时，我们来看下效果

当在txtName输入是admin的字符时，我们来看下效果

编写测试（提交方式为post） (index.jsp页面上有两个文本框，一个name为txtName，一个name为txtPwd，当在txtName输入用户名时（鼠标光标移除文本框时）来判断用户名是否被注册并提示错误信息)

当提交方式为Post时，我们只需要在index.jsp的页面上修改JavaScript代码即可，其他步骤不变

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.     <title>Ajax校验</title>
  12.     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  13.     <script type="text/javascript">
  14.        window.onload=function(){
  15.         var dom=document.getElementById("txtName");
  16.           dom.onblur=function(){
  17.              myajax();
  18.           };
  19.  
  20.     };
  21.  
  22.     function myajax(){
  23.  
  24.        //01.定制出 xhr对象
  25.        var xhr;
  26.        //02.能力检测
  27.        if(window.XMLHttpRequest){
  28.            //非IE浏览器
  29.           xhr=new XMLHttpRequest();
  30.        }else{
  31.           //IE内核
  32.           xhr=new ActiveXObject("Microsoft.XMLHttp");
  33.        }
  34.         var dom=document.getElementById("txtName");
  35.         var myspan=document.getElementById("msg");
  36.         var myval=dom.value;
  37.        //03.构建请求地址
  38.        //xhr.open("请求类型","请求地址","是否异步");
  39.        xhr.open("post","<%=path%>/servlet/CheckUserServlet",true);
  40.  
  41.        //04.设置回调函数     响应回来的数据
  42.        xhr.onreadystatechange=function(){
  43.          //什么
  44.          if(xhr.readyState==4&&xhr.status==200){
  45.             //获取响应数据
  46.             var data=xhr.responseText;
  47.             if(data=='OK'){
  48.                  myspan.innerText="用户名已经被注册";
  49.             }else{
  50.  
  51.                  myspan.innerText="用户名可以注册";
  52.             }
  53.          }
  54.        };
  55.        //05.用send真正的发送请求
  56.        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  57.        xhr.send("uname="+myval);
  58.  
  59.        }
  60.     </script>
  61.   </head>
  62.  
  63.   <body>
  64.     <h1>register</h1>
  65.     用户名：<input name="uname" id="txtName"/><br/><span id="msg"></span>
  66.     <br/>
  67.   密      码：<input name="upwd" type="password" id="txtPwd"/>
  68.   </body>
  69. </html>

标黄颜色背景的代码与上面提交方式为get请求的代码不同,我们需要注意当为Post请求时setRequestHeader()的方法是必须要写的

我们来看一下效果：

当在txtName输入不是admin的字符时，我们来看下效果

当在txtName输入是admin的字符时，我们来看下效果

注意Request Method的值已经变成Post

JSON

JSON:JavaScript对象表示法（JavaScript Object Notation）它是存储和交换文本信息的语法，类似于XML。JSON比XML更小，更快，更清晰

测试：（在Web项目中新建一个json.jsp页面，来测试JSON）

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.     <title>json</title>
  12.     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  13.     <script type="text/javascript">
  14.       var data={"firstName":"Brett","lastName":"hehe"};
  15.     $.each(data,function(i,dom){
  16.         alert(dom);
  17.     });
  18.     </script>
  19.   </head>
  20.  
  21.   <body>
  22.     <h1>register</h1>
  23.     用户名：<input name="uname" id="txtName"/><br/><span id="msg"></span>
  24.     <br/>
  25.   密      码：<input name="upwd" type="password" id="txtPwd"/>
  26.   </body>
  27. </html>

each()方法用来读取json

我们来看一下效果：（当访问页面时，会出现两个提示，一个为Brett一个为hehe）

当需要遍历json时应在json.jsp编写如下代码

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.     <title>json</title>
  12.     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  13.     <script type="text/javascript">
  14.  
  15.       /*var data={"firstName":"Brett","lastName":"hehe"};
  16.     $.each(data,function(i,dom){
  17.     alert(dom);
  18.     }); */
  19.  
  20. var data={
  21.     "people":[
  22.         {"firstName":"悟空","lastName":"大闹","email":"天宫"},
  23.         {"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
  24.         {"firstName":"Elliotte","lastName":"Harold","email":"cccc"}
  25.     ]
  26. };
  27. $.each(data.people,function(i,dom){
  28.     alert(dom.firstName);
  29.     });
  30.     </script>
  31.   </head>
  32.  
  33.   <body>
  34.     <h1>register</h1>
  35.     用户名：<input name="uname" id="txtName"/><br/><span id="msg"></span>
  36.     <br/>
  37.   密      码：<input name="upwd" type="password" id="txtPwd"/>
  38.   </body>
  39. </html>

我们来看下效果（页面上提示出三个提示框一个为悟空，一个为jason，一个为Elliotte）

Ajax与json的更多相关文章

  1. ASP.NET 5 - $.ajax post JSON.stringify(para) is null

    JavaScript 代码: var para = {}; para.id = $("#ad-text-id").val(); para.title = $("#ad-t ...

  2. qt qml ajax 获取 json 天气数据示例

    依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...

  3. ajax将json写到table中去

    查询条件: <table style="width: 100%;border-collapse: collapse;" > <tr> <th styl ...

  4. ajax获取json对象

    ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...

  5. Ajax与json在前后端中的细节解惑

    ajax请求JSON Thinkphp中对是否为Ajax的判断,在TP3.2开发手册中有这么一段:“需要注意的是,如果使用的是ThinkAjax或者自己写的Ajax类库的话,需要在表单里面添加一个隐藏 ...

  6. Ajax与Json的一些总结

    Ajax与Json AJAX=异步javaScript 和XML AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不 ...

  7. ajax返回JSON时的处理方式

    JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). json_encode() 该函数主要用来将数组和对象, ...

  8. JQuery处理json与ajax返回JSON实例

    一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内 ...

  9. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  10. [Javascript,JSON] JQuery处理json与ajax返回JSON实例

    转自:http://www.php100.com/html/program/jquery/2013/0905/5912.html [导读] json数据是一种经型的实时数据交互的数据存储方法,使用到最 ...

随机推荐

  1. 【python环境配置1】 环境变量与常用模块

    1. 安装python27 2. 配置环境变量 找到python.exe的安装文件夹,复制路径(C:\python27\Arcgis10.2): 将该路径粘贴到 "控制面板\系统和安全\系统 ...

  2. Java并发编程：同步容器

    Java并发编程:同步容器 为了方便编写出线程安全的程序,Java里面提供了一些线程安全类和并发工具,比如:同步容器.并发容器.阻塞队列.Synchronizer(比如CountDownLatch). ...

  3. PHP多维数组根据其中一个字段的值排序

    平时简单的一维数组或者简单的数组排序这里就不多作介绍,这里主要是针对平时做项目中的可能遇到的情况,根据多维数组中的其中一个排序.用到的php函数是:array_multisort. 思路:获取其中你需 ...

  4. rabbitmq trace 日志的使用以及其疑惑之处

    RabbitMQ 默认日志里只有类似客户端"accpet/close"等信息,对于有异常或者跟踪消息内部结构就比较麻烦了. 不过MQ有个rabbitmq_tracing插件,安装该 ...

  5. SQLServer清空日志

      USE [master]  GO  ALTER DATABASE TRAVEL SET RECOVERY SIMPLE WITH NO_WAIT  GO  ALTER DATABASE TRAVE ...

  6. js无限级树菜单

    以前做网站,树形菜单一般都很简单,自己定义风格样式,简单的js控制,后来原来网上很多文章都在讨论Js树型菜单,看了几个实例,发现这个树比较简单好用. http://hovertree.com/texi ...

  7. Android—实现自定义相机倒计时拍照

    这篇博客为大家介绍Android自定义相机,并且实现倒计时拍照功能 首先自定义拍照会用到SurfaceView控件显示照片的预览区域,以下是布局文件: 两个TextView是用来显示提示信息和倒计时的 ...

  8. Android-正方形的容器

    package liu.myrecyleviewchoosephoto.view; import android.content.Context; import android.util.Attrib ...

  9. IOS RunLoop浅析 一

    RunLoop犹如其名循环. RunLoop 中有多重模式. 在一个“时刻”只能值执行一种模式. 因此在使用RunLoop时要注意所实现的效果有可能不是你想要的. 在这里用NSTimer展示一下Run ...

  10. Linux－1:安装&忘记密码&CRT连接centos 6.5

    我是在虚拟机VM安装的centos 6.5 一.Linux安装 Ctrl + Alt:鼠标退出LINUX界面 安装我是参考,当然也可以根据网上教程安装:http://oldboy.blog.51cto ...