一：Ajax的基本概念
Ajax 是一种客户端技术，无论使用何种服务器技术都可以使用 Ajax；Ajax 是 XMLHttpRequest 对象和 Javascript、XML、CSS、DOM 等多种技术的组合。
XMLHttpRequest 对象为新技术，是 Ajax 技术中的核心部分，是一个具有应用程序接口的 Javascript 对象，能使用 HTTP 连接服务器；由微软公司在 1999 年提出。
XML 即 eXtensible Markup Language，翻译为中文为：可拓展标记语言，用于描述结构化数据，适用于不同应用程序之间的数据交换，因此 XMLHttpRequest 对象与服务器交互的数据采用该格式
是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验
同步与异步的区别：
同步请求：当一个页面中的内容发生改变时，需要全部刷新。当一个请求发起时，其他的请求不能发起
异步请求，当一个页面中的内容发生改变时，可以局部刷新。当一个请求发起时，其他的请求也能发起作用局部刷新页面发起异步请求
二：ajax的诞生背景
传统网站中存在大量问题，如
- 网速慢的情况下，页面加载时间长，用户只能等待
- 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
- 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间。
传统项目前后端不分离，用户触发一个http请求服务器，然后服务器接收之后，在做出响应到用户，并且返回一个新的页面，也就是说交互都是通过页面刷新或页面跳转来实现。
这样的方式对于用户体验来将其实并不友好，少量的数据更新也会引发整个页面重新请求，浪费了很大一部分资源。
因此，我们希望有一种更好的方式，可以不用重新请求整个页面而达到更新部分数据的效果。
2005年，AJAX（Asynchronous Javascript And XML）横空出世，给前端行业带来了巨大的变化与革新。
三：为什么需要使用AJAX技术？
在我们之前的开发，每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。
性能会有所降低(一点内容，刷新整个页面)
用户的操作页面会中断(整个页面被刷新了)
Ajax就是能够做到局部刷新！
四：ajax的特点
优点
不需要插件支持（一般浏览器且默认开启JavaScript即可）
用户体验极佳（不刷新页面即可获取可更新的数据）
提升WEB程序的性能（在传递数据方面做到按需发送，不必整体提交）
减轻服务器和带宽的负担（将服务器的一些操作转移到移动客户端）
缺点
前进、后退的功能被破坏（因为AJAX永远在当前页，不会记录前后页面）
搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解JS引起变化数据的内容）
不同版本的浏览器对XMLHttpRequest对象支持度不足（比如IE5之前）
四：ajax的应用场景
- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单项离开焦点数据验证
- 搜索框提示文字下拉列表
五：ajax的运行原理
Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。
六：jQuery的AJAX
原生js写ajax请求（写起来很复杂，而且需要考虑浏览器版本）
jquery帮咱们封装好了一个方法 ajax，我们直接调用jquery的方法，就可以发送ajax的请求
后期，前后端分离了，还可以继续使用jquery的ajax， axios更主流一些
因为学习的是jQuery中Ajax方法，所以所说的结构即是$.ajax()的结构。
$.ajax()方法中的参数很多，我在实例中使用的只是一小部分，这里只介绍实例中所需要的参数的使用，其余更多参数还将继续学习。
js格式的ajax实现语法：
$.ajax({
url:"发送请求（提交或读取数据）的地址",
dataType:"预期服务器返回数据的类型",
type:"请求方式",
async:"true/false",
data:{发送到/读取后台（服务器）的数据},
success:function(data){请求成功时执行},
error:function(){请求失败时执行}
});
方法详情：
<1> url 默认为当前页地址
<2> dataType 可用类型：
（如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递）
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息。
script：返回纯文本JavaScript代码。
json：返回json数据。
jsonp：(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
text：返回纯文本字符串。
说明：对于json和jsonp的区别，本小白暂时没有深入了解，目前只知道jsonp可以跨域读取数据，有待进一步学习~
<3> type 可用类型主要为post和get两种（默认为get）
get：从指定的资源请求数据（从服务器读取数据）
post：向指定的资源提交要被处理的数据（向服务器提交数据）
<4> async 异步方式，默认为true，即异步方式。当设置为false时，为同步方式。
异步方式：ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发ajax里的success方法，这时候执行的是两个线程。
同步方式：在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
说明：这里的同步和异步有待深入理解，以下实例均使用默认的异步方式
<5> data 请求的数据，{ }中可以填入多项数据。如果不填（一般为get请求），则读取对应地址的全部数据，此时可以在console中通过console.log(res)显示数据情况。
<6> success 和 error 两个函数 一般需要设置，方便确定请求是否成功，以及请求成功后的提示或是对数据的处理和显示。
post方式
格式：
$.post(url, [data], [callback], [type]); 参数1：url，请求路径
参数2：data，请求参数
参数3：callback，回调函数
参数4：type，返回内容格式，默认的是text,xml, html, script, json, text, _default。
get方式
格式：
$.get(url, [data], [callback], [type]);第一个参数：请求的路径 如：
${pageContext.request.contextPath}/Servlet1
第二个参数：请求的参数 格式：// JSON数据格式
{key1:value1,key2:value2}
第三个参数：回调函数 格式：
function(data){
alert(data);
}
第四个参数：返回内容 格式：xml, html, script, json, text, _default。
注意：
服务器响应编码为：application/json;charset=UTF-8，回调函数data类型是json对象
服务器响应编码为：text/html;charset=UTF-8，回调函数data类型是字符串。
$.get() 以get请求方式发送ajax除了请求方式不同，使用方式与$.post()完全一致。
get()和post()两种方式书写格式一模一样，只需要修改.get()为.get()为.post()，其余地方不需要改动！
它们的请求方式不同$.get()为get请求，$.post()为post请求。这两种请求方式在处理编码方式上不一样，建议优先使用$.post()请求方式。
案例：用户注册 失去焦点时，判断是否成功。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type = "text" id = "sname" onblur = "myf(this.value);" /><span id = "sid"></span><br/>
<input type = "text" id = "spwd" />
<script>
function myf(sname){
$.ajax({
type:"post",
dataType:"text",
url:"login.do",
data:"sname="+sname,
success:function(data){
$("#sid").html(data);
}
});
}
</script>
</body>
</html>
----------------------------------------------loginServlet类-----------------------------------------------------------
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("我是get请求");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("我是post请求");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String sname = request.getParameter("sname");
String str ="ok";
if("admin".equals(sname)) {
str = "no";
}
PrintWriter out = response.getWriter();
out.print(str);
out.flush();
out.close();
}
}
七：json的基本概念
一种与开发语言无关的、轻量级的数据存储格式，全称JavaScript Object Notation，一种数据格式的标准规范，起初来源于JavaScript这门语言，后来随着使用的广泛，几乎每门开发语言都有处理JSON的API。
优点：易于人的阅读和编写，易于程序解析与生产。
JSON样例：首先一个花括号{}，整个代表一个对象，同时里面是一种Key-Value的存储形式，它还有不同的数据类型来区分
八：JSON解析的工具
（1）org.json的使用
（2）net.sf.json的使用
（3）json-simple的使用
（4）gson的使用
（5）jackson的使用
（6）fastjson的使用
九：fastjson的使用
JSON文本：满足一个对象的定义或者一个数组的定义或者一个对象数组的定义的字符串
- 对象----------------JSON字符串
Student stu = new Student("张三", "男", 18);
String string = JSON.toJSONString(stu);
System.out.println(string);//{"name":"张三","age":18,"sex":"男"}- 字符串----对象
Student student = JSON.parseObject(string, Student.class);
System.out.println(student);- 集合-----------JSON字符串
List<Student> list = new ArrayList<Student>();
list.add(new Student("张三", "男", 19));
list.add(new Student("张翼", "男", 22));
list.add(new Student("李四", "女", 33));
String jsonList = JSON.toJSONString(list);
System.out.println(jsonList);//[{"name":"张三","sex":"男","age":19},{"name":"张翼","sex":"男","age":22},{"name":"李四","sex":"女","age":33}]- JSON字符串--------集合
List<Student> parseArray = JSON.parseArray(jsonList, Student.class);
System.out.println(parseArray.size());
案例：get方式和post方式的演示
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<button id="b1">点我get</button>
<button id="b2">点我post</button>
<script>
$(b1).click(function(){
$.get("demo.do",{
uname:"sa",
upwd:"123"
},function(){
//相当于success
},"text")
})
$(b2).click(function(){
$.post("demo.do",{
uname:"sa",
upwd:"123"
},function(obj){
//相当于success
console.log(obj)
for(var i of obj){
document.write(i.gname+"<br>")
}
},"json")
})
//json 对象字符串
var a={
name:"sa",
pwd:"123"
}
//将对象变成字符串 JSON.stringify()
console.log(JSON.stringify(a))
var str='{"name":"sa","pwd":"123"}'
//将字符串变成对象
// js: eval()
// jquery: $.parseJSON()
console.log($.parseJSON(str))
</script>
</body>
</html>-------------------------------------------servlet类-------------------------------------------------------------------------
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
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 com.alibaba.fastjson.JSON;
import com.dao.GoodsDao;
import com.entity.Goods;
/**
* Servlet implementation class DemoServlet
*/
@WebServlet("/demo.do")
public class DemoServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("uname");
String pwd = request.getParameter("upwd");
System.out.println(name+"-get-"+pwd);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("uname");
String pwd = request.getParameter("upwd");
System.out.println(name+"-post-"+pwd);
//String str="{\"name\":\"sa\",\"pwd\":\"123\"}";//对象字符串
//将商品对象变成String字符串（json）
//Goods g = new GoodsDao().getById(3);
//String str=JSON.toJSONString(g);
String str=JSON.toJSONString(new GoodsDao().getAll());
response.setContentType("text/json;charset=utf-8");
PrintWriter out = response.getWriter();
System.out.println(str);
out.print(str);
out.flush();
out.close();
}
}
案例：自动补全
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
ul {
border: 10px solid red;
}
</style>
</head>
<body>
<input id="i1">
<ul>
<li><a>模拟数据</a></li>
</ul>
<script>
//onkeydown 键盘按下
//onkeyup 键盘松开
$(i1).keyup(function(){
$.post("search.do",{
a:$(i1).val()
},function(obj){
//1.清空ul的数据
$("ul").empty();
for(var i of obj){//遍历集合
$("ul").append('<li><a>'+i.gname+'</a></li>')
}
},"json")
})
</script>
</body>
</html>
--------------------------------------------servlet类------------------------------------------------------------------------
package com.servlert;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
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 com.alibaba.fastjson.JSON;
import com.dao.GoodsDao;
import com.entity.Goods;
/**
* Servlet implementation class SearchServlet
*/
@WebServlet("/search.do")
public class SearchServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SearchServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String key = request.getParameter("a");
List<Goods> all = new GoodsDao().getAll(key);
//将集合变成JSON
String str = JSON.toJSONString(all);
//将json发送到前台
response.setContentType("text/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(str);
out.flush();
out.close();
}
}
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
