Ajax，Json数据格式
同步和异步
同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待 卡死状态
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随 意做其他事情，不会被卡死
Ajax的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面1 功能。
js原生的Ajax技术，异步和同步操作
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* 1）创建Ajax引擎对象
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）接受响应数据
*/
function f1(){
//1）创建Ajax引擎对象
var xmlhttp=new XMLHttpRequest();
//2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
xmlhttp.onreadystatechange=function(){
//5）接受响应数据
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var res=xmlhttp.responseText;
document.getElementById("span1").innerHTML=res;
}
}
//3）绑定提交地址
xmlhttp.open("GET", "${pageContext.request.contextPath}/AjaxServlet", true);//请求方式，请求地址，是否异步
//4）发送请求
xmlhttp.send();
}
function f2(){
//1）创建Ajax引擎对象
var xmlhttp=new XMLHttpRequest();
//2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
xmlhttp.onreadystatechange=function(){
//5）接受响应数据
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var res=xmlhttp.responseText;
alert(res);
}
}
//3）绑定提交地址
xmlhttp.open("POST", "${pageContext.request.contextPath}/AjaxServlet", true);//请求方式，请求地址，是否异步
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4）发送请求
xmlhttp.send("name=张三");
}
function f3(){
//1）创建Ajax引擎对象
var xmlhttp=new XMLHttpRequest();
//2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
xmlhttp.onreadystatechange=function(){
//5）接受响应数据
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var res=xmlhttp.responseText;
document.getElementById("span2").innerHTML=res;
}
}
//3）绑定提交地址
xmlhttp.open("GET", "${pageContext.request.contextPath}/AjaxServlet", false);//请求方式，请求地址，是否异步
//4）发送请求
xmlhttp.send();
}
</script>
</head>
<body>
<input value="异步访问" type="button" onclick="f1()">
<span id="span1"></span>
<br>
<input value="同步访问" type="button" onclick="f3()">
<span id="span2"></span>
<br>
<input value="测试" type="button" onclick="alert()">
</body>
</html>
Ajaxservlet:
package com.oracle.web; import java.io.IOException;
import java.util.Random; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class AjaxServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
/*request.setCharacterEncoding("utf-8");
String name=request.getParameter("name");
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(name+"你好");*/
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
response.getWriter().write(new Random().nextDouble()+"");
} public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
Json数据格式
json是一种与语言无关的数据交换的格式，作用：
使用ajax进行前后台数据交换
移动端与服务端的数据交换
Json格式：
1）对象格式：{"key1":obj,"key2":obj,"key3":obj...}
2）数组/集合格式：[obj,obj,obj...]
例如：user对象 用json数据格式表示
{"username":"zhangsan","age":28,"password":"123","addr":"淄博"}
List<Product> 用json数据格式表示
[{"pid":"10","pname":"小米4C"},{},{}]
注意：对象格式和数组格式可以互相嵌套
json的key是字符串 jaon的value是Object
json的解析：
json是js的原生内容，也就意味着js可以直接取出json对象中的数据
Json的转换插件
将java的对象或集合转成json形式字符串
json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。
常用的json转换工具有如下几种：
1）jsonlib
2）Gson：google
3）fastjson：阿里巴巴
json例子：
<script language="JavaScript">
/**
* 案例一
* {key:value,key:value}
*
* class Person{
* String firstname = "张";
* String lastname = "三丰";
* Integer age = 100;
* }
*
* Person p = new Person();
* System.out.println(p.firstname);
*/
var person={"firstname":"张","lastname":"三丰","age":100};
alert(person.lastname);
alert(person.age); </script>
<script language="JavaScript">
/**
* 案例二
* [{key:value,key:value},{key:value,key:value}]
*
*/
var persons=[{"name":"zhangsan",age:18},{"name":"lisi",age:19},{"name":"wangwu",age:20}];
alert(persons[1].name);
alert(persons[2].age); </script>
<script language="JavaScript">
/**
* 案例三
* {
* "param":[{key:value,key:value},{key:value,key:value}]
* }
*
*
*/
var school= {
"c0601班":[{"name":"张三","age":23},{"name":"李四","age":20}],
"c0602班":[{"name":"赵四","age":34},{"name":"王强","age":25}]
}; alert(school.c0601班[1].name); </script>
jQuery的Ajax技术
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中 经常使用的有三种
1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])
其中：
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等
3）$.ajax( { option1:value1,option2:value2... } ); ---- 以后在掌握
常用的option有如下：
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址
例子：
user实体类：
package com.oracle.domain;
public class User {
private String name ;
private int age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
@Override
public String toString() {
return "User [name=" + name + ", age=" + age + "]";
}
}
jsp页面代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="${pageContext.request.contextPath }/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function f1(){
$.get(
"${pageContext.request.contextPath }/Ajax2Servlet",
{"name":"zhangsan","age":18},
function(data){
alert(data.name);
},
"json"
)
}
function f2(){
$.post(
"${pageContext.request.contextPath }/Ajax2Servlet",
{"name":"zhangsan","age":18},
function(data){
alert(data.name);
},
"json"
)
}
function f3(){
$.ajax({
url:"${pageContext.request.contextPath }/Ajax2Servlet",
async:true,
type:"POST",
data:{"name":"lusi","age":18},
success:function(data){
alert(data.name);
},
error:function(){
alert("请求失败");
},
dataType:"json" })
}
</script>
</head>
<body>
<input type="button" value="get异步提交服务器" onclick="f1()">
<input type="button" value="PSOT同步提交服务器" onclick="f2()">
<input type="button" value="ajax提交服务器" onclick="f3()">
</body>
</html>
servlet代码：
package com.oracle.web; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson;
import com.oracle.domain.User; public class Ajax2Servlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name=request.getParameter("name");
String agestr=request.getParameter("age");
int age=Integer.parseInt(agestr);
User user=new User();
user.setAge(age);
user.setName(name);
Gson gs=new Gson();
String js=gs.toJson(user);
System.out.println(js);
response.getWriter().write("{\"name\":\""+name+"\",\"age\":"+age+"}");
response.getWriter().write(js);
} public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
Ajax，Json数据格式的更多相关文章
- Ajax json 数据格式
ajax : 是么是同步 什么事异步 同步现象:客户端发送请求到服务端,当服务端返回响应之前,客户端都处于等待卡死状态. 异步现象:客户端发送请求到服务器端,无论服务器是否返回,客户端都可以随意做其他 ...
- $Django ajax简介 ajax简单数据交互,上传文件(form-data格式数据),Json数据格式交互
一.ajax 1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json 2 ajax干啥用的?前后端做数据交互: 3 之前学的跟后台做交互的方式: -第一种:在浏览器 ...
- 一、Ajax 二、JSON数据格式 三、Ajax+Jquery 四、分页的实现
一.Ajax概述###<1>概述 ###<2>组成 以XMLHttpRequest为核心,发送Ajax请求和接收处理结果 以javascript为语言基础 以XML/JSON作 ...
- ajax使用json数据格式--无效的 JSON 基元
ajax使用json数据格式提交 一开始这么写的 var flobj = { UserId: userid, ForbidSDT: ForbidSDT, ForbidEDT: ForbidEDT } ...
- Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)
Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...
- AJAX优势、跨域方案及JSON数据格式和浏览器中JSON对象
ajax 不重新加载整个网页的情况下,更新部分网页的技术 注意:ajax只有在服务器上运行才能生效,我在本地一般用phpstudy 优点: 1.优化用户体验 2.承担了一部分本该服务器端的工作,减轻了 ...
- XML和JSON数据格式对比
概念 XML 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语 ...
- JS中将JSON的字符串解析成JSON数据格式《转》
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...
- JSON 数据格式
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人阅读和编写,同时也易 ...
随机推荐
- JS中彻底删除json对象组成的数组中的元素
只是分享一个小知识~ 在JS中,对于某个由json对象组成的数组,例如: var test = [{ "a": "1", "b": &quo ...
- BNU 4260 ——Trick or Treat——————【三分求抛物线顶点】
ial Judge Prev Submit Status Statistics Discuss Next Type: None None Graph Theory 2-SAT ...
- php 不用第三个变量 交换两个变量的值汇总
//方法一:$a ="abc";$b="def"; $a = $a^$b;$b = $b^$a;$a = $a^$b; //方法二:list($a, $b)= ...
- Thrift笔记(六)--单端口 多服务
多个服务,使用监听一个端口.先上一个demo Test.thrift namespace java com.gxf.thrift enum RequestType { SAY_HELLO, //问好 ...
- gcc工作原理
gcc工作流程 1.预处理 --E 1.宏替换 2.头文件展开 3.注释去掉 4.xxx.c -> xxx.i 2.编译 --S 1.xxx.i -> xxx.s 2.汇编文件 3.汇编 ...
- 科学计算基础包——Numpy
一.NumPy简介 NumPy是高性能科学计算和数据分析的基础包.它是pandas等其他各种工具的基础. 1.NumPy的主要功能 (1)ndarray:一个多维数组结构,高效且节省空间. (2)无需 ...
- CSS3 常用新特性总结
更新于(2017.07.07)会总结项目中比较常用的有些CSS属性 伪类选择器 E:first-of-type: 匹配同类型中的第一个同级兄弟元素E E:last-of-type: 匹配同类型中的最后 ...
- 《CSS实现单行、多行文本溢出显示省略号》
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方式: overflow: hidden; te ...
- ASP.NET MVC 音乐商店 - 5 通过支架创建编辑表单 续
查看 StoreManager 控制器的代码 现在,Store Manager 控制器中已经包含了一定数量的代码,我们从头到尾重新过一下. 首先,在控制器中包含了标准的 MVC 控制器的代码,为了使用 ...
- Eclipse 各版本名称的由来
2001年11月7日 ,Eclipse 1.0发布 半年之后,2002年6月27日Eclipse进入了2.0时代.2.0时代的Eclipse经历了2.0和2.1两个大的版本.其中2.0在 之后又推出了 ...