Ajax

最新推荐文章于 2025-07-22 21:41:37 发布
最新推荐文章于 2025-07-22 21:41:37 发布
阅读量123 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： json javascript ViewUI
原文链接：https://my.oschina.net/MoreYoungGavin/blog/668019
本文深入探讨了AJAX的基本原理及其实现方式，包括GET和POST请求的处理，以及如何解析HTML、XML和JSON数据。此外，还详细介绍了jQuery库在AJAX操作中的应用，包括数据加载、XML和JSON数据的获取与解析。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

//POST
    <script type="text/javascript">
        window.onload = function(){
            document.getElementsByTagName("a")[0].onclick = function(){
                var request = new XMLHttpRequest();
                var url = this.href+"?time="+new Date();
                var method = "POST";
                request.open(method,url);
                request.setRequestHeader("ContentType","application/x-www-form-urlencoded");
                request.send("name='gmy'");
                request.onreadystatechange =function(){
                    if(request.readyState == 4){
                        if(request.status ==200 || request.status ==304){
                            alert(request.responseText);
                        }
                    }
                }
                return false;
            }
        }
    </script>
    <body>
        <a href="helloAjax.txt">Hello</a>
    </body>
//GET
    <script type="text/javascript">
        window.onload = function(){
            document.getElementsByTagName("a")[0].onclick = function(){
                var request = new XMLHttpRequest();
                var url = this.href+"?time="+new Date();
                var method = "GET";
                request.open(method,url);
                request.send(null);
                request.onreadystatechange =function(){
                    if(request.readyState == 4){
                        if(request.status ==200 || request.status ==304){
                            alert(request.responseText);
                        }
                    }
                }
                return false;
            }
        }
    </script>
    <body>
        <a href="helloAjax.txt">Hello</a>
    </body>
//解析HTML
    window.onload = function() {
        var aNodes = document.getElementsByTagName("a");
        for (var i = 0; i < aNodes.length; i++) {
            aNodes[i].onclick = function() {
                var request = new XMLHttpRequest();
                request.open("GET", this.href);
                request.send(null);
                request.onreadystatechange = function() {
                    if (request.readyState == 4) {
                        if (request.status == 200 || request.status == 304) {
                  document.getElementById("details").innerHTML = request.responseText;
                        }
                    }
                }
                return false;
            }
        }
    }
    <h1>People</h1>
    <ul>
        <li><a href="html/Andy.html">Andy</a></li>
        <li><a href="html/Richard.html">Richard</a></li>
        <li><a href="html/Jeremy.html">Jeremy</a></li>
    </ul>
    <div id="details"></div>
//解析XML
    window.onload =function(){
        var aNodes = document.getElementsByTagName("a");
                    
        for(var i=0;i<aNodes.length;i++){
            aNodes[i].onclick=function(){
                var request = new XMLHttpRequest();
                request.open("GET",this.href);
                request.send(null);
                request.onreadystatechange=function(){
                    if(request.readyState == 4){
                        if(request.status ==200||request.status ==304){
                            var result = request.responseXML;
                   var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
                            //alert(name);
                            var aNode = document.createElement("a");
                            var brNode = document.createElement("br");
                            aNode.appendChild(document.createTextNode(name));
                            var detailsNode = document.getElementById("details");
                            detailsNode.appendChild(aNode);
                            detailsNode.appendChild(brNode);
                        }
                    }
                }
                    return false;
                }
            }
        }
    <h1>People</h1>
    <ul>
        <li><a href="xml/Andy.xml">Andy</a></li>
        <li><a href="xml/Richard.xml">Richard</a></li>
        <li><a href="xml/Jeremy.xml">Jeremy</a></li>
    </ul>
    <div id="details"></div>
//解析JSON
    window.onload =function(){
        var aNodes = document.getElementsByTagName("a");
                    
        for(var i=0;i<aNodes.length;i++){
            aNodes[i].onclick=function(){
                var request = new XMLHttpRequest();
                request.open("GET",this.href);
                request.send(null);
                request.onreadystatechange=function(){
                    if(request.readyState == 4){
                        if(request.status ==200||request.status ==304){
                            var result = request.responseText;
                            var object = eval("("+result+")");
                            var name = object.person.name;
                            alert(name);
                        }
                    }
                }
                    return false;
                }
            }
        }
    <h1>People</h1>
    <ul>
        <li><a href="json/Andy.js">Andy</a></li>
        <li><a href="json/Richard.js">Richard</a></li>
        <li><a href="json/Jeremy.js">Jeremy</a></li>
    </ul>
    <div id="details"></div>
//JQUERY
    //load()方法
    $("#content").load(url,args);
    
    //GET XML
    $(function(){
        $("a").click(function(){
            var url = this.href;
            var args = {"time":new Date()};
            $.get(url,args,function(date){
                var name = $(date).find("name").text();
                $("#details").empty().append("<h2><a href=''>"+name+"</a></li>");
            });
            return false;
        })
    })
    
    <h1>People</h1>
    <ul>
        <li><a href="xml/Andy.xml">Andy</a></li>
        <li><a href="xml/Richard.xml">Richard</a></li>
        <li><a href="xml/Jeremy.xml">Jeremy</a></li>
    </ul>
    <div id="details"></div>
    
    //POST XML
    $(function(){
        $("a").click(function(){
            var url = this.href;
            var args = {"time":new Date()};
            $.post(url,args,function(date){
                var name = $(date).find("name").text();
                $("#details").empty().append("<h2><a href=''>"+name+"</a></li>");
            });
            return false;
        })
    })
    
    <h1>People</h1>
    <ul>
        <li><a href="xml/Andy.xml">Andy</a></li>
        <li><a href="xml/Richard.xml">Richard</a></li>
        <li><a href="xml/Jeremy.xml">Jeremy</a></li>
    </ul>
    <div id="details"></div>
    
    
    //JSON
    $(function(){
    $("a").click(function(){
        var url = this.href;
        var args = {"time":new Date()};
        $.getJSON(url,args,function(data){
            var name = data.person.name;
            $("#details").empty().append("<h2><a href=''>"+name+"</a></li>");
        });
        return false;
    })
    })
    
    <h1>People</h1>
    <ul>
        <li><a href="json/Andy.js">Andy</a></li>
        <li><a href="json/Richard.js">Richard</a></li>
        <li><a href="json/Jeremy.js">Jeremy</a></li>
    </ul>
    <div id="details"></div>
//jackson的使用
//jackson根据geter方法定位字段，可以在geter方法添加注解    
//加入jar包（jackson-annotations-2.2.2、jackson-core-2.2.2、jackson-databind-2.2.2）
//创建ObjectMapper，调用writeValueAsString方法
    List<Customer> customers = Arrays.asList(customer,new Customer("BCD", "2002"));
    jsonString = objectMapper.writeValueAsString(customers);
    System.out.println(jsonString);
//例
    $(function(){
        $(":input[name='username']").change(function(){
            var val = $(this).val();
            val = $.trim(val);
            if(val != ""){
                var url = "${pageContext.request.contextPath }/ValiateUserName";
                var args = {"userName":val,"time":new Date()};
                $.post(url,args,function(data){
                    $("#message").html(data);
                    
                });
            }
        });
    })
    <form action="" method="post">
        UserName:<input type="text" name="username"/>
        <br>
        <div id="message"></div>
        <br>
        <input type="submit" value="Submit"/>
    </form>
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
     throws ServletException, IOException {
        List<String> userNames = Arrays.asList("AAA","BBB","CCC");
        String userName = request.getParameter("userName");
        String result = null;
        if(userNames.contains(userName)){
            result = "<font color='red'>该用户名已被使用</font>";
        }else{
            result = "<font color='GREEN'>该用户名可以使用</font>";
        }
        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().print(result);
    }
    
//例
    $(function(){
            var isHasCart = "${sessionScope.sc == null}";
            //alert(isHasCart);
            if(isHasCart == "true"){
                $("#cartstatus").hide();
            }else{
                $("#cartstatus").show();
                $("#bookName").text("${sessionScope.sc.bookName}");
                $("#totalBookNumber").text("${sessionScope.sc.totalBookNumber}");
                $("#totalMoney").text("${sessionScope.sc.totalMoney}");
            }
            $("a").click(function(){
                $("#cartstatus").show();
                var url = this.href;
                var args = {"time":new Date()};
                $.getJSON(url,args,function(data){
                    $("#bookName").text(data.bookName);
                    $("#totalBookNumber").text(data.totalBookNumber);
                    $("#totalMoney").text(data.totalMoney);
                });
                return false;
            });
        })    
    
    <div id="cartstatus">
    您已经将&nbsp;<span id="bookName"></span>&nbsp;加入到购物车，
    购物车中的书有&nbsp;<span id="totalBookNumber"></span>&nbsp;
    本，总价格&nbsp;<span id="totalMoney"></span>&nbsp;钱。
    </div><br><br>
    Java&nbsp;&nbsp;<a href="addToCart?id=Java&price=100">加入购物车</a>
    <br><br>
    
    Oracle&nbsp;&nbsp;<a href="addToCart?id=Oracle&price=200">加入购物车</a>
    <br><br>
    
    Struts&nbsp;&nbsp;<a href="addToCart?id=struts&price=100">加入购物车</a>
    <br><br>
    public class AddToCartServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
        protected void doGet(HttpServletRequest request, HttpServletResponse response)
         throws ServletException, IOException {
            doPost(request, response);
        }
        protected void doPost(HttpServletRequest request, HttpServletResponse response) 
        throws ServletException, IOException {
            String bookName = request.getParameter("id");
            int price = Integer.parseInt(request.getParameter("price"));
            
            HttpSession session = request.getSession();
            ShoppingCart sc = (ShoppingCart) session.getAttribute("sc");
            if(sc==null ){
                sc = new ShoppingCart();
                session.setAttribute("sc", sc);
            }
            sc.addToCart(bookName , price);
            
            StringBuilder result = new StringBuilder();
            result.append("{")
                    .append("\"bookName\":\""+bookName+"\"")
                    .append(",")
                    .append("\"totalBookNumber\":"+sc.getTotalBookNumber())
                    .append(",")
                    .append("\"totalMoney\":"+sc.getTotalMoney())
                    .append("}");
            response.setContentType("text/javascript");
            response.getWriter().print(result.toString());
        }
    }
    public class ShoppingCartItem {
        private int number;
        private String bookName;
        private int price;
        public int getNumber() {
            return number;
        }
        public void setNumber(int number) {
            this.number = number;
        }
        public String getBookName() {
            return bookName;
        }
        public void setBookName(String bookName) {
            this.bookName = bookName;
        }
        public int getPrice() {
            return price;
        }
        public void setPrice(int price) {
            this.price = price;
        }
    }
    public class ShoppingCart {
        private Map<String, ShoppingCartItem> items = new HashMap<String, ShoppingCartItem>();
        private String bookName;
        
        public void addToCart(String bookName,int price){
            
            this.bookName = bookName;
            
            if(items.containsKey(bookName)){
                ShoppingCartItem item = items.get(bookName);
                item.setNumber(item.getNumber()+1);
            }else {
                ShoppingCartItem item = new ShoppingCartItem();
                item.setBookName(bookName);
                item.setPrice(price);
                item.setNumber(1);
                items.put(bookName, item);
            }
        }
        public int getTotalBookNumber(){
            int total = 0;
            for(ShoppingCartItem item:items.values()){
                total += item.getNumber();
            }
            return total;
        }
        public String getBookName() {
            return bookName;
        }
        public int getTotalMoney(){
            int money = 0;
            for(ShoppingCartItem item:items.values()){
                money += item.getNumber() * item.getPrice();
            }
            return money;
        }
    }
    
//例    
    $("#city").change(function(){
            $("#department option:not(:first)").remove();
            var city = $(this).val();
            //alert(city);
            if(city != ""){
                var url = "EmployeeServlet?method=listDepartments";
                var args = {"locationId":city,"time":new Date()};
                $.getJSON(url,args,function(data){
                    if(data.length == 0){
                        alert("当前城市没有部门！");
                    }else{
                        for(var i=0;i<data.length;i++){
                            var deptId = data[i].departmentId;
                            var deptName = data[i].departmentName;
                   $("#department").append("<option value='"+deptId+"'>"+deptName+"</option>");
                        }
                    }
                })
            }
        });
    <center>
        <br><br>
        City:
        <select id="city">
            <option value="">请选择...</option>
            <c:forEach items="${locations}" var="location">
                <option value="${location.locationId}">${location.city }</option>
            </c:forEach>
        </select>
            <br>
            <br>  
        Department:
        <select id="department">
            <option value="">请选择...</option>    
        </select>
            <br>
            <br>        
        Employee:
        <select>
            <option value="">请选择...</option>    
        </select>
        <br><br>
        <table id="empdetails" border="1" cellspacing="0" cellpadding="5" style="display:none">
            <tr>
                <th>Id<th>
                <th>Name<th>
                <th>Email<th>
                <th>Salary<th>
            </tr>
            <tr>
                <th id="id"><th>
                <th id="name"><th>
                <th id="email"><th>
                <th id="salary"><th>
            </tr>
        </table>
    </center>

转载于:https://my.oschina.net/MoreYoungGavin/blog/668019

chouzhang8835
关注
moreAjax（仅仅是给自己看的）
萌萌的It人 www.itmmd.com
08-01 1115
 var XMLHttp = {    _objPool: [],    _getInstance: function ()     {         for (var i = 0; i          {             if (this._objPool[i].readyState == 0 || this._objPool[i].readyState ==
前台js获取后台request中的值
qq_41981122的博客
09-09 2331
后台：this.request.setAttribute("departmentId", result.get("departmentId")); 前台：var resultDepartmentId = '<%=request.getAttribute("departmentId")%>';
AJAX详解
ajiaming的博客
03-16 4344
AJAX全称为，就是异步的 JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
Ajax详解
这河里吗l的博客
06-20 1万+
Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。Ajax可以实现网页与服务器之间的数据交互AJAX不是编程语言，是一种无需重新载入整个页面，能够更新部分网页的技术。
看这一篇就够了！-Ajax详解
热门推荐
Oriental_的博客
03-15 18万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
Ajax请求的五个步骤
chaopingyao的博客
06-02 17万+
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请
AJAX 详解
06-19 2万+
Ajax基础知识，及常见问题详解
ajax
huangyh技术栈
09-28 3万+
1.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新...
AJAX简介
xpmhhh的博客
03-20 7012
AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 最大的优势：无刷新的获取数据。 Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML: 可扩展标记语言，被设计用来传输和存储数据。 与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
ajaxProxy:ajaxProxy 是一个ajax请求发送代理，支持链序请求和阻塞请求
06-03
ajaxProxy ajaxProxy is an ajax request sending proxy, which supports chain order request and blocking request ajaxProxy是一个异步请求的代码发送器，提供一种可读性更好的接口来实现异步请求的流程控制，...
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
用算法思维了解一个停车点的车辆情况
Buy0515的博客
07-20 602
如果你希望了解一个停车点的车辆情况，你需要有一些网络知识，了解 APP 和相关软件服务器之间的通讯协议，当了解了具体的接口之后就可以写一个包含循环的程序来定时判断某一个点的车辆数量信息，这个程序可以用 Python 来完成，涉及到的库不会超过 2 个，基本就是。对于这样的操作来说，真的只需要。
Kibana报错[security_exception] current license is non-compliant for [security]
最新发布
黄黄黄黄黄的博客
07-22 336
点击右边5.x版本下载到本地，会生成一个json文件，命名为：First name-Last name-编号-版本号.json。并将该文件上传到服务器。)申请license，所有条目都需要填写，邮箱正确即可。（2）点开邮箱，打开链接下载license。，提示执行下面的代码。
HTTPie： 开发者友好的http客户端工具
IT从业者
07-18 859
摘要： HTTPie 是一个专为开发者设计的命令行 HTTP 客户端，相比 curl 更简洁优雅，适合调试和测试 RESTful API。核心特性包括自然语言语法、自动 JSON 处理、高亮输出、文件上传、会话管理和插件扩展。基本命令示例展示了 GET/POST 请求、添加 Header 和文件上传操作。与 curl/wget 对比，HTTPie 在 API 调试场景更友好，是开发者日常调试 API 的高效工具。
Golang 中 JSON 和 XML 解析与生成的完全指南
大模型大数据攻城狮的专栏
07-19 573
通过实现 json.Marshaler 接口，你可以控制结构体的 JSON 表示形式。
专业Ajax技术详解
"Wrox.Press.Professional.Ajax" 是一本由Wiley Publishing, Inc.在2006年出版的专业级Ajax技术图书，作者包括Nicholas C. Zakas, Jeremy McPeak和Joe Fawcett。这本书共380页，详细介绍了Ajax的基础及其在Web开发中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值