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成为理想的数据交换语言.易于人阅读和编写,同时也易 ...
随机推荐
- 使用SeaJS实现模块化JavaScript开发【转】
前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封 ...
- js event鼠标事件
1,鼠标焦点事件 <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...
- 【一】JMeter的介绍安装和使用
利用JMeter进行性能测试 一.JMeter介绍二.Jmeter安装三.工作原理四.脚本录制五.运行JMeter进行测试六.JMeter主要组件介绍七.参数化设置八.动态数据关联九.使用插件进行服务 ...
- Android活动的启动模式
1. standard 标准模式,是活动默认的启动模式,在不进行显示指定的情况下,所有活动都会自动使用这种模式. Android使用返回栈管理活动,在standard模式下,每当启动一个新的活动,它就 ...
- 软件项目技术点(2)——Canvas之坐标系转换
AxeSlide软件项目梳理 canvas绘图系列知识点整理 默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为 ...
- linux环境下 mysql数据库忘记密码 处理办法
整个修改过程大概3-10分钟(看个人操作),这个时间内mysql出于不需要密码就能登陆的状态,请设法保证系统安全 不罗嗦直接上步骤 1.vi /etc/my.cnf 在[mysqld]下,添加一句:s ...
- 用js md5加密
/* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as d ...
- canvas玩转微信红包
CSS3相关属性: <!DOCTYPE html> <html> <head lang='en'> <meta charset='UTF-8'/> &l ...
- Spark应用(app jar)发布到Hadoop集群的过程
记录了Spark,Hadoop集群的开启,关闭,以及Spark应用提交到Hadoop集群的过程,通过web端监控运行状态. 1.绝对路径开启集群 (每次集群重启,默认配置的hadoop集群中tmp文件 ...
- spark编程python实例
spark编程python实例 ValueError: Cannot run multiple SparkContexts at once; existing SparkContext(app=PyS ...