Ajax-load

来源：互联网发布：淘宝整点秒杀怎么设置编辑：程序博客网时间：2024/04/30 21:05

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

载入text内容

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <script type="text/javascript" src="jquery-1.7.2.js"></script>   <script type="text/javascript">        $(function(){            $("a").click(function(){                var url = this.href;                var args = {"time":new Date()};                $("#content").load(url,args);                return false;            });        });  </script></head><body>  <a href="helloAjax.txt">HelloAjax</a>  <div id="content"></div></body></html>

http://localhost:8090/javaweb/MyHtml.html
HelloAjax
asfffsfd

载入远程的html部分代码

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <script type="text/javascript" src="jquery-1.7.2.js"></script>   <script type="text/javascript">        $(function(){            $("a").click(function(){                var url = this.href + " h2 a";   //rul参数的语法结构为url selector 之间有空格                var args = {"time":new Date()};                $("#details").load(url,args);                return false;            });        });  </script></head><body>  <h1>People</h1>  <ul>    <li><a href="andy.html">Andy</a></li>    <li><a href="richard.html">richard</a></li>    <li><a href="jeremy.html">jeremy</a></li>  </ul>  <div id="details"></div></body></html>

<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2><a href="http://andybudd.com/">http://andybudd.com/</a>

http://localhost:8090/javaweb/MyHtml.html

这里写图片描述

方法-回调函数（请求xml格式）

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <script type="text/javascript" src="jquery-1.7.2.js"></script>   <script type="text/javascript">        $(function(){            $("a").click(function(){                var url = this.href;                var args = {"time":new Date()};//回调函数：当响应结束时，该函数被触发，响应结果在data中，  另外args是json格式                $.get(url,args,function(data){                    var name = $(data).find("name").text();                    var email = $(data).find("email").text();                    var website = $(data).find("website").text();                    $("#details").empty()                                .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")                                .append("<a href='"+website+"'>"+website+"</a>");                });                return false;            });        });  </script></head><body>  <h1>People</h1>  <ul>    <li><a href="andy.xml">Andy</a></li>    <li><a href="richard.xml">richard</a></li>    <li><a href="jeremy.xml">jeremy</a></li>  </ul>  <div id="details"></div></body></html>

<?xml version="1.0" encoding="utf-8"?><details>  <name>Andy Budd</name>  <website>http://andybudd.com/</website>  <email>andy@clearleft.com</email></details>

这里写图片描述

方法-回调函数（请求json格式）

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />   <script type="text/javascript" src="jquery-1.7.2.js"></script>   <script type="text/javascript">        $(function(){            $("a").click(function(){                var url = this.href;                var args = {"time":new Date()};                $.getJSON(url,args,function(data){                    var name = data.person.name;                    var email = data.person.email;                    var website = data.person.website;                    $("#details").empty()                                .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")                                .append("<a href='"+website+"'>"+website+"</a>");                });                return false;            });        });  </script></head><body>  <h1>People</h1>  <ul>    <li>      <a href="andy.js">Andy</a>    </li>    <li>      <a href="richard.js">Richard</a>    </li>    <li>      <a href="jeremy.js">Jeremy</a>    </li>  </ul>  <div id="details"></div></body></html>

{"person": {  "name":"Andy Budd",  "website":"http://andybudd.com/",  "email":"andy@clearleft.com"  }}

这里写图片描述

Ajax应用案例

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><html>  <head>  <script type="text/javascript" src="jquery-1.7.2.js"></script>  <script type="text/javascript">    $(function(){        $(":input[name='username']").change(function(){             var val = $(this).val();             val = $.trim(val);             if(val != ""){                var url = "${pageContext.request.contextPath}/validataUsername";                var args = {"userName":val,"time":new Date()};                $.post(url,args,function(data){                    $("#message").html(data);                });             }        });    })  </script>  </head>  <body>    <form action="" method="post">        Username:<input type="text" name="username"/>        <br>        <div id="message"></div>         <br>        <input type="submit" value="Submit"/>    </form>  </body></html>

package servlet;import java.io.IOException;import java.util.Arrays;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class ValidataUsername extends HttpServlet {    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {    }    public 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);    }}

这里写图片描述

Ajax购物车小案例

package beans;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;    }   }

package beans;import java.util.HashMap;import java.util.Map;public class ShoppingCart {    private Map<String, ShoppingCartItem> items = new HashMap<String, ShoppingCartItem>();    public void addToCart(String bookName, int price) {        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 int getTotalMoney(){        int money = 0;        for (ShoppingCartItem item: items.values()) {            money += item.getNumber()*item.getPrice();        }        return money;    }}

0 0