目录
1.Ajax
- 异步刷新（局部刷新），前端技术——可以给后台发请求
- 四种发请求的方式
- 地址栏
- a标签
- form表单
- location.href或window.open()
- 异步：整个页面不会全部刷新，只有某个局部在刷新
- 例如：验证用户名是否存在
- 刷新：
- 请求头：
- post请求才有请求体
- Ajax发起请求，后台给出的响应会回到Ajax
JS原生的Ajax
- re'a'dread
- 0——初始化成功，open未调用
- 1——open被调用，建立的连接
- 2——send被调用，可以获取状态行和响应头
- 3——可以拿到响应体，响应体加载中
- 4——响应体下载完成，可以直接使用responseText
GET请求
// 向后台发请求
// 使用ajax
let xhr=new XMLHttpRequest();
// 设置请求的方式和URL
xhr.open("GET","hello?username="+user);
// 发请求
xhr.send(null);
// 指定xhr的状态处理函数
xhr.onreadystatechange=function () {
if (this.readyState === 4){
// 通过xhr的responseText获取到对应的响应体
span.innerText=xhr.responseText;
}
};
POST请求
// 向后台发请求
// 使用ajax
let xhr=new XMLHttpRequest();
// 发送POST请求
xhr.open("POST","hello");
// 设置请求头信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 发请求,设置请求体
xhr.send("username="+user);
// 指定xhr的状态处理函数
xhr.onreadystatechange=function () {
if (this.readyState === 4){
// 通过xhr的responseText获取到对应的响应体
span.innerText=xhr.responseText;
}
};
JQuery的Ajax
发送GET请求
$.get("hello?username=" + user, function (data) {
alert(data)
});
发送POST请求
$.post("hello","username=" + user, function (data) {
alert(data)
});
完整写法
$.ajax({
url:"hello",
data:{"username=":username},
type:"post",
success:function (res) {
},
error:function (res) {
},
});
Ajax（aixos）
对原生的Ajax的一个封装
ES6的：Promise语法
GET请求
-
aixos发送GET请求，这个请求中如果有参数，还是一个默认的以文档流的形式发送，和之前的任何一种请求方式没有任何区别。
get:function(){ axios.get("wea?city="+this.city).then(function (response) { app1.msg2=response.data; }); },
POST请求
-
aixos发送POST请求，这个请求中如果有参数，会把请求体转成json串，然后发给后台
post:function(){ axios.post("wea",{"city":this.city}).then(function (response) { app1.msg2=response.data; }) },【封装对象的前提：json串中的数据的key和对象的属性名要一致】
注意点：
- 【使用Ajax发送请求，页面是不可以通过后台跳转页面，如果需要跳转页面，也是通过前端的JS来跳转，不可能通过Servlet来跳转】
- 【Ajax和form表单不能同时使用】
- Ajax：不能跳转页面
- form表单：一定要跳转页面的
json
package com.jsoft.afternoon;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name = "VueServlet", value = "/vue.do")
public class VueServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("vueSevlet已经接到了请求...");
// rquest.getParameter()方法只能接收默认的文档流中的参数，接不了json串。
// String username = request.getParameter("username");
// System.out.println("username--->" + username);
// 从request中获取了一个流，缓冲字符输入流
/*
1、get请求，后台没有对应的对象来封装，不能有私密数据。
2、post请求，后台都是有对象跟着的。username,password-----User
id,name,age,gender,email-----------Student
*/
BufferedReader reader = request.getReader();
String line = reader.readLine();
System.out.println(line);
/*
封装对象的前提：
json串中的数据的key和对象的属性名要一致。
是根据set方法的名封装的。
*/
User user = JSON.parseObject(line, User.class);
System.out.println(user);
// String sql = "select * from user where username = ? and password = ?"
// userdao.get(sql,user.getUsername(),user.getPassword());
PrintWriter out = response.getWriter();
out.print("hello axios and vue...");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}