Ajax-load

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,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,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,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;
    }
}