ajax原理简析并用ajax实现分页功能

最新推荐文章于 2022-04-28 21:26:15 发布

空城天路客

最新推荐文章于 2022-04-28 21:26:15 发布

阅读量7.5k

点赞数 2

分类专栏： javaWeb 文章标签： ajax实现分页 ajax中post和get请求区别 post的请求头

本文链接：https://blog.csdn.net/nangeque/article/details/79878128

版权

javaWeb 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

这里写链接内容## 写在前面 ##

真的好久没有更新博客了，面临毕业好多杂事要做，而且公司还要培训，真是忙的很。难得偷闲，今天就来谈一下ajax的分页吧！

简介

首先我们来识别一下几个相关概念：
1、ajax：异步的javascript和xml 指的是在不刷新网页的情况下，可以和服务器端通信，局部刷新。
2、ajaj：其实这才是我们今天要用的，他的含义是: 异步的 javascript and json。
我们为什么要用这项技术呢？那是因为有些时候，需要数据的验证，但是，又不想整体的提交表单，所以，要进行局部提交。

技术要点简析

1、首先要明白这个技术的核心就是xmlhttp。他是通过var xmlhttp=new XMLHttpRequest();得到的。
2、他有6个重要属性：
a. onreadystatechange属性：它是用来处理服务器响应的函数。
b. states属性 : 响应的状态。
c. readyState属性: 请求的状态共5种
状态描述
0 请求未初始化（在调用open()之前）
1 请求已提出（调用send()之前）
2 请求已发送
3 请求处理中
4 请求已完成
d. responseText属性：服务器响应返回的内容
e. open(“请求方式”,”请求地址”,永远为true);
f. send()：如果是get请求 send(null)
如果是post请求 send(“请求参数”)

代码实现

1.首先是login.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'login.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript">
        function doblur(obj){
            var tip = document.getElementById("tip");
            var username=obj.value;
            var xmlhttp;
            try{
                xmlhttp=new XMLHttpRequest();
            }catch(ex){
                alert("错了");
            }
            xmlhttp.onreadystatechange=function(){
                 if(xmlhttp.readyState==4&&xmlhttp.status==200){
                    var text = xmlhttp.responseText;
                    if(text==1){
                        tip.innerHTML="<font style='font-size:12px;' color='green'>可用</font>"   
                    }else{
                        tip.innerHTML="<font style='font-size:12px;' color='red'>不可用</font>"
                    }
                } 
            }; 
            xmlhttp.open("get","login?username="+username,true);
            xmlhttp.send(null);
        }
    </script>
  </head>

  <body>
    <form action="login" method="get">
        用户名：<input type ="text" onblur="doblur(this)" name="username"/><label id ="tip"></label><br>
        密码：<input type ="text" name ="password"/><br>
        <input type ="submit" value ="提交" id =""/><br>
    </form>
  </body>
</html>

2.然后再看一下后台代码LoginAction.java

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out=response.getWriter();
        String username=request.getParameter("username");
        System.out.println(username);
        if(username.startsWith("admin")){
            out.print("1");
        }else{
            out.print("0");
        }
    }

3.get效果截图：
get前台提交截图
get控制台截图
4.后台代码不变，前台jsp页面改成post请求。login.jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'login.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript">
        function doblur(obj){
            var tip = document.getElementById("tip");
            var username=obj.value;
            var xmlhttp;
            try{
                xmlhttp=new XMLHttpRequest();
            }catch(ex){
                alert("错了");
            }
            xmlhttp.onreadystatechange=function(){
                 if(xmlhttp.readyState==4&&xmlhttp.status==200){
                    var text = xmlhttp.responseText;
                    if(text==1){
                        tip.innerHTML="<font style='font-size:12px;' color='green'>可用</font>"   
                    }else{
                        tip.innerHTML="<font style='font-size:12px;' color='red'>不可用</font>"
                    }
                } 
            }; 
            //xmlhttp.open("get","login?username="+username,true);
            //xmlhttp.send(null);
            xmlhttp.open("post","login",true);
             //xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            xmlhttp.send("username="+username);
        }
    </script>
  </head>

  <body>
    <form action="login" method="post">
        用户名：<input type ="text" onblur="doblur(this)" name="username"/><label id ="tip"></label><br>
        密码：<input type ="text" name ="password"/><br>
        <input type ="submit" value ="提交" id =""/><br>
    </form>
  </body>
</html>

5、post效果截图:
post前台效果图
post控制台效果图

套路就这样，步骤操作也对，为什么会出错呢，简直没道理啊，不科学啊！找了半天终于找到了真相。原来后台识别post请求还是get请求是看请求头是什么，不能只改method，还要设置一下请求头。

6.真相
a.后台测试代码BackAction.java

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        Enumeration<String> ens=request.getHeaderNames();
        PrintWriter out=response.getWriter();
        while (ens.hasMoreElements()) {
            String name=ens.nextElement();
            String value=request.getHeader(name);
            out.println(name+"===="+value+"<br />");
        }
    }

b.测试截图：
post效果图
get效果图

从截图中我们可以清楚看到，post和get请求的主要区别在于请求头content-type，所以我们只要在post请求中设置一下请求头就可以了。还有一点要注意一下，请求头务必要设置在open()和send()方法之间，不然会没反应，亲测！务必谨记！

7.ajaj分页前台代码showdept.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'showdept.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<script type="text/javascript">
    var tatalpage;
    var spage;
    //初始化
    function doload() {
        var xmlhttp;
        try {
            xmlhttp = new XMLHttpRequest();//创建对象
        } catch (e) {
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4&&xmlhttp.status==200) {//请求已完成且响应状态正确
                var text = xmlhttp.responseText;//得到返回内容
                var arr1 = eval(text);//将内容转换成表达式格式
                totalpage = arr1[0].totalpage;
                var arr = arr1[1].list;
                var tb = document.getElementById("tb");
                for ( var i = 0; i < arr.length; i++) {
                    var d = arr[i];
                    var tr = document.createElement("tr");
                    var td0 = document.createElement("td");
                    td0.innerHTML = d.deptno;
                    var td1 = document.createElement("td");
                    td1.innerHTML = d.dname;
                    var td2 = document.createElement("td");
                    td2.innerHTML = d.loc;
                    tr.appendChild(td0);
                    tr.appendChild(td1);
                    tr.appendChild(td2);
                    tb.appendChild(tr);
                }
                spage = document.getElementById("spage");
                for ( var j = 1; j <= totalpage; j++) {
                    var option = document.createElement("option");
                    option.value = j;
                    option.innerHTML = j;
                    spage.appendChild(option);
                }
            }
        }
        xmlhttp.open("post", "showdept", true);
        xmlhttp.setRequestHeader("content-type",
                "application/x-www-form-urlencoded");//设置请求头
        xmlhttp.send(null);
    }
    var pagenow = 1;
    //实现分页
    function doclick(obj) {
        /* if (obj.value == "首页") {
            pagenow = 1;
        } else if (obj.value == "上一页") {
            if(pagenow>1){
                pagenow = Number(pagenow - 1);
            }else{
                pagenow=1;
            }
        } else if (obj.value == "下一页") {
            if(pagenow<totalpage){
                pagenow = Number(pagenow + 1);
            }else{
                pagenow=totalpage;
            }
        } else if (obj.value == "尾页") {
            pagenow = totalpage;
        }else{
            pagenow = Number(spage.value);//强制转换
        } */
        if (obj.innerHTML == "首页") {
            pagenow = 1;
        } else if (obj.innerHTML == "上一页") {
            if(pagenow>1){
                pagenow = Number(pagenow - 1);
            }else{
                pagenow=1;
            }
        } else if (obj.innerHTML == "下一页") {
            if(pagenow<totalpage){
                pagenow = Number(pagenow + 1);
            }else{
                pagenow=totalpage;
            }
        } else if (obj.innerHTML == "尾页") {
            pagenow = totalpage;
        }else{
            pagenow = Number(spage.value);//强制转换
        }
        var xmlhttp;
        try {
            xmlhttp = new XMLHttpRequest();
        } catch (e) {
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                var text = xmlhttp.responseText;
                var arr1 = eval(text);
                totalpage = arr1[0].totalpage;
                var arr = arr1[1].list;
                var tb = document.getElementById("tb");
                tb.innerHTML = "";//清空上一页的数据
                for ( var i = 0; i < arr.length; i++) {
                    var d = arr[i];
                    var tr = document.createElement("tr");
                    var td0 = document.createElement("td");
                    td0.innerHTML = d.deptno;
                    var td1 = document.createElement("td");
                    td1.innerHTML = d.dname;
                    var td2 = document.createElement("td");
                    td2.innerHTML = d.loc;
                    tr.appendChild(td0);
                    tr.appendChild(td1);
                    tr.appendChild(td2);
                    tb.appendChild(tr);
                }
                for ( var i = 0; i < totalpage; i++) {
                    if (pagenow == spage.options[i].value) {
                        spage.options[i].selected = "selected";
                    }
                }
            }
        }
        xmlhttp.open("post", "showdept", true);
        xmlhttp.setRequestHeader("content-type",
                "application/x-www-form-urlencoded");//设置请求头
        xmlhttp.send("pagenow=" + pagenow);
    }
</script>
</head>

<body onload="doload()">
    <center>
        <h1>部门信息展示</h1>
        <table cellspacing="0" cellpadding="0" border="1" width="600">
            <tr>
                <td>部门编号</td>
                <td>部门名称</td>
                <td>部门地址</td>
            </tr>
            <tbody id="tb">
            </tbody>
            <tr>
                <td colspan="3">
                <a href="javascript:void(0)" onclick="doclick(this)" >首页</a>
                <a href="javascript:void(0)" onclick="doclick(this)">上一页</a>
                <a href="javascript:void(0)" onclick="doclick(this)">下一页</a> 
                <a href="javascript:void(0)" onclick="doclick(this)">尾页</a>
                <!-- <input type="button" value="首页" onclick="doclick(this)" />
                 <input type="button" value="上一页" onclick="doclick(this)" /> 
                 <input type="button" value="下一页" onclick="doclick(this)" />
                 <input type="button" value="尾页" onclick="doclick(this)" />  -->
                <select id="spage" onchange="doclick(this)">
                </select>
                </td>
            </tr>
        </table>
    </center>
</body>
</html>

8.ajaj后台代码ShowDeptAction.java

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        int pagesize=4;
        int pagenow=1;
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        String strpagenow = request.getParameter("pagenow");
        if(strpagenow!=null){
            pagenow= new Integer(strpagenow);
        }
        PrintWriter out = response.getWriter();
        DeptDAO deptdao = new DeptDAO();
        List<Dept> list1;
        try {
            list1= deptdao.findByPage(pagesize, pagenow);
            int count = deptdao.getCount();
            int totalpage = (count-1)/pagesize+1;
            JSONArray list = JSONArray.fromObject(list1);//将集合转成json格式
            String arr ="[{\"totalpage\":"+totalpage+"},{\"list\":"+list.toString()+"}]";
            out.print(arr);//务必在返回页面输出一下
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }