1.Ajax异步请求
概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML
1. 异步和同步:客户端和服务器端相互通信的基础上
* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。提升用户的体验
2.原生的Ajax之get请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" onclick="sendAjax()">发送Get请求</button>
<h1>每日一笑</h1>
<ul id="myul">
</ul>
</body>
<script type="text/javascript">
function sendAjax() {
//创建对象
var xmlhttp = new XMLHttpRequest();
//发送请求
xmlhttp.open("GET", "https://autumnfish.cn/api/joke/list?num=10", true);
xmlhttp.send();
//接收服务器的响应
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//接收后台响应的json字符串
var jsonStr=xmlhttp.responseText;
console.log(jsonStr);
var jsonObj= JSON.parse(jsonStr);
var ul= document.getElementById("myul");
var arr=jsonObj.jokes;
for(let i=0;i<arr.length;i++){
ul.innerHTML+="<li>"+arr[i]+"</li>";
}
}
}
}
</script>
</html>
3.原生的Ajax之post请求
1.需要设置请求头:
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
2.发送时使用send()方法,把请求参数放到send方法中
xmlHttp.send('name=value&age=12'); //请求体body,用&分隔。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" onclick="sendAjax()">发送POST请求</button>
</body>
<script type="text/javascript">
function sendAjax() {
//创建对象
var xmlhttp = new XMLHttpRequest();
//发送请求
xmlhttp.open("POST", "http://localhost:8080/login", true);
//3.设置请求头信息
xmlhttp.setRequestHeader('content-type','application/x-www-form-urlencoded');
//post请求,参数写在send()方法里面
xmlhttp.send("username=zhangsan&password=123456");
//接收服务器的响应
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//接收后台响应的json字符串
var jsonStr=xmlhttp.responseText;
console.log(jsonStr);
var obj=JSON.parse(jsonStr);
alert(obj.msg);
}
}
}
</script>
</html>
4.jQuery发送Ajax之get请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">发送Ajax请求</button>
</body>
<script type="text/javascript">
$('button').click(function(){
$.ajax({
url:"https://autumnfish.cn/api/joke/list?num=10" , // 请求路径
type:"GET" , //请求方式
//请求成功之后的回调
success:function (data) {
//data后台返回的json数据,已经帮你转换成JSON对象
alert(data.msg);
//操作DOM ,把返回的数据解析出来,展示到页面上
},//响应成功后的回调函数
//表示如果请求响应出现错误,会执行的回调函数
error:function () {
alert("出错啦...")
},
dataType:"json"//设置接受到的响应数据的格式 text 普通的文本字符串
});
})
</script>
</html>
5.jQuery发送Ajax之post请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">发送Ajax请求</button>
</body>
<script type="text/javascript">
$('button').click(function() {
$.ajax({
url: "http://localhost:8080/login", // 请求路径
type: "POST", //请求方式
//请求参数 也可以这样写 data: "username=jack&age=23",
//data: "username=jack&age=23",
data: {
"username": "zhangsan",
"password": "123456"
},
//请求成功之后的回调
success: function(data) {
//data后台返回的json数据,已经帮你转换成JSON对象
alert(data.msg);
//操作DOM ,把返回的数据解析出来,展示到页面上
}, //响应成功后的回调函数
//表示如果请求响应出现错误,会执行的回调函数
error: function() {
alert("出错啦...")
},
dataType: "json" //设置接受到的响应数据的格式 text 普通的文本字符串
});
})
</script>
</html>
6.JQuery简化的get和post方法
1.$.get():发送get请求
* 语法:$.get(url, [data], [callback], [type])
* 参数:
* url:请求路径
* data:请求参数
* callback:回调函数
* type:响应结果的类型2.. $.post():发送post请求
* 语法:$.post(url, [data], [callback], [type])
* 参数:
* url:请求路径
* data:请求参数
* callback:回调函数
* type:响应结果的类型
3..直接请求JSON数据,post,get请求都可以 $.getJSON(url, [data], [callback])
* url:请求路径
* data:请求参数
* callback:回调函数
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">发送Ajax GET请求</button>
<button type="button">发送Ajax请求后台就是返回json数据</button>
<button type="button">发送Ajax POST请求</button>
</body>
<script type="text/javascript">
$('button').first().click(function() {
/* * 语法:$.get(url, [data], [callback], [type])
* 参数:
* url:请求路径
* data:请求参数
* callback:回调函数
* type:响应结果的类型 */
$.get('https://autumnfish.cn/api/joke/list', {
"num": "10"
}, function(data) {
alert(data.msg);
}, "json");
})
$('button').last().click(function() {
/* * 语法:$.post(url, [data], [callback], [type])
* 参数:
* url:请求路径
* data:请求参数
* callback:回调函数
* type:响应结果的类型 */
$.post('http://localhost:8080/login', {
"username": "zhangsan",
"password": "123456"
}, function(data) {
alert(data.msg);
}, "json");
})
$('button').eq(1).click(function() {
$.getJSON('http://localhost:8080/login', {
"username": "zhangsan",
"password": "123456"
}, function(data) {
alert(data.msg);
});
})
</script>
</html>
后台:
package org.westos.web;
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;
/**
* @Author: ShenMouMou
* @Company: 西部开源教育科技有限公司
* @Description: 简简单单,只为教育。
* @Date: 2021/3/13 9:22
*/
@WebServlet(value = "/login", name = "LoginServlet")
public class LoginServlet extends HttpServlet {
//处理post请求
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//* 后台信任来自任意服务器的请求,告诉浏览器你不要拦截
//http://127.0.0.1:8848
response.setHeader("Access-Control-Allow-Origin", "*");
//获取前台提交的用户名和密码
String username = request.getParameter("username");
String password = request.getParameter("password");
//查询数据库去比对
//{"status":200,"msg":"ok","username":"张三"}
//{"status":500,"msg":"no"}
response.setContentType("application/json;charset=utf-8");
if (username.equals("zhangsan") && password.equals("123456")) {
response.getWriter().write("{\"status\":200,\"msg\":\"ok\",\"username\":\"张三\"}");
} else {
response.getWriter().write("{\"status\":500,\"msg\":\"no\"}");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}