Ajax&json

1|0一. 概念

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

1|1效果

无刷新：

只更新部分页面；

有效利用带宽；

提供连续的用户体验；

提供类似C/S的交互效果；

1|2传统Web和Ajax的差异

1|3get请求和post请求的区别

2|0二.ajax前端验证

//验证用户名是否已经注册
<script type="text/javascript">
  	 $(function(){
    		//失去焦点
    		$("#userName").blur(function(){
                var userName = $(this).val();
                $.ajax({
                    type:"post",
                   	url:"/userServlet?option=register",
                    data:"userName="+userName;
                    success:function(rs){
                    	if("1"==rs){
                            $("#fail").text("用户名已存在")
                            $("#success").text("")
                        }else{
                            $("#success").text("用户名可以使用")
                            $("#fail").text("")
                        }
                	},
                    error:function(error){
                        alert(error);
                    }
                });
            });
	});
</script>

3|0三.JSON

JavaScript Object Notation

一种轻量级的数据交换格式

采用独立与语言的文本格式‘

通常用于在客户端和服务器之间传递数据

3|1优点

轻量级交互语言

结构简单

易于解析

3|2解析JSON对象

var  JSON对象 ={"name":value,"name":value,...}
              
var person = {"name":"张三","age":30,"spouse":null}

<body>
    <div>
    	姓名:<span id="name"></span><br/>
        年龄:<span id="age"></span><br/>
        成绩:<span id="score"></span><br/>
        电话:<span id="phone"></span><br/>
    </div>
</body>
<script typetype="text/javascript" src="js/jquery-3.6.0.js"></script>
<script typetype="text/javascript">
	// 定义一个json对象
    var person = {"name":"张三","age":20,"score":90, "phone":"15388888888"};
    //解析json对象
    $("#name").text(person.name);
    $("#age").text(person.age);
    $("#score").text(person.score);
    $("#phone").text(person.phone);
</script>

3|3解析JSON数组

var JSON数组  = [value,value,...];
var countryArray = ["中国","美国","俄罗斯"];

<body>
    <div>
        <span id="arr_01"></span><br>
        <span id="arr_02"></span><br>
        <span id="arr_03"></span><br>
    </div>
</body>
<script typetype="text/javascript" src="js/jquery-3.6.0.js"></script>
<script typetype="text/javascript">
	// 定义一个json数组
    var fruit = ["苹果","香蕉","西瓜"];
    //解析json数组
    $("#arr_01").text(fruit[0]);
    $("#arr_02").text(fruit[1]);
    $("#arr_03").text(fruit[2]);
</script>

3|4解析JSON对象数组

var personArray = [{"name":"张三","age":30},{"name":"李四","age":40}];

<body>
   <table  border ="1" cellpadding = "30" cellspacing="0" width="700" id = "list">
       <tr>
           <th>序号</th>
       		<th>姓名</th>
           <th>年龄</th>
       </tr>
    </table> 
</body>
<script typetype="text/javascript" src="js/jquery-3.6.0.js"></script>
<script typetype="text/javascript">
	// 定义一个JSON对象数组
    var jsonArr = [
        {"name":"zs","age":10},
        {"name":"ls","age":11},
        {"name":"ww","age":12}
    ];
    //遍历方式1：
    for(var i = 0; i < jsonArr.length; i++){
        $("#list").append(
            "<tr><td>"+jsonArr[i].name+"</td>"+
            "<td>"+jsonArr[i].age+"</td></tr>"
    	);
    }
    //遍历方式2：
    var $arr =$(arr);//转化成一个jquery对象 
    $arr.each(function(index,item){
        $("#list").append(
            "<tr><td>"+(index+1)+"</td><td>"
            +item.name+"</td><td>"
            +item.age+"</td></tr>"
        );
    });
</script>

3|5ajax获取数据

//字符串转为json
$("#list").empty();
$("#list").append("<tr><th>编号</th><th>标题</th></tr>");
$.ajax({
    type:"post",
    url:"newServlet?option=select",
    data:"sign=3",
    dataType:"text",
    success:function(rs){
        var result = JSON.parse(rs);
        var $result = $(result);
        $result.each(function(index,item){
            $("#list").append(
            	"<tr><td>"+item.newsId+
                "</td><td>"+item.newsTitle+
                "</td></tr>"
            );
        };
    },
    error:function(error){
        alert(error);
    }
});

3|6使用fastJSON

List<News> list1 = newsService.getNewsListByTypeId(Integer.parseInt(sign));
PrintWriter out = response.getWriter();
JSONObject jsonObject=new JSONObject();// 对象
if (list1.size0 > 0) {
    json0bject.put("data",list1);
    json0bject.put("code",1);
    json0bject.put("msg","查询信息成功");
}else{
    json0bject.put("data",null);
    json0bject.put("code",0);
    json0bject.put("msg","失败");
}
out.write(jsonObject.toString());
out.flush();

//字符串转为json
$("#list").empty();
$("#list").append("<tr><th>编号</th><th>标题</th></tr>");
$.ajax({
    type:"post",
    url:"newServlet?option=select",
    data:"sign=3",
    dataType:"json",
    success:function(rs){
        if(rs.code==1){
            alert(rs.msg);
            var $result = $(rs.data);
            $result.each(function(index,item){
                $("#list").append(
                    "<tr><td>"+item.newsId+
                    "</td><td>"+item.newsTitle+
                    "</td></tr>"
                );
            };  
        }
    },
    error:function(error){
        alert(error);
    }
});

3|7ajax传json对象到 servlet

$.ajax({
	type:"post",
    url:"http://localhost:8080/news1Servlet",
    contentType:"application/json",
    data:JSON.stringify(list),
    success:function(rs){
        
    }
});

使用JsonUtils工具类

InputStreamReader reader=new InputStreamReader(req.getInputStream());
JSONArray list= JsonUtils. getJson(reader);
for (int i=0;i<list.size();i++){
	JSONObject json0bject=(JSONObject) list.get(i);
    System.out.println(jsonObject.getString( key: "newsId"));
    System.out.println(json0bject.getString( key: "newsTitle"));
}

4|0四、Ajax详解

from:动力节点老杜

4|1AJAX 异步实现步骤

XMLHttpRequest 对象介绍

4|2ajax请求实例

Servlet.java

package com.yxh;

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 java.io.IOException;

@WebServlet("/ajaxrequest01")
public class AjaxRequest1Servlet  extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //浏览器客户端的XMLHttpRequest对象会接收到这个响应的信息
        resp.getWriter().println("<font color='red' size=15px>hello welcome to study ajax!!!</font>");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax get请求</title>
    <script type="text/javascript">
        window.onload = function (){
            document.getElementById("hebtn").onclick=function (){
                //发送ajax get请求
                console.log("发送ajax get请求");
                //第一步创建ajax核心对象XMLHttpRequest
                const xhr = new XMLHttpRequest();
                //第二步注册回调函数
                //这是一个回调函数，这个函数在XMLHttpRequest对象的readyState状态值发生改变的时候被调用。
                xhr.onreadystatechange=function (){
                    //这里的回调函数会被调用多次
                    //0->1被调用,1->2被调用,2->3被调用,3->4被调用
                    console.log(xhr.readyState)
                    //当XMLHttpRequest对象的readyState的状态码是4的时候。表示响应结束了
                    if (this.readyState === 4) {
                        console.log("响应结束了")
                        //响应结束之后，一般会有一个http的状态码：200表示成功，404表示资源找不到，500表示服务器内部错误
                        console.log(this.status)
                        if (this.status===404) {
                            alert("对不起，您访问的资源不存在，请检查路径")
                        }else if (this.status===500){
                            alert("对不起，服务器发生严重的内部错误，请联系管理员")
                        }else if(this.status===200){
                            // alert("响应成功")
                            //通过XMLHttpRequest对象的responseText属性来获取响应的信息。
                            document.getElementById("mydiv").innerHTML=this.responseText
                        }
                    }
                }
                //第三步开启通道(open只是浏览器和服务器通道打开并不会建立请求)
                //XMLHttpRequest对象的open方法
                //open(method,url,async,user,psw)
                //method:请求的方式,可以是get,也可以是post,也可以是其他请求方式
                //url:请求的路径
                //async:只能是true或者false,true表示此ajax请求是一个异步请求,false表示此ajax请求是一个同步请求(大部分请求都是true，要求异步。极少数情况需要同步)
                //user:用户名 pwd:密码 进行身份认证的，想要访问这个服务器上的资源需要一些口令。需不需要用户名密码需要由服务器决定
                xhr.open("GET","/t1/ajaxrequest01",true)
                //第四步发送请求
                xhr.send()
            }
        }
    </script>
</head>
<body>
    <div id="mydiv"></div>
    <input type="button" value ="hello ajax" id="hebtn">
</body>
</html>

效果

改进

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax get请求</title>
    <script type="text/javascript">
        window.onload = function (){
            const xhr = new XMLHttpRequest();
            document.getElementById("hebtn").onclick=function (){
                console.log("发送ajax get请求");
                xhr.onreadystatechange=callback
                xhr.open("GET","/t1/ajaxrequest01",true)
                xhr.send()
            }
            function callback(){
                if (this.readyState === 4) {
                    if (this.status===404) {
                        alert("对不起，您访问的资源不存在，请检查路径")
                    }else if(this.status===200){
                        document.getElementById("mydiv").innerHTML=this.responseText
                    }
                }
            }
        }
    </script>
</head>
<body>
    <div id="mydiv"></div>
    <input type="button" value ="hello ajax" id="hebtn">
</body>
</html>

4|3get请求如何提交数据

get请求提交数据是在“请求行"上提交，格式是: url?name=value&name=value&name=value....
get请求提交数据的格式是HTTP协议中规定的，遵循协议即可

实例

servlet.java

package com.yxh;

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 java.io.IOException;

@WebServlet("/ajaxrequest01")
public class AjaxRequest1Servlet  extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取ajax请求的数据
        String usercode = req.getParameter("usercode");
        String username = req.getParameter("username");
        resp.setContentType("text/html;charset=UTF-8");
        resp.getWriter().print("<font color=green font=15px>"+usercode+"====="+username+"</font>");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax get请求</title>
    <script type="text/javascript">
        window.onload = function (){
            document.getElementById("hebtn").onclick=function (){
                const xhr = new XMLHttpRequest();
                xhr.onreadystatechange=function (){
                    if (this.readyState === 4) {
                        if (this.status===404) {
                            alert("对不起，您访问的资源不存在，请检查路径")
                        }else if (this.status===500){
                            alert("对不起，服务器发生严重的内部错误，请联系管理员")
                        }else if(this.status===200){
                            document.getElementById("mydiv").innerHTML=this.responseText
                        }
                    }
                }
                const username = document.getElementById("username");
                const usercode = document.getElementById("usercode");
                xhr.open("GET","/t1/ajaxrequest01?usercode="+usercode+"&username="+username,true)
                xhr.send()
            }
        }
    </script>
</head>
<body>
    <div id="mydiv"></div>
    username:<input type="text" id="username">
    usercode:<input type="text" id="usercode">
    <input type="button" value ="hello ajax" id="hebtn">
</body>
</html>

效果：

4|4AJAX GET请求的缓存问题

对于低版本的IE浏览器来说，AJAX的get请求可能会走缓存。存在缓存问题。
对于现代的浏览器来说，大部分浏览器都已经不存在AJAX get缓存问题了。

什么是AJAX GET请求缓存问题呢?

	在HTTP协议中是这样规定get请求的: get请求会被缓存起来

	发送AJAX GET请求时，在同一个浏览器上，前后发送的AJAX请求路径一样的话，对于低版本的I来说，第二次的AJAXGET请求会走缓存，不走服务。

	POST请求在HTTP协议中规定的是: POST请求不会被浏览器缓存

GET请求缓存的优点:

	优点:直接从浏览器缓存中获取资源，不需要从服务器上重新加载资源，速度较快，用户体验好

	缺点:无法实时获取最新的服务器资源

浏览器什么时候会走缓存?

第一:是一个GET请求
第二:请求路径已经被浏览器缓存过了。第二次发送请求的时候，这个路径没有变化，会走浏览器缓存。

如果是低版本的IE浏览器，怎么解决AJAX GET请求的缓存问题呢?

可以在请求路径url后面添加一个时间戳，这个时间戳是随时变化的。所以每一次发送的请求路径都是不一样的，这样就不会走浏览器的缓存问题了

可以采用时间戳:“url?t="+ new Date()getTime()

或者可以通过随机数:“url?t="+ Math.random()

也可以随机数+时间戳....

4|5post请求实例

__EOF__

作　　者：YXH
出　　处：https://www.cnblogs.com/YxinHaaa/p/17430876.html
关于博主：编程路上的小学生，热爱技术，喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明：署名 - 非商业性使用 - 禁止演绎，协议普通文本 | 协议法律文本。
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！

posted @ 2023-05-25 13:11 YxinHaaa 阅读(6) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Request&Response

· JavaScript

· Ajax详解（不包括jQuery）

· ajax

· BasicAjax

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

YXH自习室

Ajax&json

1|0一. 概念

1|1效果

1|2传统Web和Ajax的差异

1|3get请求和post请求的区别

2|0二.ajax前端验证

3|0三.JSON

3|1优点

3|2解析JSON对象

3|3解析JSON数组

3|4解析JSON对象数组

3|5ajax获取数据

3|6使用fastJSON

3|7ajax传json对象到 servlet

4|0四、Ajax详解

4|1AJAX 异步实现步骤

4|2ajax请求实例

4|3get请求如何提交数据

4|4AJAX GET请求的缓存问题

4|5post请求实例

公告

YXH

Ajax&json

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

文章档案

阅读排行榜

评论排行榜

最新评论