学习JavaWeb第十九天

最新推荐文章于 2023-07-05 14:42:58 发布

dirft_lez

最新推荐文章于 2023-07-05 14:42:58 发布

阅读量2.2k

点赞数

分类专栏： java 文章标签： web

本文链接：https://blog.csdn.net/dirft_lez/article/details/109699982

版权

java 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

ajax和Json

ajax

简介：Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

js原生的ajax请求（非重点）

步骤繁琐：

步骤：
- 1 创建 XMLHttpRequest 对象的语法： var iable=new XMLHttpRequest();
- 2 规定请求的类型、URL 以及是否异步处理请求
  - xmlhttp.open(“GET”,“test1.txt”,true);
  - get传参 test1.txt?name=zhangsan
  - post传参 xmlhttp.send(“name=zhangsan”);
  - open(method,url,async)
  - method：请求的类型；GET 或 POST
  - url：文件在服务器上的位置
  - async：true（异步）或 false（同步）
    *3 发生请求 xmlhttp.send();
    *4、根据状态获取响应信息

`xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}
}`

*4.1、onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
*4.2、readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*4.3、status
200: “OK”
404: 未找到页面

使用示例：

`<!-- get提交方式 -->
 <script type="text/javascript"> var xmlhttp = new XMLHttpRequest();
xmlhttp.open("get", "${pageContext.request.contextPath }/ss?name=德玛西亚", true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;}
} </script>`

`<script type="text/javascript"> var xmlhttp = new XMLHttpRequest();
xmlhttp.open("post", "${pageContext.request.contextPath }/ss", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=dddd");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;}
} </script>`

JQ的ajax请求（重点）

`<script type="text/javascript"> /* jq方式： */
$.ajax({
type: "post",  /* 提交方式 */
url: "${pageContext.request.contextPath}/s2", /* 链接地址  */
async:false, /* 是否异步 否表示同步  */
data: {"name":"John","location":"Boston"},  /* 传的参数 " 属性名=属性值&属性名=属性值& " 或者是 { 属性名:属性值,属性名:属性值 } */
dataType:"text", /* 返回的数据类型  */
success: function(msg){    /* 成功时 接收服务器数据的函数  */
alert( "Data Saved: " + msg );}
}); </script>`

参数介绍：
URL：和form表单中的action一样，都是代表请求的路径。
Data：数据，前台需要向后台传递的数据（一键值对形式）
Type：和form表单中method对应，代表请求类型 get/post
dataType：回传的数据类型。Text、xml、html、json…
success：成功的回调函数
async：是否异步
- true 异步默认
- false 同步
- 啥叫ajax的异步同步？
- 异步指的是同一脚本中多个存在多个ajax时候它们是不区分顺序的，而是并发执行 （提交数据时页面还可以操作其他内容）
- 同步 多个ajax按顺序执行。（提交数据时页面不可操作其他内容，页面可能会出现卡顿感）
注意事项
- 1、每个属性后都要跟随一个英文逗号，最后一个不用。
- 2、每一个属性都是键值对的形式存在，中间用英文冒号隔开:
- 3、data:{ } 是一个特殊的写法，值是一个{}，里面使用键值对存储，例如：data:{“键1”:值1, “键2”:值2, “键3”:值3}，也可以使用这种： data:" 键1=值1&键2=值2";
- 4、写法属性不用关心顺序问题

JQ的ajax请求简写方式：

`<script type="text/javascript"> /* jq简写方式post ：jQuery.post(url, [data], [callback], [type]) */
$.post(
"${pageContext.request.contextPath}/s2",    /* url链接地址 */
{"name":"老六","location":"南美"},      /* 数据 */
function(msg){                   /* 成功时回调的函数，以及回调的数据msg */
alert( "Data Saved: " + msg );
}, 
"text"          /* 返回的数据类型  */
) </script>`

$ .post(url,{},function(){},“text”)
- 是$.ajax({}) 的简写方式，只不过这里只能使用post提交的方式。
- 语法
- $ .post(“链接地址”,{键值对的数据},回调函数,返回值类型);
- $ .post(“check”,{“uname”:uname},function(obj){alert(obj);},“text”);
- 注意：这种写法功能和$.ajax是一样的，不过严格要求属性顺序。
$ .get(url,{},function(){},“text”);
- 是$ .ajax({}) 的简写方式，只不过这里只能使用get提交的方式。
- 语法
- $ .get(“url”,{键值对的数据},回调函数,返回值类型);
- $ .get(“check”,{“uname”:uname},function(obj){alert(obj);},“text”);
- 注意：这种写法功能和$.ajax是一样的，只不过严格要求属性顺序。

$ .ajax()、$ .post()、$ .get()区别:

相同点：效果一样异步交互。
不同点：
- $.ajax()、这个是jQuery最开始的封装的异步交互、采用的是JavaScript中XMLHttpRequest这一项技术（IE6 最开始支持的）、算是jQuery的第一次封装。功能强大、涵盖了get、post请求、并且书写上不区分顺序问题。
- $ .post()、是jQuery Ajax的第二次封装，原因是$ .ajax()写法过于臃肿，简化为$ .post()/$.get()，功能是相同的没有区别。但是在书写过程中要求属性的顺序必须按照严格的要求，否则整个Ajax不能使用。
- $ .get()，和post一样都属于jQuery的第二次封装，但是和post的区别是，虽然浏览器不能直接展示拼接的url，但是后台执行的时候，然后会缓存数据、大小限制、信息不安全等、但是唯一的好处是比$.post()快。

关于返回值类型：

Text 返回纯文本类型默认
Html 返回的HTML格式的代码
Script 直接返回脚本
Xml 返回xml格式的文件
Json 返回Json格式的数据
Jsonp 跨域数据交互协议
Html的返回和text实质是一样，一般情况下都用text代替了。

ajax之序列化表单信息：快速提取表单信息。

简介：序列化这个功能是jQuery的。目的是将表单中的值按固定格式定义出来。
选取 < form>进行序列化，但也可以对个别表单元素的 jQuery 对象进行序列化，比如 < input>, < textarea> 等
使用方式：表单对象 . serialize()
比如：$("#login").serialize( );
返回值格式(键值对形式，) ：”名字1”：”值1”&名字2”：”值2”…；

使用示例：

`<form method="post" ,action="">
    <input type="text" name="user"/>
    <input type="text" name="mail"/>
    <input type="radio" value="1" name="gender"> man
    <input type="radio" value="2" name="gender"> women
    <input type="submit" value="提交"/>
</form>
<script type="text/javascript"> //javascript
$('button').click(function(){
    $.ajax({
    type : 'POST',
    url : '/ajax/',
    data : $('form').serialize(),         //序列化表单输入，选择内容
        success : function (response, status, xhr) {
        alert(response);
        }
});
}); </script>`

Json：

简介：JSON ：一种轻量级的数据交换格式。在 JSON 中，一切都是对象。因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型：
存储特点：
- 对象表示为键值对
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组

JSON的数据的3种基本格式：

第一种：数组格式 [1, “哈哈”, 5, true]
第二种：对象格式 {“name”:“萌萌”,“age”:18}
第三种：对象数组

`[{
"name": "张三",
"age": 18,
"score": [93, 94, 99]
}, {
"name": "李四",
"age": 19,
"score": [93, 98, 99]
}, {
"name": "王五",
"age": 20,
"score": [93, 91, 99]
}]`

第四种：复杂类型

`{
"class": "0729",
"students": [{
"name": "张三",
"age": 18,
"score": [93, 94, 99]
}, {
"name": "李四",
"age": 19,
"score": [93, 98, 99]
}, {
"name": "王五",
"age": 20,
"score": [93, 91, 99]
}]
}`

json的转化工具：

Jsonlib 比较旧的一种转化json的工具，适用于简单的json转化
Fastjson 目前比较流行
Jackson工具： 经得起考验的一种工具，适用于java的任意框架。
- Jackson可以将我们的对象、集合、数组等转化为json串。Boolean值可以直接不需要转化，作用是获取后台数据，以对象形式去接收便于操作。
- 使用步骤：
- 1、导包：
- jackson-annotations-2.7.9.jar
- jackson-core-2.7.9.jar
- jackson-databind-2.7.9.jar
- 2、实例化ObjectMapper类对象：new ObjectMapper( );
- 3、调用ObjectMapper对象的writeValueAsString()方法，放进String、对象、数组等。比如：mapper.writeValueAsString(room);返回的是一个String；
- 4、接收调用。

使用示例：

package com.offcn.json.utils;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.offcn.entity.ClassRoom;
import com.offcn.entity.User;
import com.sun.org.apache.bcel.internal.generic.NEW;

@WebServlet("/j1")
public class JsonObejectDemo01 extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		Object arr[] = new Object[6];
		arr[0] = "大波浪";
		arr[1] = 18;
		arr[2] = true;
		arr[3] = new int[] { 1, 2, 3 };
		ArrayList<String> list = new ArrayList<String>();
		list.add("1号元素");
		list.add("2号元素");
		arr[4] = list;
		arr[5] = null;
		HashMap<Integer, Object[]> map = new HashMap<Integer, Object[]>();
		map.put(1, arr);
		ObjectMapper mapper = new ObjectMapper();
		String string = mapper.writeValueAsString(map);
		System.out.println(string);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}
//结果：
{"1":["大波浪",18,true,[1,2,3],["1号元素","2号元素"],null]}