一、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>
三、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，这个时间戳随时变化，所以每一次请求的路径都是不一样的，就不会走浏览器缓存惹
标签：缓存,浏览器,请求,get,--,ajax,url,AJAX From： https://www.cnblogs.com/hyy-0/p/17589900.html