Ajax前后台交互
程序员文章站
2022-04-28 23:49:30
...
一、什么是ajax
1、Ajax的全称是Asynchronous JavaScript and XML，即异步JavaScript+XML。
2、它是一种技术方案，但并不是一种新技术。
3、它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象。这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口，使得浏览器可以发出HTTP请求与接收HTTP响应，实现在页面不刷新的情况下和服务端进行数据交互。
页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ajax</title>
</head>
<body>
<button class="ajaxBtn">发起ajax请求</button>
<script>
window.onload = function(){
//获取button
let ajaxBtn = document.querySelector('.ajaxBtn');
function ajaxReq(){
var xhr = new XMLHttpRequest()
//请求响应过程的当前活动阶段
xhr.onreadystatechange = function(){
console.log('readyState:',xhr.readyState)
}
xhr.open('GET','http://localhost:8080/testDemo01/sayHello?testStr=123',true); //(请求方式，url,是否是异步请求)
xhr.send();
//监听请求状态
xhr.onload = function(){ //onload相当于readyState=4
console.log(xhr.status)
if((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304){
console.log(xhr.responseText)
}else{
console.log(error)
}
}
}
ajaxBtn.onclick = function(){
ajaxReq();
}
}
</script>
</body>
</html>后台采用了最简单的servlet作为测试
由于测试时没有设置跨域请求：
前台会报如下错误：
上一篇： 学习ajax原理