AJAX学习笔记一

AJAX技术

AJAX简介

什么是AJAX？W3School上是这样描述AJAX的：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX并不是一种新的语言，而是一种使用现有的标准的新方法。使用AJAX能够使我们在不重新加载页面的情况下仍然可以与服务器进行数据交换，也就是说AJAX可以对网页的某个部分进行动态地更新。一个最常见的例子就是站内搜索。比如当我们使用百度进行搜索的时候，在我们输入关键字时，输入框的下方会弹出一个搜索建议列表，动态地向用户给出提示信息。

同步与异步

在使用AJAX之前，首先需要明白什么是同步？什么是异步？同步是指客户端发送请求到服务器，在服务器响应之前，客户端都处于等待阻塞状态。而异步是指客户端发送请求到服务器，无论服务器是否响应，客户端都不会被阻塞。

原生的AJAX的技术

原生的AJAX技术主要分为五个部分：

1、创建XMLHttpRequest 对象
2、为XMLHttpRequest 对象绑定监听器
3、指定提交的URL
4、发送请求
5、接收响应数据

1、创建XMLHttpRequest 对象

值得注意的是所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）都内建了 XMLHttpRequest 对象。

创建XMLHttpRequest对象

1	var xmlhttp = new XMLHttpRequest();

2、为XMLHttpRequest 对象绑定监听器

为XMLHttpRequest 对象绑定监听器

1
2
3

xmlhttp.onreadystatechange=function(){
    ...your code
}

3、指定提交的URL

1	open(method,url,async)

方法	描述
open(method,url,async)	指定请求的类型、URL 以及是否异步处理请求

method：请求的类型；GET 或 POST
url：资源文件的路径
async：true（异步）或 false（同步）

4、发送请求

发送请求

1	xmlhttp.send();

5、接收响应数据

响应数据一般在onreadystatechange事件就绪时执行的函数的内部接收：

1
2
3

xmlhttp.onreadystatechange=function(){
    // 此处接收响应数据
}

Jquery的AJAX技术

jQuery 库拥有完整的 Ajax 兼容套件。对 Js 原生的 AJAX 技术进行了封装，因此使用起来也更加方便，一般常用的方法有

$.get(url, [data], [callback], [type])
$.post(url, [data], [callback], [type])

以$.post(url, [data], [callback], [dataType])为例，其用法如下：

$.post(
    "${pageContext.request.contextPath}/test01", 
    { name: "bob", age: "20" },
    function(data){
        process(data);
    }, 
    "json"
);

关于参数的描述

参数	描述
url	必须。指定把请求发送到哪个地址
data	可选。指定发送给服务器的数据
callback	可选。请求成功是执行的回调函数
dataType	可选。指定期望服务器返回的数据类型（JQuery会根据指定的类型自动类型转换）常用的返回类型有xml、json、script、html

使用AJAX异步处理完成站内搜索Demo

首先自己写了一个简单的jsp页面，里面就一个搜索框以及提交按钮，效果如下：

submit

初始页面代码

<%@ 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>
	<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
	<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
	<script src="js/bootstrap.js" type="text/javascript"></script>
	<style>
		.myclass1{
		    width:20%;
		    float:left;
		     margin:5px 5px;
		}
		.myclass2{
		    position:absolute;
		    margin:43px 5px;
		    z-index:1000;
		    background:#f0f3f5;
		    width:266px;
		    height:270px;
		    border:solid 1px #ccc;
		    display: none;
		}
	</style>
</head>
<body>
	<div class="container-fluid">
		<form class="navbar-form navbar-right" role="search">
			<div class="form-group" style="position: relative">
				<input id="search" type="text" class="form-control myclass1" placeholder="Search" onkeyup="searchWrod(this)">
				<div id="showDiv" class="myclass2"></div>
				<button type="submit" class="btn btn-default" style="margin-top:5px">Submit</button>
			</div>
		</form>
	</div>
</body>
</html>

需求的分析，下面是整个查询业务的分析过程，由于水平有限，只能大概地画出代码的执行过程。

xuqiu

代码的实现，首先是在jsp文件中获取数据并发送到服务器，修改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>
		<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
		<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
		<script src="js/bootstrap.js" type="text/javascript"></script>
		<style>
		  .myclass1{
		      width:20%;
		      float:left;
		      margin:5px 5px;
		  }
		  .myclass2{
		      position:absolute;
		      margin:43px 5px;
		      z-index:1000;
		      background:#f0f3f5;
		      width:266px;
		      border:solid 1px #ccc;
		      display: none;
		  }
		</style>
	</head>
	<body>
		<!-- 搜索栏 -->
		<div class="container-fluid">
			<form class="navbar-form navbar-right" role="search">
				<div class="form-group" style="position: relative">
					<input id="search" type="text" class="form-control myclass1" placeholder="Search" onkeyup="searchWrod(this)">
					<div id="showDiv" class="myclass2">

                    </div>
					<button type="submit" class="btn btn-default" style="margin-top:5px">Submit</button>
				</div>
			</form>
			<!-- 站内搜索的实现 -->
                <script type="text/javascript">
                    function overfun(obj){
                        $(obj).css("background","#1093f3");
                    }
                    
                    function outfun(obj){
                        $(obj).css("background","#fff");
                    }
                    
                    function clickfun(obj){
                        // 点击选择时将内容设置到搜索输入框中并隐藏搜索提示框
                        $("#search").val($(obj).html());
                        $("#showDiv").css("display","none");
                    }
                    
                    function searchWrod(obj){
                        // 1.获取输入框中的内容
                        var keyword = $(obj).val();
                        // 2.根据输入框中的内容去数据库中进行模糊查询---List<Product>
                        var content = "";
                        $.post(
                                // 提交的URL
                                "${pageContext.request.contextPath}/searchWord",
                                // 提交给服务器端的搜索关键字
                                {"keyword":keyword},
                                function(data){
                                    if (data.length > 0) {
                                        // 拼接div
                                        for (var i = 0; i < data.length; i++) {
                                            content += "<div style='padding:5px 5px;cursor:pointer' onclick='clickfun(this)' onmouseover='overfun(this)' onmouseout='outfun(this)' >" + data[i] + "</div>";
                                        }
                                        // 3.将商品返回的商品名称显示在showDiv中
                                        $("#showDiv").html(content);
                                        $("#showDiv").css("display","block");
                                    }
                                },
                                // 服务器返回的数据类型
                                "json"
                            );
                    }
                </script>
		</div>
</body>
</html>

WEB层的Servlet

package com.my.web;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.my.domain.Product;
import com.my.service.SearchProductService;

public class SearchWordServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public SearchWordServlet() {
        super();
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        // 1.获取客户端发送过来的数据
        String keyword = request.getParameter("keyword");
        // 2.传递参数到service层
        SearchProductService service = new SearchProductService();
        List<Product> productList = null ;
        try {
            productList = service.searchProductByKeyWord(keyword);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        
        // 3.使用工具类将productList转换为json格式的数据并返回给客户端
        // jsonlib、gson(谷歌)、fastjson(阿里巴巴)
        Gson gson = new Gson();
        String json = gson.toJson(productList);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write(json);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

Service层的代码

package com.my.service;

import java.sql.SQLException;
import java.util.List;

import com.my.dao.SearchProductDao;
import com.my.domain.Product;

public class SearchProductService {

    public List<Product> searchProductByKeyWord(String keyword) throws SQLException {
        SearchProductDao dao = new SearchProductDao();
        return dao.searchProductByKeyWord(keyword);
    }

}

DAO层的代码

package com.my.dao;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.my.domain.Product;
import com.my.utils.DataSourceUtils;

public class SearchProductDao {

    public List<Product> searchProductByKeyWord(String keyword) throws SQLException {
        QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
        String sql = "select * from product where pname like ? limit 0,6";
        return qr.query(sql, new BeanListHandler<Product>(Product.class), "%" + keyword + "%");
    }
}

效果

xuqiu