web_22&AJAX的使用

最新推荐文章于 2024-07-12 09:12:36 发布

七野..

最新推荐文章于 2024-07-12 09:12:36 发布

阅读量1k

点赞数

文章标签： ajax 前端服务器

本文链接：https://blog.csdn.net/m0_64719055/article/details/124484979

版权

1.原生态js的ajax工作流程

1.兼容性处理得到一个XMLHttpRequest对象

2.根据核心对象调用一个open方法开启与服务器指定的servlet连接。

XMLHttpRequest.open("post","/hello.do".true);

（第三个参数）：

异步与同步
2.1 同步false
一个人同一时间只能做一件事情，只有一件事情做完，才能做另一件事情。
2.2 异步true
一个人事情做了一半，转而去做其他事情，当其他事情做完以后，再回过头做之前未完成的事情。

3.发送信息到指定路径去

XMLHttpRequest。send()

4.调用特定回调函数响应servlet的结果

2.JSON使用

对象字符串，满足定义规则的字符串。
1.1 前端JSON格式字符串的转换使用
JavaScript——JSON.stringify(o);JSON.parse(jsonStr);
jQuery——$.parseJSON

1.2 后端JSON格式字符串的转换使用
jackJSON

package com.zking.test;

import java.io.IOException;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.entity.User;

public class Test2 {

	public static void main(String[] args) throws IOException {
		
		//jackjson基本使用
		//必须实例化ObjectMapper对象才能使用
		ObjectMapper om=new ObjectMapper();
		User u=new User(2,"的经济代价", "女");
		String asString = om.writeValueAsString(u);//转换为符合json格式的字符串
		System.out.println(asString);
		String ds="{\"id\":2,\"username\":\"的经济代价\",\"sex\":\"女\"}";
		User readValue = om.readValue(ds, User.class);
		System.out.println(readValue);
		
		
		
		
		
		
		
		
		
	}

}

fastJSON

package com.zking.test;

import java.util.ArrayList;
import java.util.List;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.zking.entity.User;

public class Test {

	public static void main(String[] args) {
		
//		fastjson基本使用
		User user=new User(1, "昊天","男");
		//通过fastJSON工具转换
		String jsonString = JSON.toJSONString(user);
		//System.out.println(jsonString);
		
		//将符合json格式的字符串转换位对应的xx
		String sb="{\"id\":1,\"sex\":\"男\",\"username\":\"昊天\"}";
		User parseObject = JSON.parseObject(sb, User.class);
		//System.out.println(parseObject);
		
		List<User> list=new ArrayList<>();
		for(int i=0;i<=500;i++) {
			if(i>=0&&i<=100) {
				list.add(new User(i, "柳神"+i, "女"));
			}else if(i>=101&&i<=200) {
				list.add(new User(i, "琉璃"+i, "女"));
			}else if(i>=1201&&i<=300) {
				list.add(new User(i, "路小易"+i, "男"));
			}else if(i>=301&&i<=400) {
				list.add(new User(i, "石昊"+i, "男"));
			}else if(i>=401&&i<=500) {
				list.add(new User(i, "xpw"+i, "男"));
			}
		}
		//将list集合转换为符合json格式的字符串
		String jsonString2 = JSON.toJSONString(list);
		//System.out.println(jsonString2);
		//将符合json格式的字符串转换位对应的xx
		List<User> parseArray = JSON.parseArray(jsonString2, User.class);
		System.out.println(parseArray);
		
		
		
		
		
	}

}

3.jquery AJAX的使用语法

$.ajax({
       url:"发送请求（提交或读取数据）的地址",
       dataType:"预期服务器返回数据的类型",
       type:"请求方式",
       async:"true/false",
       data:{发送到/读取后台（服务器）的数据},
        success:function(data){请求成功时执行},
        error:function(){请求失败时执行}
   });

   $.post(url, [data], [callback], [type]);

参数1：url，请求路径
参数2：data，请求参数
参数3：callback，回调函数
参数4：type，返回内容格式，默认的是text,xml, html, script, json, text, _default。

$.get(url, [data], [callback], [type]);

第一个参数：请求的路径如：
   ${pageContext.request.contextPath}/Servlet1
第二个参数：请求的参数格式：// JSON数据格式
   {key1:value1,key2:value2}
第三个参数：回调函数格式：
function(data){
alert(data);
}
第四个参数：返回内容格式：xml, html, script, json, text, _default。
<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ 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" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">

$(function(){
	$("#btn").click(function(){
		//alert("====");
		$.ajax({
			url:"demo2.do",
			type:"post",
			data:{"username":"admin"},
			datatype:"text",
			success:function(date){
				//alert(date);
				$("div").html(date);
			},
			error:function(stat){
				alert(stat.status);
			}
		});
	})
})


</script>
</head>
<body>
	
	<button id="btn">点击Ajax传入servlet界面</button>
	<div style="height: 40px;background-color: pink;">
	
	</div>
	<%=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()) %>
</body>
</html>

4.为什么需要使用AJAX技术

> 在我们之前的开发，每当用户向服务器发送请求，**哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。**
>
> - **性能会有所降低(一点内容，刷新整个页面！)**
> - **用户的操作页面会中断(整个页面被刷新了)**
>
> **Ajax就是能够做到局部刷新**！

5.应用场景

- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单项离开焦点数据验证
- 搜索框提示文字下拉列表

七野..

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web_22&AJAX的使用

1.原生态js的ajax工作流程1.兼容性处理得到一个XMLHttpRequest对象2.根据核心对象调用一个open方法开启与服务器指定的servlet连接。XMLHttpRequest.open("post","/hello.do".true);（第三个参数）：异步与同步 2.1 同步false 一个人同一时间只能做一件事情，只有一件事情做完，才能做另一件事情。 2.2 异步true 一个人事情做了一半，转而去做其他事情，当其他事情做完以后，再...
复制链接

扫一扫