学习笔记：Ajax和jQuery
少年易老学难成，一寸光阴不可轻。未觉池塘春草梦，阶前梧叶已秋声。
- 第一节：Ajax技术简介
- 第二节：Ajax执行流程(难点)
- 第三节：数字交换格式JSON
- Ajax交互扩展
- 第一节：使用JQ简化Ajax开发
- 第二节：使用AJAX抓取HTML代码
第一节：Ajax技术简介
1:传统网页技术存在弊端
a、传统数据提交需要通过表单，刷新页面
b、页面刷新导致用户体验差
c、提交一点点数据导致整个页面全部内容的重新加载
d、延迟用户等待时间
e、增加服务器负担
2:Ajax：异步的JavaScript和XML
3:AJAX:Asynchronous JavaScript and XML
4:是一门前后端都会涉及的技术
5:诞生于2006年前后
6:主要用于改善用户体验，和网页舒心的弊端做斗争
7:是实现页面和后台刷新通信技术，或者叫局部刷新
8:Ajax的重点和难点在JavaScript,大量的代码需要JavaScript完成
第二节：Ajax执行流程(难点)
1、构建请求对象（第二种针对IE6）
a、var request = new XMLHttpRequest();
b、var request = new ActiveXObject(“Microsoft.XMLHTTP”);
2、创建一个新的http请求
a、open(String methid,String url,boolean async)
3、发送请求到服务器
a、send(String date)
b、data是字符串格式的数据
c、data的格式是查询字符串key=value&key2=value2
d、如果是get提交方式，则不填或者填null
4、绑定事件
a、onreadystatechange
5、结果处理
a、readyState:返沪请求的当前状态，4表示请求结束
b、status:请求的http状态码，200表示成功
c、responseText:以文本形式获取响应值
d、responseXML:以XML形式获取响应值，并解析为DOM对象
6、提交请求参数
a、如果是post方式，则在send()方式中传入参数
b、如果是get方式，则将参数以查询字符串追加在url末尾
7、注意事项：
a、如果是post方式提交，需要设置请求头信息
登陆页面.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<form action="user" method="get" enctype="application/x-www-form-urlencoded">
用户名：<input id="userName">
<input type="button" value="检测用户名" onclick="chick()"/>
</form>
<script>
function chick(){
/* 1:构建请求对象 */
var request = new XMLHttpRequest();
/* 查询字符串key=value&key2=value2*/
var p="userName="+document.getElementById("userName").value; //通过id拿到姓名的值
/* 2:创建请求地址 */
var url="/Ajax1/user?"+p; /* get提交方式的传值要写在url里，post传参是要把查询字符串写在send（）里 */
/* 注：如果是post提交方式，则需要设置编码格式
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
第二个参数可以在form里enctype的快捷键生成 */
/* 触发按钮事件，这个事件判断请求是否回来 */
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status==200){ /* 准备状态：readyState == 4 status：http协议的状态码==200*/
if(request.responseText==1){ /* request.responseText可以读到io流输的内容 */
alert("请求回来的，而且是成功回来了,用户已存在");
}else{
alert("请求回来的，而且是成功回来了,用户不踩在");
}
/* alert("请求回来的，而且是成功回来了"+request.responseText); */
}
}
/* 3：打开请求 */
request.open("get",url);
/* 4:发送请求到服务器 */
request.send();
}
</script>
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;
//2:配置访问路径
@WebServlet("/user")
public class UserServlet extends HttpServlet{
//1:重写service方法
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8"); //客户端显示编码，用response
String userName= request.getParameter("userName");
System.out.println(userName);
try {
Thread.sleep(3000); //主线程延迟执行
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
PrintWriter out = response.getWriter(); //注意是response不是request
if("admin".equals(userName)) {
out.print(1);
// System.out.println("用户名已存在");
}else {
out.print(0);
// System.out.println("用户名不存在");
}
out.flush(); //一定要释放资源
}
}
第三节：数字交换格式JSON
1:JSON：JavaScript Object Notation
2：Notation:记号，标记
3:它是一种轻量级的数据交换格式
4:类似与实体对象，用于在客户端和服务器之间传递数据
5:JSON对象
var obj = {name:“zhangsan” }
6:JSON数组
var names =[“aa”,“bb”,“cc”,“dd”];
7:JSON对象数组
var objList =[{},{},{}];
8:标准的JSON格式要求：
a、属性名一定要用引号引用，且一定是双引号
b、属性值如果是字符串格式，也一定要用双引号引用
9：JSON格式字符串和JSON对象的转换
a、 JSON.parse(jsonStr)
b、JSON.stringgify(jsonObj)
10:通过ajax读取单个学生信息
Servlet类
//2:配置访问路径
@WebServlet("/user")
public class UserServlet extends HttpServlet{
//1:重写service方法
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8"); //客户端显示编码
String userName= request.getParameter("userName");
System.out.println(userName);
try {
Thread.sleep(3000); //主线程延迟执行
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
PrintWriter out = response.getWriter(); //注意是response不是request
if("admin".equals(userName)) {
out.print("{\"name\":\"zhngsan\"}");
// System.out.println("用户名已存在");
}else {
out.print("{\"name\":\"zhngsan\"}");
// System.out.println("用户名不存在");
}
out.flush();
}
}
登陆.jsp
<script>
//JSON 对象转字符串
/* var obj ={name:"zhangsan"};
console.log(JSON.stringify(obj)); */
//JSON 字符串转对象
/* var str ={"name":"zhangsan"};
var obj =JSON.parse(str);
console.log(obj); */
function chick(){
/* 1:构建请求对象 */
var request = new XMLHttpRequest();
var p="userName="+document.getElementById("userName").value;
/* 2:创建请求地址 */
var url="/Ajax1/user?"+p; /* get提交方式的传值要写在url里，post传参是要写在send（）里 */
/* 如果是post提交方式，则需要设置编码格式
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
第二个参数可以在form里enctype的快捷键生成 */
/* 触发按钮事件 */
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status==200){ /* 准备状态：readyState == 4 status：http协议的状态码==200*/
//console.log(request.responseText); //接收JSON响应回来的值，接收过来的是字符串类型
//JSON 字符串转对象
var JSONStr = request.responseText;
var obj=JSON.parse(JSONStr);
console.log(obj.name);
/* if(request.responseText==1){
alert("请求回来的，而且是成功回来了,用户已存在");
}else{
alert("请求回来的，而且是成功回来了,用户不踩在");
} */
/* alert("请求回来的，而且是成功回来了"+request.responseText); */
/* request.responseText可以读到io流输的内容 */
}
}
/* 3：打开请求 */
request.open("get",url);
/* 4:发送请求到服务器 */
request.send();
}
</script>
Ajax交互扩展
第一节：使用JQ简化Ajax开发
1:上一章讲解了$.ajax(),它是所有ajax方法的底层方法
2:在此基础上，封装了几个简便的方法，来简化ajax请求的发送
3:$post(url,params,function(data){ }，dataType);
4:$get(url,praams,function(data){ }，dataType);
5: g e t J S O N ( u r l , p a r a m s , f u n c t i o n ( d a t a ) ) ； 此 方 法 等 同 于 getJSON(url,params,function(data){ })； 此方法等同于 getJSON(url,params,function(data))；此方法等同于.get(url,params,fn,“json”)；
只能用get方式发送请求。
Servlet
@WebServlet("/userInfo")
public class UserInfoServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;chartset=UTF-8");
String userName = request.getParameter("userName");
PrintWriter out =response.getWriter();
Student stu = new Student(1,"zhangsan");
String jsonStr=JSON.toJSONString(stu);
if(userName.equals("liuwenxin")) {
out.print(jsonStr);
}else {
out.print(jsonStr);
}
out.flush();
out.close();
}
}
Ajax
<%@ page language="java" pageEncoding="UTF-8"%>
<form action="user" method="get" enctype="application/x-www-form-urlencoded">
用户名：<input id="userName">
<input type="button" value="检测用户名" onclick="chick()"/>
</form>
<script src="/jQAjax/Js/jquery-3.5.1.min.js"></script>
<script>
function chick(){
var url="/jQAjax/userInfo";
var p="userName="+$("userName").val();
$.get(url,p,function(data){
console.log(data);
console.log(typeof data);
//用JSON将字符串转成对象
//console.log(JSON.parse(data));
},"json");//加上“json”就会自动将我们的字符串转成对象形式
/* $.getJSON()相当于 $.get(url,p,function(data){},"json") */
/* $.ajax({
url:url,
method:"post",
data:p,
success:function(data){
alert(data);
}
}) */
}
</script>
第二节：使用AJAX抓取HTML代码
1、发送Ajax抓取的HTML代码