imooc个人笔记 jQuery、Ajax、json交互、同步异步

最新推荐文章于 2023-10-11 16:38:09 发布

音殿

最新推荐文章于 2023-10-11 16:38:09 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/weixin_41992953/article/details/88615475

版权

jQuery：是目前前端非常著名的JS库，用于简化页面开发的过程。

Ajax:是HTML中一种新的通讯方式，可以异步与服务器后台进行交互。

JavaScript库：第三方厂商开发出来的一个一个JS的函数库，作用是简化JavaScript的开发。
在这里插入图片描述
jQuery介绍：

jQuery下载于安装：

目录放置位置：

jQuery选择器实验室：
在选择文本框内输入标签,则页面中的所被选的标签进行高亮显示。如上图超链接即将被高亮处理。

结果：
在这里插入图片描述 lab.html

在这里插入图片描述

    <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>

若想使用jquery则必须引入.js

<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	<script type="text/javascript">
		/*
			id选择器使用"#id值"进行选择
			css选择器使用".css类名"进行选择
			$(".myclass").addClass("highlight");
		*/
		
		document.getElementById("btnSelect").onclick = function(){
			var selector = document.getElementById("txtSelector").value;
			//jquery的选择器方法
			//选择器 
			$("*").removeClass("highlight");
			$(selector).addClass("highlight");
		}

在参数中传入按钮的id号 btnSelect；
onclick：单击事件属性
function(){}: 匿名函数

var selector=document.getElementById(“txtSelector”).value;
(取出id为txtSelector的文本框的内容存入 selecor变量中)

$("*").removeClass(“highlight”);
(选择当前页面所有的元素，如果其元素有名为highlight的这个高亮CSS类，则将其移除。)

$(“XXX”):表示jquery的选择器方法 XXX为选择器的表达式

$(selector).addClass(“highlight”);
(在selector的值(如P标签) 所指向的标签增加名为highlight的CSS类，对所选的所有组件进行高亮显示。)

Web页面开发的两个要素：
在这里插入图片描述
jQuery选择器：

基本选择器：
案例：
层叠选择器：
如 ul 、 li标签
后代选择器：是选择父节点下的所有符合要求的子节点
子选择器：只选中父节点的符合要求的直接子节点
兄弟选择器：只会选择符合要求的平级节点

案例：选择li标签下的所有a标签进行高亮显示
在这里插入图片描述属性选择器：
案例:

位置选择器：
如selector:first：表示获取前面选择器所选择的第一个元素。
案例：
下图中有两个mycalss，选择.myclass:first 则只会选中第一个元素进行高亮显示。
表单选择器：
案例：
在这里插入图片描述操作元素属性：
案例:
下图展示的功能为：
如果attr()只有一个参数的话，a标签下href属性包含 163的所有超链接就会被选中，然后将其属性值以字符串的形式返回给变量href_attr,并在后台打印出来。如果选择器选中的是多个元素的时候，会默认只返回选中的第一个元素。

如果attr(）有两个参数的话，其功能则为设置功能。如下图73行代码，将选中的href属性里的数值改成了 http://www.163.com。

在这里插入图片描述操作元素CSS属性：
案例：
解说:
第71行代码：为将color属性改为red色。

第72行代码：为向CS中传入JSON对象，使得可以一次性可以设置多个属性和属性值。

第74行代码：为选中的元素动态添加新的CSS类，如果需要添加多个，只需在两个类名中间使用空格分开即可。

设置元素内容：
在这里插入图片描述案例：
text()和html()较为相似，如果需要给纯文本添加如< b >标签之类的HTML标签的话，可以使用html()。

jQuery事件处理方法：
在这里插入图片描述 click为事件的名称；function为事件所对应的处理代码。

jQuery常用事件：
在这里插入图片描述案例:
上图：将p标签下class的值为myclass的属性添加click鼠标点击事件，当鼠标点击被选择的标签时，标签背景颜色变成黄色。
假如我想判断用户名的非法字符输入，如判断输入了空格则将其变成红色。
如上图，我将接收到的event事件对象输出到控制台
在这里插入图片描述我在被选择的元素中输入了 abcd以及空格。可以看见Console控制台里已经输出了上图信息

在这里插入图片描述点开Event查看里面的信息，可以看出第一个输入的a，其keyCode编码为97。
而点击最后一个Event可以看到空格所对应的keyCode为32。
则在jQuery中，通过选择器判断keyCode是否为32来完成对空格符号进行变红色字体的处理操作了。

Ajax
在这里插入图片描述假如在网页上，每次接收信息或者给别人发送信息的时候，每次都要刷新整个页面，那么这样子用户体验将会很差。Ajax可以在不刷新的网页的情况下，与后台信息进行交互，从而实现与页面局部刷新的功能。

Ajax的使用流程：
在这里插入图片描述创建XMLHttpRequest对象：
不同的浏览器，创建该对象的代码都不一样，所以需要进行判断。?

index.html
在这里插入图片描述
ContentServlet.java
发送Ajax请求：
true为同步;flase为异步；

处理服务器响应：
在这里插入图片描述 readyState值：
如下图，如果如下图，xmlhttp.onreadystatechange表示Ajax在发送过程中各个状态发生变化的时候就会触发这个事件。

触发后进行判断，如果readyState== 4表示接收到了文本信息且status==200表示服务器响应成功，然后通过responseText获取响应的文本，再对当前页面进行处理。
在这里插入图片描述案例：
index.html
运行结果：
点击加载时，弹出框显示服务器返回的数据，然后再将收到的信息填充到下面的空DIV框里。

Ajax通过json实现前后台交互案例：

News.java

package com.imooc.ajax;

public class News {
	private String title;
	private String date;
	private String source;
	private String content;
	
	public News() {
		
	}
	
	public News(String title, String date, String source, String content) {
		super();
		this.title = title;
		this.date = date;
		this.source = source;
		this.content = content;
	}
	
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getDate() {
		return date;
	}
	public void setDate(String date) {
		this.date = date;
	}
	public String getSource() {
		return source;
	}
	public void setSource(String source) {
		this.source = source;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	
}

NewsListServlet.java

package com.imooc.ajax;

import java.io.IOException;
import java.util.ArrayList;
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;

/**
 * Servlet implementation class NewsListServlet
 */
@WebServlet("/news_list")
public class NewsListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public NewsListServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String type = request.getParameter("t");
		List list = new ArrayList();
		if(type == null || type.equals("tiobe")) {
			list.add(new News("TIOBE:2018年5月份全球编程语言排行榜" , "2018-5-1" , "TIOBE" , "..."));
			list.add(new News("TIOBE:2018年6月份全球编程语言排行榜" , "2018-6-1" , "TIOBE" , "..."));
			list.add(new News("TIOBE:2018年7月份全球编程语言排行榜" , "2018-7-1" , "TIOBE" , "..."));
			list.add(new News("TIOBE:2018年8月份全球编程语言排行榜" , "2018-8-1" , "TIOBE" , "..."));
			
		}
		//把list转为json格式字符串
		String json = JSON.toJSONString(list);
		System.out.println(json);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	}

}

news.html
在这里插入图片描述运行结果：
关于同步和异步：
如下第一幅图为同步执行，同步则是指如xmlhttp.send在网络发送的过程中，代码处于阻塞状态，只有得到了返回的数据才会继续执行下面的代码。

如下第二幅图为异步执行，异步则代表在网络发送过程中，不进行代码的阻塞，继续往下执行。异步采用的数据处理机制则是通过onreadystatechange进行状态监控，通过判断有数据返回时才进行处理。
在这里插入图片描述

在这里插入图片描述 jQuery对Ajax的支持：
案例：
NewsListServlet.java

package com.imooc.ajax;

import java.io.IOException;
import java.util.ArrayList;
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;

/**
 * Servlet implementation class NewsListServlet
 */
@WebServlet("/news_list")
public class NewsListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public NewsListServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		/*try {
			Thread.sleep(5000);
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}*/
		String type = request.getParameter("t");
		List list = new ArrayList();
		if(type != null && type.equals("pypl")) {
			list.add(new News("PYPL:2018年5月份全球编程语言排行榜" , "2018-5-1" , "PYPL" , "..."));
			list.add(new News("PYPL:2018年6月份全球编程语言排行榜" , "2018-6-1" , "PYPL" , "..."));
			list.add(new News("PYPL:2018年7月份全球编程语言排行榜" , "2018-7-1" , "PYPL" , "..."));
			list.add(new News("PYPL:2018年8月份全球编程语言排行榜" , "2018-8-1" , "PYPL" , "..."));
			
		}else if(type == null || type.equals("tiobe")) {
			list.add(new News("TIOBE:2018年5月份全球编程语言排行榜" , "2018-5-1" , "TIOBE" , "..."));
			list.add(new News("TIOBE:2018年6月份全球编程语言排行榜" , "2018-6-1" , "TIOBE" , "..."));
			list.add(new News("TIOBE:2018年7月份全球编程语言排行榜" , "2018-7-1" , "TIOBE" , "..."));
			list.add(new News("TIOBE:2018年8月份全球编程语言排行榜" , "2018-8-1" , "TIOBE" , "..."));
			
		}
		String json = JSON.toJSONString(list);
		System.out.println(json);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	}

}

jquery_news.html
在这里插入图片描述

运行结果：
在这里插入图片描述 Ajax函数的较为全面的案例示范：
通过Ajax实现二级联动菜单：

实现效果：
有待更新。。。

音殿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
imooc个人笔记 jQuery、Ajax、json交互、同步异步

jQuery：是目前前端非常著名的JS库，用于简化页面开发的过程。Ajax:是HTML中一种新的通讯方式，可以异步与服务器后台进行交互。JavaScript库：第三方厂商开发出来的一个一个JS的函数库，作用是简化JavaScript的开发。jQuery介绍：jQuery下载于安装：目录放置位置： jQuery选择器实验室：在选择文本框内输入标签,则页面中的所被选的标签进行高亮显示。...
复制链接

扫一扫