Ajax与json
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
package cn.happy.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 {
//定义一个字符串uname，request.getParameter("uname")中的uname是从前端页面获取的
String uname=request.getParameter("uname");
//判断字符串uname的值是否为andmin
if(uname.equals("admin"))
{
response.getWriter().write("OK");
}else
{
response.getWriter().write("NO");
}
}
}
步骤2:在index.jsp页面中进行配编写
<%@ 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>Ajax校验</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<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("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);
}
</script>
</head>
<body>
<h1>register</h1>
用户名：<input name="uname" id="txtName"/><br/><span id="msg"></span>
<br/>
密 码：<input name="upwd" type="password" id="txtPwd"/>
</body>
</html>
步骤三：在浏览器端测试效果
当在txtName输入不是admin的字符时，我们来看下效果
当在txtName输入是admin的字符时，我们来看下效果
编写测试（提交方式为post） (index.jsp页面上有两个文本框，一个name为txtName，一个name为txtPwd，当在txtName输入用户名时（鼠标光标移除文本框时）来判断用户名是否被注册并提示错误信息)
当提交方式为Post时，我们只需要在index.jsp的页面上修改JavaScript代码即可，其他步骤不变
<%@ 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>Ajax校验</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<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真正的发送请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("uname="+myval);
}
</script>
</head>
<body>
<h1>register</h1>
用户名：<input name="uname" id="txtName"/><br/><span id="msg"></span>
<br/>
密 码：<input name="upwd" type="password" id="txtPwd"/>
</body>
</html>
标黄颜色背景的代码与上面提交方式为get请求的代码不同,我们需要注意当为Post请求时setRequestHeader()的方法是必须要写的
我们来看一下效果：
当在txtName输入不是admin的字符时，我们来看下效果
当在txtName输入是admin的字符时，我们来看下效果
注意Request Method的值已经变成Post
JSON
JSON:JavaScript对象表示法（JavaScript Object Notation）它是存储和交换文本信息的语法，类似于XML。JSON比XML更小，更快，更清晰
测试：（在Web项目中新建一个json.jsp页面，来测试JSON）
<%@ 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>json</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var data={"firstName":"Brett","lastName":"hehe"};
$.each(data,function(i,dom){
alert(dom);
});
</script>
</head>
<body>
<h1>register</h1>
用户名：<input name="uname" id="txtName"/><br/><span id="msg"></span>
<br/>
密 码：<input name="upwd" type="password" id="txtPwd"/>
</body>
</html>
each()方法用来读取json
我们来看一下效果：（当访问页面时，会出现两个提示，一个为Brett一个为hehe）
当需要遍历json时应在json.jsp编写如下代码
<%@ 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>json</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
/*var data={"firstName":"Brett","lastName":"hehe"};
$.each(data,function(i,dom){
alert(dom);
}); */
var data={
"people":[
{"firstName":"悟空","lastName":"大闹","email":"天宫"},
{"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
{"firstName":"Elliotte","lastName":"Harold","email":"cccc"}
]
};
$.each(data.people,function(i,dom){
alert(dom.firstName);
});
</script>
</head>
<body>
<h1>register</h1>
用户名：<input name="uname" id="txtName"/><br/><span id="msg"></span>
<br/>
密 码：<input name="upwd" type="password" id="txtPwd"/>
</body>
</html>
我们来看下效果（页面上提示出三个提示框一个为悟空，一个为jason，一个为Elliotte）
Ajax与json的更多相关文章
- ASP.NET 5 - $.ajax post JSON.stringify(para) is null
JavaScript 代码: var para = {}; para.id = $("#ad-text-id").val(); para.title = $("#ad-t ...
- qt qml ajax 获取 json 天气数据示例
依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...
- ajax将json写到table中去
查询条件: <table style="width: 100%;border-collapse: collapse;" > <tr> <th styl ...
- ajax获取json对象
ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...
- Ajax与json在前后端中的细节解惑
ajax请求JSON Thinkphp中对是否为Ajax的判断,在TP3.2开发手册中有这么一段:“需要注意的是,如果使用的是ThinkAjax或者自己写的Ajax类库的话,需要在表单里面添加一个隐藏 ...
- Ajax与Json的一些总结
Ajax与Json AJAX=异步javaScript 和XML AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不 ...
- ajax返回JSON时的处理方式
JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). json_encode() 该函数主要用来将数组和对象, ...
- JQuery处理json与ajax返回JSON实例
一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内 ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- [Javascript,JSON] JQuery处理json与ajax返回JSON实例
转自:http://www.php100.com/html/program/jquery/2013/0905/5912.html [导读] json数据是一种经型的实时数据交互的数据存储方法,使用到最 ...
随机推荐
- DES加密中文乱码问题的解决
服务器向客户端返回时: response.setContentType("text/json; charset=utf-8"); 客户端解码时: return new String ...
- windows phone 水印TextBox
原文来自:wp教程网 原理:在失去焦点和获取焦点的时候,判断Text值是否为空或者是否与水印值相同,然后修改TextBox中的Text和Foreground. 代码如下: /* =========== ...
- [连载]《C#通讯（串口和网络）框架的设计与实现》-1.通讯框架介绍
[连载]<C#通讯(串口和网络)框架的设计与实现>- 0.前言 目 录 第一章 通讯框架介绍... 2 1.1 通讯的本质... 2 1 ...
- SharePoint 2013 图文开发系列之网站栏
网站栏的本质,就是一个xml的描述文件,所以创建过程,基本就是通过Feature部署一个Xml文件,然后修改Xml文件的网站栏描述. 1.添加新项目,选择SharePoint 2013 空项目,如下图 ...
- C#中的泛型
写在前面:好几个月没更新了,这些天换了份工作,原来的公司出了很多事所以辞职了.这篇文章写的超级好,让我终于明白了困扰在我心里好久的C#泛型的概念,不仅收藏了,还手动转发一下 哈哈哈~ 1.1 C#中的 ...
- 自定义AlertDialog控件的使用（AndroidStudio）
AlertDialog 第一种:可随意自定义控件 第一步:自定义弹出的页面 ,新建一个XML页面 如下图 不需要Activity 第二步:在主页面设置一个按钮弹出上图页面 (下面是主要代码 调用 ...
- 关于iOS的runtime
runtime是一个很有意思的东西,如果你学iOS开发很经常就会用到或被问到runtime.那么runtime是什么呢,如何去了解它. runtime:中文名 运行时,系统在编译时留下的一些 类型,操 ...
- iOS 获取用户授权的用户隐私保护-地图定位
获取用户授权的用户隐私保护地图定位示例://导入定位框架#import<CoreLocation/CoreLocation.h>@interfaceViewController()< ...
- 使用 UICollectionView 实现日历签到功能
概述 在 App 中,日历通常与签到功能结合使用.是提高用户活跃度的一种方式,同时,签到数据中蕴含了丰富的极其有价值的信息.下面我们就来看看如何在 App 中实现日历签到功能. 效果图 ..... 思 ...
- IOS开发之Bug--关于UIImageView的使用
这里是遇到的一个关于使用UIImageView的小bug,bug就是加载不出来图片. 原因:如果图片资源是jpg文件,如果代码没有加后缀.jpg就会出现不加载出来的情况: 添加上.jpg就能加载出来了 ...