Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

哦吼~

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量85

点赞数 1

分类专栏： Ajax

本文链接：https://blog.csdn.net/qq_42727102/article/details/102070121

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.Ajax（Asynchronous JavaScript and XML），直译为“异步的JavaScript与XML技术”，是一种创建交互式网页应用的网页开发技术，用于创建快速动态网页，Ajax通过浏览器与服务器进行少量的数据交换就可以实现网页的异步更新，在不重新加载整个网页的情况下，即可对网页进行更新。
2.什么是Ajax？
AJAX:A:异步的，J:JavaScript，A:And，X:XML 异步的|无刷新|局部刷新
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
3.XMLHttpRequest 对象：XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
4.创建

创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");```

5.Ajax向服务器发送请求

```java
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
open(method,url,async)	
规定请求的类型、URL 以及是否异步处理请求
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
xmlhttp.open("GET","ajax_test.asp",true);
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可

send(string)	
将请求发送到服务器。
string：仅用于 POST 请求

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
setRequestHeader(header,value)	
向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
放到open和send中间

6.获取服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

7.onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState：	
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status：	
200: "OK"
404: 未找到页面

8.练习：
①输出3+4
DemoAServlet.java

package servlet;

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;
import java.io.PrintWriter;
@WebServlet("/a")
public class DemoAServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int a = Integer.parseInt(req.getParameter("a"));
        int b = Integer.parseInt(req.getParameter("b"));
        int sum = a+b;
        PrintWriter out = resp.getWriter();
        out.print(sum);
    }
}

DemoBServlet.java与上面类似

a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function ajaxDemo() {
            //第一步：创建ajax对象
            var ajax = new XMLHttpRequest();
            //第四步：回调  当readyState发生改变时，执行此函数
            ajax.onreadystatechange = function(){
                var status1 = ajax.status;//非200都是错 4xx：客户端错误 5xx：服务端错误
                var readyState1 = ajax.readyState;(0：对象未创建 1：对象创建了，未open 2：open打开了但是未发送 3：未响应)错，4是对
                if (status1==200&&readyState1==4){
                    var result = ajax.responseText;//返回的结果
                    alert(result);
                }
            }
            //第二步：打开链接通道
            ajax.open("get","a?a=3&b=4",true);//第一个参数是发送方式 第二个是网址 第三个是 是否异步
            //第三步：发送
            ajax.send();
            //一二三步完成后，就已经可以发送请求了

        }
    </script>
</head>
<body onload="ajaxDemo()">
    哈哈哈哈
</body>
</html>```

b.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function funB() {
            var a = document.getElementById("aaa").value;
            var b = document.getElementById("bbb").value;
            var ajax = new XMLHttpRequest();
            ajax.onreadystatechange = function () {
                var status = ajax.status;
                var states = ajax.readyState;
                if (states==4&&status==200){
                    var result = ajax.responseText;
                    document.getElementById("ccc").value=result;
                }
            }
            ajax.open("post","b?a="+a+"&b="+b,true);
            ajax.send();
        }
    </script>
</head>
<body>
    <input id="aaa"/>
    +
    <input id="bbb"/>
    =
    <input id="ccc"/>
    <button onclick="funB()">求和</button>
</body>
</html>

简便写法：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function () {//   请求get/post 
        //第一个参数：去哪里 第二个：给哪个参数传的哪些值 第三个：回调  data是返回的结果
           $.get("a",{"a":4,"b":5},function (data) {
               alert(data);
           })
        });
    </script>
</head>
<body>
    ....c
</body>
</html>

②验证姓名是否可用
DemoCServlet.java

package servlet;

import biz.UserBiz;

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;
import java.io.PrintWriter;

@WebServlet("/c")
public class DemoCServlet extends HttpServlet {
    private UserBiz ub = new UserBiz();
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        String name = req.getParameter("name");
        boolean b = ub.checkUserName(name);
        PrintWriter out = resp.getWriter();
        out.print(b?1:0);
    }
}

DemoDServlet.java

package servlet;

import biz.UserBiz;

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;

@WebServlet("/d")
public class DemoDServlet extends HttpServlet {
    private UserBiz ub = new UserBiz();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        String name = req.getParameter("name");
        String pass = req.getParameter("pass");
        int age = Integer.parseInt(req.getParameter("age"));
        String sex = req.getParameter("sex");
        String address = req.getParameter("address");
        ub.saveUser(name,pass,sex,age,address);
    }
}

d.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        var flag = false;
        function checkName(){
            var nameVal = $("#name").val();
            $.post("c",{"name":nameVal},function(data){
                if(data==1){
                    flag = true;
                    $("#errorName").html("姓名可以使用！");
                }else{
                    flag = false;
                    $("#errorName").html("姓名已被占用！");
                }
            });
        }

        function regUser(){
            var nameVal = $("#name").val();
            var passVal = $("#pass").val();
            var ageVal = $("#age").val();
            var sexVal = $(":checked").val();
            var addressVal = $("#address").val();
            if(flag){
                $.post("d",{"name":nameVal,"pass":passVal,"age":ageVal,"sex":sexVal,"address":addressVal});
            }
        }
    </script>
</head>
<body>
        姓名：<input id="name" onblur="checkName()"/><span id="errorName"></span><br/>
        密码：<input type="password" id="pass"/><br/>
        年龄：<input id="age"/><br/>
        性别：<input type="radio" name="sex" id="sex1" value="男" checked/>男
        <input type="radio" name="sex" id="sex2" value="女"/>女<br/>
        地址：<input type="text" id="address"/><br/>
        <button onclick="regUser()">注册</button>
</body>
</html>

③输出数据库的所有数据信息
DemoEServlet.java

package servlet;

import biz.UserBiz;

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;
import java.io.PrintWriter;

@WebServlet("/e")
public class DemoEServlet extends HttpServlet {
    private UserBiz ub = new UserBiz();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String str = ub.findAllUser();
        resp.setContentType("application/json;charset=utf-8");//设置客户端以json形式读取
        PrintWriter out = resp.getWriter();
        out.print(str);
    }

e.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $.post("e",function (data) {
                var list = data;
                for (var i = 0; i < list.length; i++) {
                    var obj = list[i];
                    var str = "<tr>";
                    str+="<td>"+(i+1)+"</td>";
                    str+="<td>"+obj.name+"</td>";
                    str+="<td>"+obj.sex+"</td>";
                    str+="<td>"+obj.age+"</td>";
                    str+="<td>"+obj.address+"</td>";
                    str+="</tr>";
                    $("#tbody").append(str);
                }
            });
        });
    </script>
</head>
<body>
<table border="1" width="80%" align="center">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>、
        <th>年龄</th>
        <th>住址</th>
    </tr>
    </thead>
    <tbody id="tbody"></tbody>
</table>
</body>
</html>

或者用别人写好的模板（百度搜索easyui）
f.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基本数据表格 - jQuery EasyUI组件功能在线演示</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>基本数据表格</h2>
<p>数据表格是由标记创建的，不需要JavaScript代码。</p>
<div style="margin:20px 0;"></div>

<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
       data-options="singleSelect:true,collapsible:true,url:'e',method:'post'">
    <thead>
    <tr>
        <th data-options="field:'id',width:80">序号</th>
        <th data-options="field:'name',width:100">姓名</th>
        <th data-options="field:'sex',width:80,align:'right'">性别</th>
        <th data-options="field:'age',width:80,align:'right'">年龄</th>
        <th data-options="field:'address',width:250">住址</th>

    </tr>
    </thead>
</table>

</body>
</html>l>

④实现分页
DemoFServlet.java

package servlet;

import biz.UserBiz;

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;
import java.io.PrintWriter;

@WebServlet("/f")
public class DemoFServlet extends HttpServlet {
    private UserBiz ub = new UserBiz();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int page = Integer.parseInt(req.getParameter("page"));
        int rows = Integer.parseInt(req.getParameter("rows"));
        //easyui 分页中page和rows参数
        //实现分页传入page当前页和rows每页记录数，返回时必须total总记录数，rows存放每页记录
        //（比如画面选择的是2页，每页记录数是30,那么这个rows就是从db中查询30-60的记录）
        String str = ub.findAllUserByPage(page,rows);
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter out = resp.getWriter();
        out.print(str);
    }
}

g.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自定义数据表格寻呼机 - jQuery EasyUI组件功能在线演示</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>自定义数据表格寻呼机</h2>
<p>您可以向标准数据表格寻呼机条添加一些按钮。</p>
<div style="margin:20px 0;"></div>
<table id="dg" title="Custom DataGrid Pager" style="width:700px;height:250px"
       data-options="rownumbers:true,singleSelect:true,pagination:true,url:'f',method:'post'">
    <thead>
    <tr>
        <th data-options="field:'id',width:80">序号</th>
        <th data-options="field:'name',width:100">姓名</th>
        <th data-options="field:'sex',width:80,align:'right'">性别</th>
        <th data-options="field:'age',width:80,align:'right'">年龄</th>
        <th data-options="field:'address',width:240">住址</th>
    </tr>
    </thead>
</table>
<script type="text/javascript">
    $(function(){
        var pager = $('#dg').datagrid().datagrid('getPager');    // get the pager of datagrid
        pager.pagination({
            buttons:[{
                iconCls:'icon-search',
                handler:function(){
                    alert('search');
                }
            },{
                iconCls:'icon-add',
                handler:function(){
                    alert('add');
                }
            },{
                iconCls:'icon-edit',
                handler:function(){
                    alert('edit');
                }
            }]
        });
    })
</script>
</body>
</html>

赋：

UserInfoDAO.java

package dao;

import bean.UserInfo;
import db.DBManager;
import sun.security.pkcs11.Secmod;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class UserInfoDAO {
    private Connection conn;
    private PreparedStatement ps;
    private ResultSet rs;
    public boolean checkUserName(String name){
        boolean b = true;
        String sql = "SELECT * FROM userinfo WHERE username=?";
        conn = DBManager.getConnection();
        try{
            ps = conn.prepareStatement(sql);
            ps.setString(1,name);
            rs = ps.executeQuery();
            if(rs.next()){
                b = false;
            }
        }catch(Exception e){
            System.out.println(e.getMessage());
        }
        return b;
    }
    public void saveUser(String name,String pass,String sex,int age,String address){
        String sql = "insert into userinfo values(74,?,?,?,?,md5(?),1)";
        conn = DBManager.getConnection();
        try{
            ps = conn.prepareStatement(sql);
            ps.setString(1,name);
            ps.setString(2,sex);
            ps.setInt(3,age);
            ps.setString(4,address);
            ps.setString(5,pass);
            ps.executeUpdate();
        }catch(Exception e){
            System.out.println(e.getMessage());
        }
    }
    public List<UserInfo> findAllUser(){
        List<UserInfo> list = new ArrayList<>();
        String sql = "SELECT * FROM userInfo WHERE userState=1";
        conn = DBManager.getConnection();
        try{
            ps = conn.prepareStatement(sql);
            rs = ps.executeQuery();
            while(rs.next()){
                UserInfo ui = new UserInfo();
                ui.setUserId(rs.getInt(1));
                ui.setUserName(rs.getString(2));
                ui.setUserSex(rs.getString(3));
                ui.setUserAge(rs.getInt(4));
                ui.setUserAddress(rs.getString(5));
                ui.setUserPass(rs.getString(6));
                ui.setUserState(rs.getInt(7));
                list.add(ui);
            }
        }catch(Exception e){
            System.out.println(e.getMessage());
        }
        return list;
    }

    public int findAllUserCount(){
        int rows = 0;
        String sql = "select count(userId) from userInfo where userState=1";
        conn = DBManager.getConnection();
        try{
            ps = conn.prepareStatement(sql);
             rs = ps.executeQuery();
            if (rs.next()){
                rows = rs.getInt(1);
            }
        }catch(Exception e){
            System.out.println(e.getMessage());
        }finally {
            DBManager.close(conn,ps,rs);
        }
        return rows;
    }

    public List<UserInfo> findUserByPage(int page,int size){
        List<UserInfo> list = new ArrayList<>();
        String sql = "SELECT * FROM userInfo WHERE userState=1 limit ?,?";
        conn = DBManager.getConnection();
        try{
            ps = conn.prepareStatement(sql);
            ps.setInt(1,(page-1)*size);
            ps.setInt(2,size);
            rs = ps.executeQuery();
            while(rs.next()){
                UserInfo ui = new UserInfo();
                ui.setUserId(rs.getInt(1));
                ui.setUserName(rs.getString(2));
                ui.setUserSex(rs.getString(3));
                ui.setUserAge(rs.getInt(4));
                ui.setUserAddress(rs.getString(5));
                ui.setUserPass(rs.getString(6));
                ui.setUserState(rs.getInt(7));
                list.add(ui);
            }
        }catch(Exception e){
            System.out.println(e.getMessage());
        }
        return list;
    }
}

UserBiz.java

package biz;

import bean.UserInfo;
import dao.UserInfoDAO;

import java.util.ArrayList;
import java.util.List;

public class UserBiz {
    private UserInfoDAO uidao = new UserInfoDAO();

    public boolean checkUserName(String name) {
        return uidao.checkUserName(name);
    }

    public void saveUser(String name, String pass, String sex, int age, String address) {
        uidao.saveUser(name, pass, sex, age, address);
    }

    public String findAllUser(){
        String str = "[";
        List<UserInfo> list = uidao.findAllUser();
        for(UserInfo ui:list){
            str+="{";
            str+="\"id\":\""+ui.getUserId()+"\",";
            str+="\"name\":\""+ui.getUserName()+"\",";
            str+="\"sex\":\""+ui.getUserSex()+"\",";
            str+="\"age\":\""+ui.getUserAge()+"\",";
            str+="\"address\":\""+ui.getUserAddress()+"\"";
            str+="},";
        }
        str = str.substring(0,str.length()-1);
        str+="]";
        return str;
    }

    public String findAllUserByPage(int page,int size){
        String str = "{\""+"total"+"\":"+uidao.findAllUserCount()+","+"\"rows\""+":[";
        List<UserInfo> list = uidao.findUserByPage(page,size);
        for(UserInfo ui:list){
            str+="{";
            str+="\"id\":\""+ui.getUserId()+"\",";
            str+="\"name\":\""+ui.getUserName()+"\",";
            str+="\"sex\":\""+ui.getUserSex()+"\",";
            str+="\"age\":\""+ui.getUserAge()+"\",";
            str+="\"address\":\""+ui.getUserAddress()+"\"";
            str+="},";
        }
        str = str.substring(0,str.length()-1);
        str+="]}";
        return str;
    }

    public static void main(String[] args) {
        String str = new UserBiz().findAllUserByPage(1,10);
        System.out.println(str);
    }
}

哦吼~

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax

1.Ajax（Asynchronous JavaScript and XML），直译为“异步的JavaScript与XML技术”，是一种创建交互式网页应用的网页开发技术，用于创建快速动态网页，Ajax通过浏览器与服务器进行少量的数据交换就可以实现网页的异步更新，在不重新加载整个网页的情况下，即可对网页进行更新。2.什么是Ajax？AJAX:A:异步的，J:JavaScript，A:And，X:...
复制链接

扫一扫

专栏目录