Ajax从入门到静态发展

AJAX第一章：AJAX基础概念：AJAX = Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）。阿贾克斯

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。简言之：是局部刷新技术。异步刷新。

回顾历史：

Web 1.0 sina sohu 用户被动接受新闻Web 2.0 社区，web群 互动 环节增加，用户和服务器交互Web 3.0 自媒体，突出客户的实现，客户也可以成为中心，其他人订阅 参与 讨论等Web 4.0 物联网时代 自媒体 人 服务器 +机器交互，机器本身也是参与者。1.Ajax核心 XMLHttpRequest所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1.1 对象的创建代码语言：javascript复制let xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}1.2 对象的方法方法：open(method,url,async)

参数有3个：

method：http请求的方法有俩get/post,选择就是get/post。

url：就是View层的页面要提交到服务器的请求，一般是Servlet或Controller的地址

async:true：异步请求；false:同步请求;

页面同步：页面所有的元素加载完毕之后，数据提交到服务器；

异步：页面不用所有的元素加载完毕之后，部分提交；

异步请求：效率、性能更高；

同步请求：会导致网络卡顿|网页无响应的现象、页面冻结。

方法

描述

open(method,url,async)

创建一个请求

send(string)

将请求发送到服务器。 string：仅用于 POST 请求

1.3 onreadystatechange 事件当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪。

status

200: “OK” 404: 未找到页面；4XX： 客户端的问题； 5XX：服务器问题

1.4 服务器的响应如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性

描述

responseText

获得字符串形式的响应数据。

responseXML

获得 XML 形式的响应数据。

2.使用步骤如何使用ajax，使用有两种：一种是前端的纯粹的使用，node+ajax；一种是后台的，我们关注的是后台。

我们之前增加用户的时候，假设用户名(账户)不能重复，我们之前是没有判断的。

当数据库服务器存在某用户的时候，文本框离开，则报已经存在该用户了；否则，显示可以注册。

创建XMLHttpRequest对象设置请求信息open(get|post,url,true|false)向服务器发送请求让XmlHttpRequest对象接受服务器的响应数据，通过创建的回调函数编写服务器端处理客户端请求步 骤

请求方式

实 现 代 码

初始化组件

GET

xmlHttpRequest.open( “GET”,url, true );

POST

xmlHttpRequest.open( “POST”,url, true ); xmlHttpRequest.setRequestHeader( “Content-Type”, “application/x-www-form-urlencoded” );

发送请求

GET

xmlHttpRequest.send(null );

POST

xmlHttpRequest.send(“key=xxx&type=12&year=2016” );

get代码实现：

代码语言：javascript复制//1.创建XmlHttpRequest对象,封装一下，封装到一个函数;

function createXhr() {

if(window.XMLHttpRequest)

return new XMLHttpRequest();//如果有，则创建其对象;

else

return new ActiveXObject("Microsoft.XMLHTTP");

}

//2.开始实现我们的目标；离开的事件是blur

$(function () {

//离开的时候，先判断一下；用户名不能为空，实际上应该是正则验证;

$("#name").blur(function () {

let name=$("#name").val();

if(name==null||name==''){//后续使用正则实现

$("#nameinfo").html("用户不能为空!").addClass("nameinfo");

/*刚才的错误是style里面加了一个html的注释，亏!!!*/

}else{

//否则，就是输入的不是空了，有值，那这个值就要看看是否存在于数据库了。

//2.1 这时候要得到XmlHttpRequest对象;

xhr=createXhr();

//2.2设置请求行open,请求后台的Servlet,客户端向服务器发送了一个参数name，值name

xhr.open("get","userServletByName?name="+name,true);

//2.3.发送请求,get的时候不加东西；

xhr.send(null);

//2.4当事件改变Ok的时候，响应的函数；

xhr.onreadystatechange=function () {

//readyState==4;并且状态为200的时候，才OK。

if(xhr.readyState==4 && xhr.status==200){

//定义变量data，接受异步对象xhr的服务器的响应数据;由Servlet来返回

let data=xhr.responseText;

console.log(data);

//暂停一下;

//下面就是根据data响应的数据值做出判断;

//服务器端响应给我们，true|false了.data-->文本;我们把它当成了boolean

if(data=='true'){

$("#nameinfo").html("用户名已经注册").addClass("nameinfo");

}else{

$("#nameinfo").html("用户名可以注册");

$("#nameinfo").css("color","green");

}

}

}

}

});

})Servlet的代码：

代码语言：javascript复制package com.aaa.servlet;

import com.aaa.dao.UserDao;

import com.aaa.dao.UserDaoImpl;

import com.aaa.pojo.User;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

/**

* Created by 张晨光 on 2020/8/19 9:49

*/

@WebServlet("/front/findUserByName")

public class FindUserByNameServlet extends HttpServlet {

//控制层调用dao层对象;

UserDao userDao=new UserDaoImpl();

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

response.setCharacterEncoding("UTF-8");

String name = request.getParameter("name");

System.out.println("---"+name);

User userByName = userDao.findUserByName(name);

//向客户端返回一个result

boolean result=false;

//下面是针对userByName进行的判断,不为空则表示存在

if(userByName!=null)

result=true;

//下面还是向客户端发送信息

PrintWriter writer = response.getWriter();

writer.print(result);

//false:表示用户不存在；true:表示存在;

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

this.doPost(request, response);

}

}post代码实现：

修改get的2. 3.步骤即可;

代码语言：javascript复制//2.2设置请求行open,请求后台的Servlet,客户端向服务器发送了一个参数name，值name

//xhr.open("get","userServletByName?name="+name,true);

xhr.open("post","userServletByName",true);

xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); //必须有;

//2.3.发送请求,get的时候不加东西；

//xhr.send(null);get 没东西;

xhr.send("name="+name);问题总结：

1.jquery、css无法加载；

web.xml

代码语言：javascript复制

default

*.css

*.js

*.jpg

js调用

代码语言：javascript复制

//这里不要增加type='javascript'代码语言：javascript复制//向客户端发响应，编码要一致;

response.setContentType("text/html;charset=UTF-8");

response.setCharacterEncoding("UTF-8");3.出来2行的问题是需要加判断,并且&&符号；

代码语言：javascript复制if(xhr.readyState==4 && xhr.status==200){

代码

}总结一下：

1.了解异步对象XmlHttpRequest

2.了解其四大步骤；

3.通过javaweb代码来实践一下。这个是重点，看视频，一步一步走；

作业：

用户注册的实现

第二章 jQuery实现Ajax传统方式实现Ajax的不足

步骤繁琐方法、属性、常用值不好记忆处理复杂数据（如XML）比较麻烦浏览器兼容问题jQuery Ajax将Ajax相关操作进行了封装。$.ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get(),

.ajax() 返回其创建的 XMLHttpRequest 对象。

.get(),$.post()

2.1 语法格式();小括号里面包括了{}。

在{}里面，写了type,url,data,success,dataType这样几个key关键字的，给这几个关键字赋值的时候，使用的是:"值"的方式。

$.ajax({

type: ‘POST’, //请求方式，默认为get

url: url ,

data: data ,

success: success ,

dataType: dataType

});

参数

参数

描述

url

必需。规定把请求发送到哪个 URL,Servlet|Controller

data

可选。映射或字符串值。规定连同请求发送到服务器的数据，客户端向服务器的数据

success(result, textStatus, jqXHR)

可选。请求成功时执行的回调函数。

dataType

可选。规定预期的服务器响应的数据类型。 默认执行智能判断（xml、json、script 或 html）。

昨天else之后的代码替换：

代码语言：javascript复制$.ajax({

type:"get",

url:"userServletByName",

//data:"name="+name, //是客户端向服务器的请求数据

//按照json格式传递;

data:{"name":name}, //""里面的是key,不带"的是value。

datatype:"text",

success:function(result) { //成功的时候，执行的匿名函数;对比昨天的onreadyStatechange

console.log(result);

if(result=='true'){

$("#nameinfo").html("用户名已经注册").addClass("nameinfo");

}else{

$("#nameinfo").html("用户名可以注册").addClass("gre");

}

}

});代码量非常简练。

第三章 JSON概念：是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。英文：JavaScript Object Notation

3.1语法格式{key1：value1, key2：value2, …} 的键值对结构，当值为字符串的时候，需要使用"",引起来。

let str={“name”:“张三”,“age”:18,“address”:“河南郑州”}

json数组,数组的格式：

[],这个[]里面放多个{}对象或字符串

[

{}, 这些都是json格式

{},

{}

]

json对象读取：

代码语言：javascript复制

json数组读取：

代码语言：javascript复制

第四章 Ajax和Json案例 Ajax实现搜索框自动补全

因为Ajax技术异步请求和无刷新特性，使得在客户端用户体验越来越丰富。 最典型的一个案例是各大搜索引擎都应用的搜索关键字自动联想功能，当打开Google或者百度， 在搜索栏中输入关键字时， 会自动弹出很多和关键字相关的信息。

思路1.当用户松开键盘（输入内容）时向服务器发送请求，处理事件是onkeyup;

2.服务器得到客户端的请求数据之后，去数据库查询结果，返回查询结果到客户端；

3.客户端得到响应数据之后，自动填充到自动提示区域；

4.在选中内容上，光标悬停会有背景突出显示；

5.当我们单击某个内容的时候，内容显示到搜索框，整个提示区域关闭；

步骤1.构建页面，onkeyup事件搜索框的onkeyup事件;

代码语言：javascript复制<%@ page contentType="text/html;charset=UTF-8" language="java" %>

2.客户端请求服务器的数据$.ajax({})–>Servlet–>业务层对象–>dao层对象–sql数据；

NewsDaoImpl容易出错的代码，sql语句的模糊查询，再次强调！！！

可以先填坑！！！

代码语言：javascript复制// String sql="select * from news where title like ?";

// //预编译语句对象赋值，？% key %

// Object[]params={"%"+key+"%"};

String sql="select * from news where title like concat('%',?,'%')";

Object[]params={key};

return BaseDao.findList(sql,News.class,params);补充：fastjons jar

Servlet代码

坑1：xml问题，需要设置编码；

坑2：json,修改text/json,务必有json

代码语言：javascript复制//1.服务器端的Servlet,接受客户端的数据；

String key=request.getParameter("key");

//2.调用业务层的对象；业务层的对象，又需要去调用dao层对象;

NewsService newsService=new NewsServiceImpl();

//业务层对象，根据关键字来查找新闻;

List newsList = newsService.selNewsByKey(key);

//System.out.println(newsList);

response.setContentType("text/html;charset=utf-8");

response.setCharacterEncoding("utf-8");

//向客户端发送数据;

PrintWriter writer = response.getWriter();

//注意：此处有变化，使用到了新的jar：fastjson

//之前输出的是List对象;

writer.print(JSON.toJSON(newsList)); //fastJson直接将我们的对象集合转换为json数据;

writer.flush();

writer.close();3.填充数据到显示区域这时候已经得到数据了：

[{}] 是json数组;

代码语言：javascript复制//测试json数组的长度

//console.log(result.length);

//如何显示2条json数组的数据；思路：循环；

let content=""; //定义变量，接受title的内容;

for(let i=0;i

content+="

}

//填充到提示区域;

$("#tips").html(content).show();4.5 剩下功能代码语言：javascript复制//4.背景突出显示;利用hover(a,b):相当于mouseover,mouseout

$(".list_link").hover(

function(){

$(this).addClass("hover");

},

function () {

$(this).removeClass("hover");

}

);

//5.单击选中内容的时候，提示区域没有了，选中内容到了搜索框 ；

$(".list_link").click(function () {

$("#key").val($(this).html());

$("#tips").html("").hide();//清空，并隐藏;

});作业：如何显示新闻标题 新闻作者,模仿天猫的自动补全；

代码语言：javascript复制$(this).addClass("hover");

},

function () {

$(this).removeClass("hover");

}

);

//5.单击选中内容的时候，提示区域没有了，选中内容到了搜索框 ；

$(".list_link").click(function () {

$("#key").val($(this).html());

$("#tips").html("").hide();//清空，并隐藏;

});代码语言：javascript复制作业：如何显示新闻标题 新闻作者,模仿天猫的自动补全；