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成为理想的数据交换语言.易于人阅读和编写,同时也易 ...
随机推荐
- ElasticSearch mapping中字段属性总结
- node.js获取cookie
node.js 获取cookie var Cookies ={}; if (req.headers.cookie != null) { req.headers.cookie.split(';').fo ...
- hdu 1087 最大递增和
思路和LIS差不多,dp[i]为i结尾最大值 #include <iostream> #include <string> #include <cstring> #i ...
- python 中函数
函数 def 函数名(形参):形参不用在前面定义,局部变量 参数 必须参数 必须以正确的顺序传参 关键字参数 加入关键字后可以不需要正确 ...
- Flexviewer调用特定的widget
Flexviewer调用特定的widget: 之前一直是自己添加个固定的key来调用widget 但是后来发现框架早就为你写好啦调用widget的方法 在WidgetManager中有个 public ...
- JSP初学者2
<jsp:useBean id="name" class="classname" scope="page|request|session|app ...
- linux漏洞分析入门笔记-bypass_PIE
ubuntu 16.04 IDA 7.0 docker 0x00:漏洞分析 1.ASLR的是操作系统的功能选项,作用于executable(ELF)装入内存运行时,因而只能随机化stack.heap. ...
- matlab练习程序（随机粒子切换特效）
视频制作软件中一般都会有相邻帧切换的特效,我过去用过vagas好像就有很多切换特效. 我想这个也算是其中一种吧,虽然我不确定实际中到底有没有这种切换. 实际上我只是下班后太无聊了,写着玩的,没什么高深 ...
- [Err] 1214 - The used table type doesn't support FULLTEXT indexes
-- -- Table structure for table `film_text` -- -- InnoDB added FULLTEXT support in 5.6.10. If you us ...
- 【面试虐菜】—— 常用SQL语句
创建表 create table emp( id decimal, name ), age decimal) 删除表 DROP TABLE EMP 插入默认值 CREATE TABLE EMP( Id ...