备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

day16_ajax学习笔记

2018-05-30 1124
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一、什么是AjaxAjax( Asynchronous JavaScript And XML ):指异步 JavaScript 及 XML。不是一种新的编程语言 ，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS的新用法。

一、什么是Ajax

Ajax( Asynchronous JavaScript And XML ):指异步 JavaScript 及 XML。
不是一种新的编程语言 ，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS的新用法。

Ajax：只刷新局部页面的技术。包括以下几种技术：

  • JavaScript：更新局部的网页。
  • XML：一般用于请求数据和响应数据的封装。
  • XMLHttpRequest对象：发送请求到服务器并获得返回结果(浏览器内核创建的)。
  • CSS：美化页面样式。
  • 异步：发送请求后不等待返回结果，由回调函数处理结果。

JavaScript 中 XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力。

构造方法：
  不同浏览器，甚至相同浏览器的不同版本，获取该对象的方式是不同的。

　　

var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

方法：
  open()  该方法有3个参数，"get|post","url?name=tom","true|false",默认为true。
  send() 发送请求，可以带参数 或 null。
  setRequestHeader() 设置请求消息头。

属性：
  readyState  类型为short，只读
  responseText  类型为String，只读
  responseXML  类型为Document，只读（一般不用）
  status  类型为short，只读

事件处理器：
  onreadystatechange

二、常用方法

  • open(method, URL, async) 建立与服务器的连接
      method参数：指请求的HTTP方法，典型的值是GET或POST
      URL参数：指请求的地址
      async参数：指是否使用异步请求，其值为true或false，默认值是true，一般这个参数不写
  • send(content) 发送请求
      content参数：指请求的参数
  • setRequestHeader(header, value) 设置请求的头信息

三、常用属性

  • onreadystatechange： 指定回调函数

  • readyState： XMLHttpRequest的状态信息（客户端：浏览器）

    就绪状态码 说明
    0 XMLHttpRequest对象没有完成初始化，即：刚刚创建。
    1 XMLHttpRequest对象开始发送请求，即：调用了open方法，但还没有调用send方法。请求还没有发出。
    2 XMLHttpRequest对象的请求发送完成，即：send方法已经调用，数据已经提交到服务器，但没有任何响应。
    3 XMLHttpRequest对象开始读取响应，还没有结束，即：收到了所有的响应消息头，但正文还没有完全收到。
    4 XMLHttpRequest对象读取响应结束，即：一切都收到了。

  • status： HTTP的状态码（服务器端）

    状态码 说明
    200 服务器响应正常
    400 无法找到请求的资源
    403 没有访问权限
    500 服务器内部错误

  • responseText： 获得响应的文本内容

  • responseXML： 获得响应的XML文档对象 documednt

  注：客户端就绪状态码是4，且服务端状态码是200，才可以处理服务器数据。

示例代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/myJS.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
// 1、获取XMLHttpRequest对象
var req = getXMLHttpRequest();
// 4、处理响应结果
        req.onreadystatechange = function() {
// alert(req.readyState); // 查看客户器端就绪状态码
if (req.readyState == 4) {
// alert(req.status); // 查看服务器端响应状态码
if (req.status == 200) { // 说明服务器响应一切正常
                    alert(req.responseText);
                }
            }
        }
// 2、建立一个连接
        req.open("get", "${ pageContext.request.contextPath }/servlet/servletDemo1");
// 3、发送请求
        req.send(null);
</script>
<body>
</body>
</html>

使用Ajax验证用户名是否存在的实现步骤：

  1. 使用文本框的onblur事件(失去焦点事件)
  2. 使用Ajax技术实现异步交互
    a) 获取用户名
    a) 创建 XMLHttpRequest 对象
    b) 处理响应结果，创建回调函数，根据响应状态动态更新页面
    c) 建立一个连接
    d) 发送请求

示例代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/myJS.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
function ckName() {
// 获取用户名对象
var name = document.getElementsByTagName("input")[0];
// 创建XMLHttpRequest对象
var xhr = getXMLHttpRequest();
// 处理响应结果，创建回调函数，根据响应状态动态更新页面
            xhr.onreadystatechange = function() {
if (xhr.readyState == 4) { // 说明客户端请求一切正常
if (xhr.status == 200) { // 说明服务器响应一切正常
// alert(xhr.responseText); // 得到响应结果
var msg = document.getElementById("msg");
if (xhr.responseText == "true") {
// msg.innerText = "用户名已存在";
                            msg.innerHTML = "<font color='red'>该用户名已存在</font>";
                        } else {
                            msg.innerHTML = "<font color='green'>该用户名可以使用</font>";
                        }
                    }
                }
            }           
// 建立一个连接
            xhr.open("get", "${ pageContext.request.contextPath }/servlet/ckNameServlet?name=" + name.value + "&time=" + new Date().getTime());
// 发送请求
            xhr.send(null);
        }
</script>
</head>
<body>
    用户名：<input type="text" name="userName" onblur="ckName()"/><span id="msg" ></span></br>
    密码：<input type="password" name="pwd" /></br>
</body>
</html>

验证用户名是否存在改进代码版本（该种方式，使得网页的标签很干净，感觉不到调用事件了）：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/myJS.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
var nameElement = document.getElementsByName("userName")[0];
            nameElement.onblur = function() {
var name = this.value; // this等价于nameElement
// 创建XMLHttpRequest对象
var xhr = getXMLHttpRequest();
// 处理响应结果，创建回调函数，根据响应状态动态更新页面
                xhr.onreadystatechange = function() {
if (xhr.readyState == 4) { // 说明客户端请求一切正常
if (xhr.status == 200) { // 说明服务器响应一切正常
// alert(xhr.responseText); // 得到响应结果
var msg = document.getElementById("msg");
if (xhr.responseText == "true") {
// msg.innerText = "用户名已存在";
                                msg.innerHTML = "<font color='red'>该用户名已存在</font>";
                            } else {
                                msg.innerHTML = "<font color='green'>该用户名可以使用</font>";
                            }
                        }
                    }
                }           
// 建立一个连接
                xhr.open("get", "${pageContext.request.contextPath }/servlet/ckNameServlet?name=" + name + "&time=" + new Date().getTime());
// 发送请求
                xhr.send(null);
            }
        }
</script>
</head>
<body>
    用户名：<input type="text" name="userName" /><span id="msg" ></span></br>
    密码：<input type="password" name="pwd" /></br>
</body>
</html>

四、案例1：实现邮箱验证

  • my.js
// 获取XMLHttpRequest对象
function getXMLHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
return xmlhttp;
}
  • register.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/my.js"></script>
<head>
<title>bookStore注册页面</title>
<%--导入css --%>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript">
function changeImage() {
document.getElementById("img").src = "${pageContext.request.contextPath}/imageCode?time="
                + new Date().getTime();
    }
// 验证邮箱是否存在
function ckEmail() {
// 得到邮箱对象
var email = document.getElementByName("email")[0];
// 创建XMLHttpRequest对象
var xhr = getXMLHttpRequest();
// 处理响应结果，创建回调函数，根据响应状态动态更新页面
        xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
                    alert(xhr.responseText); // 得到响应结果
// 得到邮箱的font标签
var font = document.getElementsByTagName("font")[0];
if (xhr.responseText == "true") {
                        font.innerHTML = "此邮箱已被使用";
                        font.style.color = "red";
                    } else {
                        font.innerHTML = "此邮箱可以使用";
                        font.style.color = "green";
                    }
                }
            }
        }
// 建立一个连接
        xhr.open("get", "${pageContext.request.contextPath}/servlet/ckEmailServlet?email=" + email.value + "&time=" + new Date().getTime());
// 发送请求
        xhr.send(null);
    }
</script>
</head>
<body class="main">
<%@include file="head.jsp"%>
<%--导入头 --%>
<%@include file="menu_search.jsp"%><%--导入导航条与搜索 --%>
<div id="divcontent">
<form action="${pageContext.request.contextPath}/register.jsp"
method="post">
<table width="850px" border="0" cellspacing="0">
<tr>
<td style="padding:30px">
<h1>新会员注册</h1>
<table width="70%" border="0" cellspacing="2" class="upline">
<tr>
<td style="text-align:right; width:20%">会员邮箱：</td>
<td style="width:40%">
<input type="text" class="textinput"
name="email" onblur="ckEmail()"/></td>
<td><font color="#999999">请输入有效的邮箱地址</font></td>
</tr>
.......
</body>
</html>
  • CkEmailServlet.java
package com.itheima.web.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CkEmailServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String email = request.getParameter("email");
if ("tom@163.com".equals(email)) {
            out.print(true);
        } else {
            out.print(false);
        }
    }
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
        doGet(request, response);
    }
}

五、案例2：搜索框显示数据

  1. 编写显示数据的容器div
  2. 实现ajax响应数据
    // 创建XMLHttpRequest对象
    // 通过事件调用回调函数处理响应结果
    // 创建一个服务器连接
    // 发送请求

示例代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/my.js">
</script>
<script type="text/javascript">
window.onload = function() {
// 得到搜索框对象
var searchElement = document.getElementById("name");
// 得到父div元素对象
var div = document.getElementById("context1");
// 给文件框注册按键弹起事件
        searchElement.onkeyup = function() { 
// 先获取文本框的值
var name = this.value;
// 如果文本框没有数据时，就把父div隐藏，且不向服务器发送请求
if (name == "") {
                div.style.display = "none";
return;
            }
// 获得XMLHttpRequest对象
var xhr = getXMLHttpRequest();
// 处理结果
            xhr.onreadystatechange = function() {
if (xhr.readyState == 4) { // 客户端请求一 切正常
if (xhr.status == 200) { // 服务器响应一切正常
var str = xhr.responseText; // 得到服务器返回的数据
var ss = str.split(","); // 把字符串 1001,1002,1003 切成数组
var childDivs = "";
// 循环把数据放入子div中
for (var i = 0; i < ss.length; i++) {
                            childDivs += "<div onclick='writeText(this)' onmouseover='changeBackground_over(this)' onmouseout='changeBackground_out(this)'>" 
                            + ss[i] + "</div>"; // 把数组中的每个元素放到子div中
                        }
                        div.innerHTML = childDivs; // 把多个子div（childDivs）放入列表父div中
                        div.style.display = "block"; // 把列表隐藏
                    }
                }
            }
            xhr.open("get", "${ pageContext.request.contextPath}/servlet/searchBookAJAXServlet?name=" + name + "&time=" + new Date().getTime());
            xhr.send(null);
        }
    }
// 鼠标悬浮在子div时，改变背景色
function changeBackground_over(div) {
        div.style.backgroundColor = "gray"; // backgroundColor js中属性的写法，background-color css中属性的写法
    }
// 鼠标离开子div时，恢复背景色
function changeBackground_out(div) {
        div.style.backgroundColor = "";
    }
// 填充文本到搜索框
function writeText(div) {
// 先得到搜索框
var searchElement = document.getElementById("name");
// 把div中的文本添加到搜索框中
        searchElement.value = div.innerHTML; 
// 把父div(context1)隐藏
        div.parentNode.style.display = "none"; 
    }
</script>
<div id="divmenu">
<a href="${pageContext.request.contextPath}/showProductByPage?category=文学">文学</a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=生活">生活</a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=计算机">计算机</a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=外语">外语</a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=经营">经管</a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=励志">励志</a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=社科">社科</a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=学术">学术</a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=少儿">少儿</a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=艺术">艺术</a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=原版">原版</a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=科技">科技</a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=考试">考试</a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=生活百科">生活百科</a>
<a href="${pageContext.request.contextPath}/showProductByPage" style="color:#FFFF00">全部商品目录</a>
</div>
<div id="divsearch">
<form action="${pageContext.request.contextPath}/findProductBySearch"
method="post">
<table width="100%" border="0" cellspacing="0" >
<tr>
<td style="text-align:right; padding-right:220px">
                Search 
<input type="text" name="name" class="inputtable" 
id="name" autocomplete="on"/> <!-- 解决中文提交的问题 -->
<input type="image" src="images/serchbutton.gif"
border="0" style="margin-bottom:-4px">
</td>
</tr>
</table>
</form>
</div>
<div id="context1" style="display:block; border:1px solid red; background-color:white; 
    width:128px; position:absolute; left:860px; top:135px;">
</div>

六、json对象的学习

示例代码如下：
json.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/* json对象有些像java的普通类对象，java是纯面向对象，javascript是基于对象和事件的脚本语言。
        // java语言创建的类
        public class Person() {
            private String name;
            private int age;
            public void show() {
            }
        }
        */
/*
        // js语言创建的类，大小写均可，一般小写，为了更像一个类，这时我们大写
        function Person() {
            var name = "tom"; // 声明一个局部变量
            this.age = 10; // 声明一个成员变量
            this.show = function() {
                alert(name);
            }
        }
        var p = new Person();
        document.write(p.name);
        document.write(p.age);
        p.show();
        */
var pp = [100, true, 12.34]; // 这是一个数组
var pp = { name:"tom", age:18, 
show:function() {
                alert("hello json");
            } 
        }; // 这是一个json对象
document.write(pp.name);
document.write(pp.age);
        pp.show();
var ppp = [ { name:"tom", age:18 }, { name:"lune", age:25 } ];
document.write(ppp[1].name)
</script>
</body>
</html>

JsonTest.java

package com.itheima.json;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.junit.Test;
import com.itheima.domain.Book;
import com.itheima.util.C3P0Util;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
public class JsonTest {
    @Test // 使用 JSONObject对象封装对象数据
public void test1() {
        Book b = new Book();
        b.setId("10001");
        b.setName("西游记");
        b.setPnum(20);
        String s = JSONObject.fromObject(b).toString();
        System.out.println(s);
    }
    @Test // 使用 JSONArray对象封装 List<Book>对象数据
public void test2() throws SQLException {
        List<Book> list = new ArrayList<Book>();
        Book b1 = new Book();
        b1.setId("10001");
        b1.setName("西游记");
        b1.setPnum(20);
        Book b2 = new Book();
        b2.setId("10002");
        b2.setName("三国演义");
        b2.setPnum(30);
        Book b3 = new Book();
        b3.setId("10003");
        b3.setName("水浒传");
        b3.setPnum(40);
list.add(b1);
list.add(b2);
list.add(b3);
        String s = JSONArray.fromObject(list).toString();
        System.out.println(s);
    }
    @Test // 使用 JSONArray对象封装 List<Book>对象数据 + 使用 JsonConfig对象过滤掉不想要的数据
public void test3() throws SQLException {
        QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
        List<Book> list = qr.query("select * from book", new BeanListHandler<Book>(Book.class));
        JsonConfig jc = new JsonConfig();
        jc.setExcludes(new String[]{"pnum", "description", "category", "id"});
        String s = JSONArray.fromObject(list, jc).toString();
        System.out.println(s);
    }
}
我的GitHub地址： https://github.com/heizemingjun
我的博客园地址： http://www.cnblogs.com/chenmingjun
我的蚂蚁笔记博客地址： http://blog.leanote.com/chenmingjun
Copyright ©2018 黑泽明军
【转载文章务必保留出处和署名，谢谢！】
文章标签：
JavaScript
前端开发
Java
Web App开发
数据格式
iOS开发
容器
数据安全/隐私保护
JSON
XML
关键词：
ajax学习笔记
ajax.js学习笔记
黑泽明军
目录
相关文章
博客zhu虎康
|
2月前
|
JSON 前端开发 JavaScript
AJAX 课程学习笔记三
AJAX 课程学习笔记三
博客zhu虎康
43 0
博客zhu虎康
|
2月前
|
JSON 缓存 前端开发
AJAX 课程学习笔记二
AJAX 课程学习笔记二
博客zhu虎康
24 1
博客zhu虎康
|
2月前
|
XML 前端开发 JavaScript
AJAX 课程学习笔记一
AJAX 课程学习笔记一
博客zhu虎康
33 1
前端歌谣
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
前端歌谣
50 0
前端歌谣
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
前端歌谣
42 0
前端歌谣
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
前端歌谣
40 0
前端歌谣
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
前端歌谣
37 0
存在morning
|
10月前
|
XML JSON 前端开发
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
存在morning
64 0
游客a6syuil67nkxg
|
11月前
|
JSON 前端开发 JavaScript
Ajax学习笔记
Ajax学习笔记
游客a6syuil67nkxg
73 0
是小鱼儿哈
|
12月前
|
JSON 前端开发 数据格式
SpringMVC学习笔记（获取参数，传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交））（下）
SpringMVC学习笔记（获取参数，传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交））（下）
是小鱼儿哈
78 0
为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
解决方案技术解决方案
文档与社区文档开发者社区天池大赛培训与认证
权益中心免费试用高校计划企业扶持计划推荐返现计划
支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
关注阿里云
关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
阿里云APP阿里云微信
联系我们：4008013260
法律声明Cookies政策廉正举报安全举报联系我们加入我们
阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
© 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
浙公网安备 33010602009975号浙B2-20080101-4