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成为理想的数据交换语言.易于人阅读和编写,同时也易 ...
随机推荐
- SpringBoot - 工程搭建
SpringBoot 简介 1.Spring 的封装.其设计目的是用来简化 Spring 应用的初始搭建以及开发过程. 2.SpringCloud 微服务的基础 搭建环境 jdk 1.8 + mave ...
- python 对列表去重，并保持列表原来顺序
mailto = ['cc', 'bbbb', 'afa', 'sss', 'bbbb', 'cc', 'shafa'] addr_to = list(set(mailto)) addr_to.sor ...
- tomcat-dbcp数据库连接池配置以及使用时候的一些坑
一.数据库连接池 开发的时候经常会需要对数据库进行一些操作,比如说常见的增删改查之类的,当数据量小的时候,可以直接进行操作,但是当数据量增多的时候,每一次连接以及释放数据库都会耗费一定的时间,这个时候 ...
- 深入理解JavaScript系列（20）：《你真懂JavaScript吗？》答案详解
介绍 昨天发的<大叔手记(19):你真懂JavaScript吗?>里面的5个题目,有很多回答,发现强人还是很多的,很多人都全部答对了. 今天我们来对这5个题目详细分析一下,希望对大家有所帮 ...
- linux下为.net core应用创建守护进程
1.Supervisor 安装 yum install python-setuptools easy_install supervisor 2.配置 Supervisor mkdir /etc/sup ...
- npm安装gulp-sass失败处理办法
最近在做一个基于gulp的前端自动化的项目,在github上拉取代码后,按照正常的流程,首先我们要 npm install ,在安装的过程中,一直提示我gulp-sass 安装失败,我用尽了好多办法 ...
- 图片的URL上传至阿里云OSS操作（微信小程序二维码返回的二进制上传到OSS）
当我们从网络中获取一个URL的图片我们要存储到本地或者是私有的云时,我们可以这样操作 把url中的图片文件下载到本地(或者上传到私有云中) public String uploadUrlToOss ...
- Linux 连接 Xshell 及网络配置
一.准备工具 在WMware上已经装有Linux系统:WMware安装CentOS7文章. xshell连接工具: 二.修改相关配置 切换到root用户下: 配置主机名(可选): #方法一:替换原主机 ...
- Sql server 0x80131904
这是一个比较让人纠结的错误. 背景:添加了网站的分支,要拿一个现有的数据库做一个新的数据库的东东. 首先就是还原备份,然后做代码的修改.然而在登录的时候报了这个错误.0x80131904 什么插入的列 ...
- oracle学习篇七：更新操作、事务处理
----------------1.数据库更新操作----------------------------- select * from tab;--查询表 drop table siebel_use ...