学习笔记：Ajax和jQuery

第一节：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:$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代码