AJAX--ajax的get请求

一、get请求

前端代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax get请求</title>
</head>
<body>
    <script>
        window.onload = function(){
            document.getElementById("helloBtn").onclick = function(){
                // 发送ajax请求
                // console.log("发送ajax get请求")
                // 1.创建ajax核心对象XMLHttpRequest对象
                var xhr = new XMLHttpRequest()
                // 2.注册回调函数
                // 这是回调函数，这个函数在readyState属性的状态值发生改变的时候被调用
                xhr.onreadystatechange = function(){
                    // 这里回调函数会被调用多次
                    // 0-1-2-3-4 
                    // console.log(xhr.readyState)
                    if(this.readyState == 4){
                        // 响应结束
                        // 响应结束后一边会有一个HTTP的状态码，
                        // HTTP状态码常见的包括200成功  404找不到  500服务器内部错误
                        // 获取HTTP的状态码
                        // console.log(this.status)
                        if(this.status == 404){
                            alert("您访问的资源不存在")
                        }else if(this.status == 500){
                            alert("服务器错误")
                        }else if(this.status == 200){
                            // alert("响应成功")
                            // 完成响应成功了
                            // alert(this.responseText) 以普通文本响应
                            // 把响应信息放入myDiv中
                            document.getElementById("myDiv").innerHTML = this.responseText
                        }
                    }
                }
                // 3.开启通道(open只是浏览器和服务器建立连接，通道打开不会发送请求)
                // open方法
                // open(method,url,async,user,psw)
                // method:请求的方式，GET,POST 也可以是其他请求方式
                // url：请求的路径
                // async：true或者false  true表示一个异步请求，false表示一个同步请求
                // user：用户名  pwd：密码   用户名和密码是进行身份认证的，说明要想访问这个服务器上的资源
                // 可能会需要提供一些口令才能访问，需不需要用户名密码，主要看服务器
                xhr.open("GET","/url",true)
                // 4.发送请求
                xhr.send()
            }
        }
    </script>
 
    <!-- 用户点击按钮之后发布ajax请求 -->
    <input type="button" value="hello ajax" id="helloBtn">
    <!-- div接收了响应的诗句之后，在div中进行渲染 -->
    <div id="myDiv">
 
    </div>
</body>
</html>

二、get请求如何提交数据

get请求提交数据实在“请求行”上提交，格式为：url?name=value&name=value&name=value......

 usercode: <input type="text" name="" id="usercode"><br>
username: <input type="text" name="" id="username"><br>
 
<script>
// 在使用open方法开启通道时把拼接到url后
var usercode = document.getElementById("usercode").value
var username = document.getElementById("username").value
xhr.open("GET","/url?usercode="+usercode+"&username="+username,true)
</script>

后端代码，在后端获取get请求传递过来的参数

 // 声明HttpServletRequest
HttpServletRequest request
String usercode = request.getParameter("usercode");
String username = request.getParameter("username");

三、AJAX的get请求的缓存问题

1、对于低版本的IE浏览器来说，AJAX可能会走缓存，存在缓存问题

在HTTP协议中规定get请求：get请求会被缓存起来，post的请求不会被缓存

发送AJAX的get请求时，在同一个浏览器上，获取一个图片的时候需要发送请求，获取到图片之后会放入缓存，当再次访问这个请求路径的时候会从缓存中拿出来图片，这就是get缓存问题

2、get请求缓存的优缺点

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

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

3、浏览器什么时候会走缓存

条件1：是一个get请求

条件2：请求路径已经被缓存过了，第二次发送请求时路径没有发生改变会走浏览器缓存

4、解决方法

如果是低版本的IE浏览器解决get请求的缓存问题

可以在请求路径url后面添加一个时间戳或者随机数url?time=value，这个时间戳随时变化，所以每一次请求的路径都是不一样的，就不会走浏览器缓存惹

posted @ 2023-07-29 17:19 洛小依ovo 阅读(1533) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

相关博文：

· jQuery--ajax请求

· AJAX概述

· AJAX IE缓存问题

· Ajax&json

· 解决使用Ajax浏览器的缓存问题

公告

昵称：洛小依ovo
园龄： 4年5个月
粉丝： 1
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

AJAX--ajax的get请求

一、get请求

二、get请求如何提交数据

三、AJAX的get请求的缓存问题

1、对于低版本的IE浏览器来说，AJAX可能会走缓存，存在缓存问题

2、get请求缓存的优缺点

3、浏览器什么时候会走缓存

4、解决方法

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ajax get请求</title>
	</head>
	<body>
	<script>
	window.onload = function(){
	document.getElementById("helloBtn").onclick = function(){
	// 发送ajax请求
	// console.log("发送ajax get请求")
	// 1.创建ajax核心对象XMLHttpRequest对象
	var xhr = new XMLHttpRequest()
	// 2.注册回调函数
	// 这是回调函数，这个函数在readyState属性的状态值发生改变的时候被调用
	xhr.onreadystatechange = function(){
	// 这里回调函数会被调用多次
	// 0-1-2-3-4
	// console.log(xhr.readyState)
	if(this.readyState == 4){
	// 响应结束
	// 响应结束后一边会有一个HTTP的状态码，
	// HTTP状态码常见的包括200成功 404找不到 500服务器内部错误
	// 获取HTTP的状态码
	// console.log(this.status)
	if(this.status == 404){
	alert("您访问的资源不存在")
	}else if(this.status == 500){
	alert("服务器错误")
	}else if(this.status == 200){
	// alert("响应成功")
	// 完成响应成功了
	// alert(this.responseText) 以普通文本响应
	// 把响应信息放入myDiv中
	document.getElementById("myDiv").innerHTML = this.responseText
	}
	}
	}
	// 3.开启通道(open只是浏览器和服务器建立连接，通道打开不会发送请求)
	// open方法
	// open(method,url,async,user,psw)
	// method:请求的方式，GET,POST 也可以是其他请求方式
	// url：请求的路径
	// async：true或者false true表示一个异步请求，false表示一个同步请求
	// user：用户名 pwd：密码用户名和密码是进行身份认证的，说明要想访问这个服务器上的资源
	// 可能会需要提供一些口令才能访问，需不需要用户名密码，主要看服务器
	xhr.open("GET","/url",true)
	// 4.发送请求
	xhr.send()
	}
	}
	</script>

	<!-- 用户点击按钮之后发布ajax请求 -->
	<input type="button" value="hello ajax" id="helloBtn">
	<!-- div接收了响应的诗句之后，在div中进行渲染 -->
	<div id="myDiv">

	</div>
	</body>
	</html>

	usercode: <input type="text" name="" id="usercode"><br>
	username: <input type="text" name="" id="username"><br>

	<script>
	// 在使用open方法开启通道时把拼接到url后
	var usercode = document.getElementById("usercode").value
	var username = document.getElementById("username").value
	xhr.open("GET","/url?usercode="+usercode+"&username="+username,true)
	</script>

	// 声明HttpServletRequest
	HttpServletRequest request
	String usercode = request.getParameter("usercode");
	String username = request.getParameter("username");