随笔 - 363, 文章 - 0, 评论 - 2, 阅读 - 23万
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

13Ajax和JQuery

Posted on   心默默言  阅读(250)  评论(0)  编辑  收藏  举报

1.Ajax

1.1是什么?

“Asynchronous Javascript And XML”（异步JavaScript和XML），

并不是新的技术，只是把原有的技术，整合到一起而已。

1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。

1.2有什么用?

咱们的网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。 就是为了解决局部刷新的问题。 保持其他部分不动，只刷新某些地方。

1.3数据请求 Get

1)创建对象

复制代码
function ajaxFunction() {
        var xmlHttp;
        try { // Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            try { // Internet Explorer
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        return xmlHttp;
    }
复制代码

2）发送请求

复制代码
//执行get请求
    function get() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        request.open("GET", "/day13Ajax/DemoServlet01", true);
        request.send();
    }
复制代码

如果发送请求的同时，还想获取数据，那么代码如下

复制代码
//执行get请求
    function get() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        //request.open("GET", "/day13Ajax/DemoServlet01", true);
        request.open("GET", "/day13Ajax/DemoServlet01?name=aa&age=18", true);
        
        //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
        request.onreadystatechange = function(){
            
            //前半段表示 已经能够正常处理。  再判断状态码是否是200
            if(request.readyState == 4 && request.status == 200){
                //弹出响应的信息
                alert(request.responseText);
            }
        }
        request.send();
复制代码

1.4数据请求 Post

复制代码
package cn.jxufe.web;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DemoServlet01 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("收到了一个请求。。。");
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        System.out.println("收到了一个请求。。。" + name + "=" + age);

        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("收到了请求...");
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("现在来了一个post请求，将要去走get的代码了。");
        doGet(request, response);
    }

}
复制代码

如果不带数据

复制代码
function ajaxFunction() {
        var xmlHttp;
        try { // Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            try { // Internet Explorer
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        return xmlHttp;
    }
    //执行get请求
    function post() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        request.open("POST", "/day13Ajax/DemoServlet01", true);
        request.send();
    }
复制代码

 

带数据

复制代码
    function ajaxFunction() {
        var xmlHttp;
        try { // Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            try { // Internet Explorer
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        return xmlHttp;
    }
    //执行get请求
    function post() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        request.open("POST", "/day13Ajax/DemoServlet01", true);

        //如果想带数据，就写下面的两行

        //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //带数据过去  ， 在send方法里面写表单数据。 
        request.send("name=obama&age=19");
    }
复制代码

复制代码
//执行get请求
    function post() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        request.open("POST", "/day13Ajax/DemoServlet01", true);

        //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
        request.onreadystatechange = function() {

            //前半段表示 已经能够正常处理。  再判断状态码是否是200
            if (request.readyState == 4 && request.status == 200) {
                //弹出响应的信息
                alert(request.responseText);
            }
        }

        //如果想带数据，就写下面的两行

        //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //带数据过去  ， 在send方法里面写表单数据。 
        request.send("name=obama&age=19");

    }
复制代码

2.JQuery

2.1是什么?

 

javascript 的代码框架。

2.2有什么用?

简化代码，提高效率。

2.3核心 

write less do more , 写得更少，做的更多。

2.4load()方法

复制代码
package cn.jxufe.web;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DemoServlet02 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("收到了请求。。。");
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("给你一份数据");
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}
复制代码
复制代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP '01demo.jsp' starting page</title>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
    function load() {

        //$("#aaa").val("aaa");
        //$("#aaa").html("9999999");

        //$("#aaa").load("/day16/DemoServlet02");

        //$("#text01") --- document.getElementById("text01");
        $("#aaa").load("/day13Ajax/DemoServlet02", function(responseText, statusTXT, xhr) {
            //alert("jieguo:"+responseText);
            //找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
            $("#aaa").val(responseText);
        });
    }
</script>
</head>

<body>
    <!-- <h3><a href="" onclick="load()">使用JQuery执行load方法</a></h3>  -->
    <h3>
        <input type="button" onclick="load()" value="使用JQuery执行load方法">
    </h3>

    <input type="text" id="aaa">

</body>
</html>
复制代码

2.5get()方法

 

复制代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP '01demo.jsp' starting page</title>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
    //$.get(URL,callback);
    function get() {
        $.get("/day13Ajax/DemoServlet02", function(data, status) {
            //alert("结果是：" + data);
            //$("#div01")  -- document.getElementById("div01");

            //$("#div01").val(); //val  用于设置 元素里面有values 的属性值 
            //$("#div01").html(data);
            //$("#div01").val(data);
            $("#div01").text("aaa=" + data);
        //$("#div01").html(data); // <font>
        });
    }
</script>
</head>

<body>

    <input type="button" onclick="get()" value="使用JQuery演示 get方法">

    <div id="div01"
        style="width: 100px ; height: 100px ; border: 1px solid blue; ">

    </div>

</body>
</html>
复制代码

* val("aa");

> 只能放那些标签带有value属性
* html("aa"); ---写html代码
* text("aa");

> 其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

2.6POST()方法

 

复制代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP '06demo.jsp' starting page</title>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
    function post() {
        $.post("/day13Ajax/DemoServlet02", {
            name : "zhangsan",
            age : "18"
        }, function(data, status) {
            //想要放数据到div里面去。 --- 找到div
            $("#div01").html(data);
        });
    }
</script>
</head>

<body>

    <input type="button" onclick="post()" value="使用JQuery演示 post方法">

    <div id="div01"
        style="width: 100px ; height: 100px ; border: 1px solid blue; ">

    </div>

</body>
</html>
复制代码

2.7城市联动小案例

 1）准备数据库

 

2） 准备页面

 

复制代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/city02.js"></script>

<!-- 引用的是 xml的处理方法 <script type="text/javascript" src="js/city.js"></script> -->
</head>
<body>
    省份:
    <select name="province" id="province">
        <option value="">-请选择 -
        <option value="1" >广东
        <option value="2" >湖南
        <option value="3" >湖北
        <option value="4" >四川
    </select>
城市: 
    <select name="city" id="city">
        <option value="" >-请选择 -
    </select>
</body>
</html>
复制代码

3)创建javabean

 

复制代码
package cn.jxufe.entity;

public class CityBean {
    private int id ;
    private int pid;
    String cname;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public int getPid() {
        return pid;
    }
    public void setPid(int pid) {
        this.pid = pid;
    }
    public String getCname() {
        return cname;
    }
    public void setCname(String cname) {
        this.cname = cname;
    }
    
}
复制代码

4）创建dom接口及实现类

复制代码
package cn.jxufe.dao;

import java.sql.SQLException;
import java.util.List;

import cn.jxufe.entity.CityBean;

public interface CityDao {
    List<CityBean> findCity(int pid) throws SQLException ;
}
复制代码
复制代码
package cn.jxufe.dao.impl;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import cn.jxufe.dao.CityDao;
import cn.jxufe.entity.CityBean;
import cn.jxufe.util.JDBCUtil02;

public class CityDaoImpl implements CityDao{
    @Override
    public List<CityBean> findCity(int pid) throws SQLException {
        // TODO Auto-generated method stub
        QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
        String sql = "select * from city where pid = ?";
        return runner.query(sql, new BeanListHandler<CityBean>(CityBean.class) , pid);
        
    }
}
复制代码

5）创建servlet

#1 以xml的形式返回数据

复制代码
package cn.jxufe.web;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.thoughtworks.xstream.XStream;

import cn.jxufe.dao.CityDao;
import cn.jxufe.dao.impl.CityDaoImpl;
import cn.jxufe.entity.CityBean;

public class CityServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            // 1. 获取参数
            int pid = Integer.parseInt(request.getParameter("pid"));

            // 2 找出所有的城市
            CityDao dao = new CityDaoImpl();
            List<CityBean> list = dao.findCity(pid);

            // 3. 返回数据。手动拼 ---> XStream 转化 bean对象成 xml
            XStream xStream = new XStream();

            // 想把id做成属性
            // xStream.useAttributeFor(CityBean.class, "id");
            // 设置别名
            xStream.alias("city", CityBean.class);
            // 转化一个对象成xml字符串
            String xml = xStream.toXML(list);

//            // 返回数据
            response.setContentType("text/xml;charset=utf-8");
            response.getWriter().write(xml);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}
复制代码

#02以json的形式返回数据

复制代码
package cn.jxufe.web;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.thoughtworks.xstream.XStream;

import cn.jxufe.dao.CityDao;
import cn.jxufe.dao.impl.CityDaoImpl;
import cn.jxufe.entity.CityBean;
import net.sf.json.JSONArray;

public class CityServlet02 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            // 1. 获取参数
            int pid = Integer.parseInt(request.getParameter("pid"));

            // 2 找出所有的城市
            CityDao dao = new CityDaoImpl();
            List<CityBean> list = dao.findCity(pid);

            // 3. 把list ---> json数据
            // JSONArray ---> 变成数组 ， 集合 []
            // JSONObject ---> 变成简单的数据 { name : zhangsan , age:18}

            JSONArray jsonArray = JSONArray.fromObject(list);
            String json = jsonArray.toString();
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write(json);

        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}
复制代码

 6）JSP

#1

复制代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/city.js"></script>

<!-- 引用的是 xml的处理方法 <script type="text/javascript" src="js/city.js"></script> -->
</head>
<body>
    省份:
    <select name="province" id="province">
        <option value="">-请选择 -
        <option value="1" >广东
        <option value="2" >湖南
        <option value="3" >湖北
        <option value="4" >四川
    </select>
城市: 
    <select name="city" id="city">
        <option value="" >-请选择 -
    </select>
</body>
</html>
复制代码

#2

复制代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/city02.js"></script>

</head>
<body>
    省份:
    <select name="province" id="province">
        <option value="">-请选择 -
        <option value="1" >广东
        <option value="2" >湖南
        <option value="3" >湖北
        <option value="4" >四川
    </select>
城市: 
    <select name="city" id="city">
        <option value="" >-请选择 -
    </select>
</body>
</html>
复制代码

7）js

#1

复制代码
$(function() {
    //1。找到省份的元素
    $("#province").change(function() {
        //2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
        //$("#province").varl();
        var pid = $(this).val();
        
        /*[
            {
                "cname": "深圳",
                "id": 1,
                "pid": 1
            },
            {
                "cname": "东莞",
                "id": 2,
                "pid": 1
            }
            ...
        ]*/
        $.post( "CityServlet02",{pid:pid} ,function(data,status){
            
            //先清空
            $("#city").html("<option value='' >-请选择-");
            //再遍历，追加
            $(data).each(function(index , c) {
                $("#city").append("<option value='"+c.id+"' >"+c.cname)
            });
        },"json" );
        
    });
});
复制代码

#2

复制代码
$(function() {
    //1。找到省份的元素
    $("#province").change(function() {
        //2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
        //$("#province").varl();
        var pid = $(this).val();
        
        /*[
            {
                "cname": "深圳",
                "id": 1,
                "pid": 1
            },
            {
                "cname": "东莞",
                "id": 2,
                "pid": 1
            }
            ...
        ]*/
        $.post( "CityServlet02",{pid:pid} ,function(data,status){
            
            //先清空
            $("#city").html("<option value='' >-请选择-");
            //再遍历，追加
            $(data).each(function(index , c) {
                $("#city").append("<option value='"+c.id+"' >"+c.cname)
            });
        },"json" );
        
    });
});
复制代码

 

编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛