wanghj-15

一:什么是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);
        }
    }
}

 

分类:

技术点:

相关文章: