Ajax-load

最新推荐文章于 2022-08-18 20:18:56 发布

易辰_

最新推荐文章于 2022-08-18 20:18:56 发布

阅读量746

点赞数

分类专栏： Jquery\Js\Ajax

本文链接：https://blog.csdn.net/u013210620/article/details/62418845

版权

Jquery\Js\Ajax 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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