web_22&AJAX的使用

最新推荐文章于 2024-06-15 11:46:27 发布

且行且珍惜101

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量83

点赞数

分类专栏： AJAX 文章标签：前端 ajax 服务器

本文链接：https://blog.csdn.net/qq_64286752/article/details/124772008

版权

AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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的结果
————————————————
版权声明：本文为CSDN博主「七野..」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_64719055/article/details/124484979

2.JSON使用


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>

$.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就是能够做到局部刷新**！
————————————————
版权声明：本文为CSDN博主「七野..」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_64719055/article/details/124484979

5.应用场景

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

且行且珍惜101

关注

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 一个人事情做了一半，转而去做其他事情，当其他事情做完以后，再...
复制链接

扫一扫