Ajax

最新推荐文章于 2025-07-27 20:48:41 发布
最新推荐文章于 2025-07-27 20:48:41 发布
阅读量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
关注
ajax
huangyh技术栈
09-28 3万+
1.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新...
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
moreAjax（仅仅是给自己看的）
萌萌的It人 www.itmmd.com
08-01 1116
 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 2332
后台：this.request.setAttribute("departmentId", result.get("departmentId")); 前台：var resultDepartmentId = '<%=request.getAttribute("departmentId")%>';
AJAX详解
ajiaming的博客
03-16 4361
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简介
xpmhhh的博客
03-20 7014
AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 最大的优势：无刷新的获取数据。 Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML: 可扩展标记语言，被设计用来传输和存储数据。 与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。
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），是指一种创建交互式、快速动态网页应用的网页...
forest远程调用注意事项
xiyafei122的博客
07-24 215
5.36，且pom中引用了fastjson2，那么@JSONField（com.alibaba.fastjson2.annotation包下）将不起作用，因为版本<1.5.36不支持Fastjson2，按照1的说法，forest此时会以Jackson作为json转换器，此时要用@JsonProperty注解。1、如果在项目中，同时依赖了其中多个框架，那么按 Fastjson2 > Fastjson > Jackson > Gson 这样的优先级来判断，Forest 会以。的框架作为 JSON 转换器。
【C++】C++ 和python 夸语言包通信，使用Json数据格式传输。
weixin_47564581的博客
07-24 311
这些是Qt网络模块的通用函数，与JSON格式本身无关，它们负责处理底层数据传输。使用JSON时需要这些函数，是因为网络传输只能处理字节流，而JSON需要先转换为字节流才能传输。这种编码/解码过程是所有文本格式（包括JSON）在网络传输中的通用处理方式，并非JSON特有，但JSON作为文本型数据交换格式，必须遵循这一流程。
Web开发系列-第9章 SpringBootWeb登录认证
weixin_66095070的博客
07-27 396
实现HandlerInterceptor接口，并重写其所有方法//自定义拦截器@Component//目标资源方法执行前执行。返回true：放行 返回false：不放行@Override//true表示放行//目标资源方法执行后执行@Override//视图渲染完毕后执行，最后执行@Override注意：preHandle方法：目标资源方法执行前执行。返回true：放行 返回false：不放行postHandle方法：目标资源方法执行后执行。
Sql server开挂的OPENJSON
最新发布
清风弄影
07-27 281
摘要：SQL Server 2019的OPENJSON功能大幅简化了JSON数据处理。相比SQL Server 2008需要自定义表类型来传递表参数的方式，新版本只需将JSON字符串作为参数传递，通过OPENJSON解析即可。该功能支持单层和嵌套JSON结构，可指定字段名称和类型，还能处理复杂层级数据。从SQL Server 2016开始引入的JSON支持，不仅提高了开发效率，还影响了表结构设计，许多原本需要主从表结构的场景现在用单表配合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、付费专栏及课程。

余额充值