一:什么是Ajax?
Ajax:异步的JavaScript和XML,用于完成网页局部刷新功能(修改少量数据只用局部刷新,不用再整个网页重新加载);
XML的作用:1.是用于数据传输,但现在都在使用JSON
2.用于存取数据(已经不用),被数据库取代
3.用于写配置文件,现在还在少量使用,逐渐被注解取代
注意:Ajax请求不能写跳转(1.会报错。2.把跳转的页面当作字符串传回去)
二:使用原生的方式实现Ajax
1、创建一个Ajax对象
从Ajax对象xhr创建开始,它的所有操作都被监听
xhr本身是有一个状态的概念,这个状态:readyState
0(为初始化):对象已经建立,但是尚未初始化(尚未调用open)方法
1(初始化):对象已建立,尚未调用send方法
2(发送数据):send方法已经调用,但是当前的状态及http头未知
3(数据发送中):已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误
4(完成):数据接收完毕,此时可以通过responseBody和responseText获取完整的回应数据
//内置了一个类:XMLHttpRequest;兼容IE需要创建ActiveXobject //在js中,所有变量定义都使用var var xhr= new XMLHttpRequest();
2、准备请求 .open(methodType(请求类型),methodUrl(请求到后端的地址),isSys(是否异步)):请求类型:get/post。是否异步:默认为true
注意:如果要传参的话,get请求在路径中传参数,post请求在send中传参
//get请求
xhr.open("get","/地址?传到后台的参数");
//post请求
xhr.open("post","/login");
//如果是post请求,必须设置请求头的类型,后台才能够接收到前台传过去的相应的数据;当然,get请求不需要设置
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3、准备监听Ajax相应的状态变化:on(监听),readystate(状态) ,change(匿名方法)
xhr.onreadystatechange = function() { //xhr.status:请求状态(200表示成功) //xhr.readyState:获取到响应的值:(当它的状态等于4-->整个请求已经完成,你就可以获取数据了 ) if(xhr.status==200 && xhr.readyState == 4){ //获取相应的值 var result= xhr.responseText; //放到相应的位置 document.getElementById("写id").imnnerHTML = result; } }
4、发送请求 .sed(varBody)---->varBody:post请求传参要写(key=value&key=value&...);get请求不用写
//get请求
xhr.sed();
//post请求
xhr.send("userName="+userName+"&pwd="+pwd);
get请求前端完整的html代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生Ajax测试</title> <script type="text/javascript"> function getTime(){ //1.创建ajax对象 var xhr= new XMLHttpRequest(); //2.准备请求(请求类型,后端地址):此处请求并没有传数据出去,只是发送了一个请求 xhr.open("get","/gettime"); //3.监听ajax的状态变化 xhr.onreadystatechange= funtion(){ if(xhr.status==200 && xhr.readyState==4){ var result = xhr.responseText; //放到相应的位置 document.getElementById("time").innerHTML = result; } } //4.发送请求 xhr.send(); } </script> </head> <body> <button onclick="getTime()">得到时间</button><span id="time"></span> </body> </html>
get请求后端的java代码:
package ajax.servlet; import java.io.IOException; import java.util.Date; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/gettime")//前端请求过来的地址 public class GetTimeServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //用于前后台交互数据测试 String date = new Date().toLocaleString(); //通过响应返回相应的数据 resp.getWriter().print(date); } }
post请求前端完整的html代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function login(){ //1.获取到用户名与密码 var userName = document.getElementById("userName").value; var pwd = document.getElementById("pwd").value; //2.创建ajax对象 var xhr= new XMLHttpRequest(); //3.准备请求(请求类型,后台地址) xhr.open("post","/login"); //如果是post请求,必须设置请求头的类型,后台才能够接收到前台传过去的相应的数据 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //3.监听ajax的状态变化 xhr.onreadystatechange= function(){ if(xhr.status==200 && xhr.readyState==4){ var result = xhr.responseText; // responseText获取到的都是字符串 if(result == "true"){//登录成功 window.location.href="https://www.baidu.com"; }else{//登录失败 document.getElementById("erSpan").innerHTML="用户名或密码错误!"; } } } //4.发送请求:post请求必须通过.send()传数据到后台 xhr.send("userName="+userName+"&pwd="+pwd); } </script> </head> <body> <span id="erSpan"></span> <form action="/login" method="post"> 用户名:<input type="text" name="userName" id="userName" /> <br /> 密码<input type="text" name="pwd" id="pwd" /><br /> <input type="button" value="ajax提交" onclick="login()" /> </form> </body> </html>
post请求后端的java代码:
package ajax.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/login") public class LoginServlet extends HttpServlet{ @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //字符集编码,必须写,不然中文会乱码 req.setCharacterEncoding("utf-8"); resp.setContentType("utf-8"); //接收到前台传过来的值 String userName = req.getParameter("userName"); String pwd = req.getParameter("pwd"); //System.out.println(userName+":"+pwd); //测试 if("流星".equals(userName) && "123".equals(pwd)){ //向前端返回Boolean类型的true,但前端接收到的是String类型 resp.getWriter().print(true); }else{ resp.getWriter().print(false); } } }