JavaScript 学习笔记（第五天）

已于 2023-07-08 17:04:25 修改
阅读量206 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript 正则表达式 java
于 2023-01-21 22:45:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74155781/article/details/128741949
版权

JavaScript笔记

一、正则表达式

1.1、创建字符表达式

字面量的方式

var reg = /abc/
  • 此时可以检测一个字符串是否有一串紧密连接在一起的abc

内置构造函数

var reg = new RegExp ("abc")
  • 与上面效果相同

字面量有text()的方法，用于检测文字中是否含有输入的字面量

1.2、元字符-基本元字符

  1. \d代表着一位数字，即输入0~9之间的一位或以上的数字，写N个\d即为N个以上
  2. \D代表着一个非数字，即包含一个或以上，\Dk\D这种为中间必须有k而且是非数字
  3. \s代表着一位空白（空格 缩进 换行）有几个\s即为有几个空白
  4. \S代表着有一位非空白内容，有几个\S即为有几个非空白
  5. \n换行符
  6. \w包含字母，数字，下划线，有几个\w即为有几个字母，数字，下划线
  7. \W包含非（字母，数字，下划线），有几个\W即为有几个非（字母，数字，下划线）
  8. .任意内容（不包含换行）
  9. \转义字符，可将上述基本元素转换成普通字符

1.3、元字符-边界符

  • ^开头边界符
    • 放在\d前面即^\d，表示开头第一个字符必须是数字
  • $结尾边界符
    • 放在\d后米即\d$，表示结尾最后一个字符必须是数字
  • /^开头结尾$/
var reg = /^abc$/
  • 表示开头结尾必须是abc

1.4、元字符-限定符号

  • * 0~多次
    • 加在字符后面
  • + 1~多次
    • 加在字符后面，用exec方法可以截取出来数字的位置与长度
  • ？0~1
    • 存在0个或者1个
  • {n}指定次数
    • 加载字符之后，限定他出现的次数，只能限定紧挨着的
  • {n,}大于等于n次
    • 加载字符之后，限定他出现的次数，必须大于等于n
  • {n,m}大于等于n小于等于m
    • 加载字符之后，限定他出现的次数，必须大于等于n小于等于m

1.4、元字符-特殊符号

  1. ()整体
    • 将限定的字符包括起来
    • 例：
      • /(abc){2}/
    • 这个就是限定出现两次abc
  2. |或
    • 左右两边（整体）的都行
    • 例：
      • /a|b/
    • 有a或者有b都可以
  3. []代表一个
    • 中括号内中的字符有一个即符合
    • 有规律的可以用-来省略范围[a-z]表示从a到z，[0-9]表示从0到9，[a-zA-Z0-9_]就相当于\w
    • 例：
      • /[asdfgh]/
    • 输入的内容含有一位数与中括号内的相同，就是true
  4. [^]取反
    • 取不在这个括号范围内的数值，如果输入的值在这之中就算错误

1.5、正则表达式-捕获exec

  • 根据正则提取出一串字符串中的相关字符位置以及数量
  • 只能提取出遇到的第一个字符串
  • 捕获后返回的是一个数组

全局标识符g

  • 当一次行提取多个相同类型的变量时，可以通过在正则表达式后面加上g然后多次调用正则表达式来逐个提取出来
  • 给每个表达式加小括号后就会出现，先提取出所有大的组为数组的第0项，其次的后面的项是第0项依据正则表达式来得到的

标识符i

  • 忽略大小写
  • 例：/[a-z]/i
    • 没有i时代表着取得范围时a~z并且必须时小写，加上i之后大写也可以提取

1.6、正则表达式的两大特性

  1. 懒惰
  • 可以通过全局标识符g来解决
  1. 贪婪
  • 会将所要求提取的数据全部提取出来
  • 例：/\d{1,4}/
    • 当输入的值大于或等于四时，会提取出四个数值
  1. 非贪婪
  • 在正则表达式后加一个?
  • 例：/\d{1,4}?/
    • 只会会提取出来一个
  • ?对于限定范围内有效

1.7、正则与字符串方法

  1. replace
    • 替换字符串中的某个值
    • var newstr = str.replace(/a/g,"*")
      • 如果没有//g则只能提取出第一个a
  2. search
    • 查找字符串的位置
    • 只能查看第一个想要查看字符的位置
  3. match
    • 捕获内容
    • 当有重复的字符的字符串中，直接通过match与正则表达式，可以直接提取并且使其成为一个数组

1.8、案例-密码强度验证

var oinput= document.querySelector("input")
var ospan= document.querySelector("span")

var reg1 = /\d/
var reg2 = /[a-z]/
var reg3 = /[!@#$%^&*()]/

oinput.oninput  =function(){
	this.value
	var level =0
	
	if (reg1.test(this.value)) level++
	if (reg2.test(this.value)) level++
	if (reg3.test(this.value)) level++

	for(var i=0;i<=ospan.lenght;i++;){
		ospan[i].classList.remove("active")
		if(i<level){
			ospan[i].classList.add("active")
		}	
	}
}

二、this

2.1、this指向

  • 是JavaScript中的一个关键字
  • 谁调用this，this就指向谁（ES6 箭头函数）
  • 直接查看this，它是指向全局
  • 例子：
var obj = {
	name : "asdf"
	test : function(){
		console.log("111",this.name)
		}
	}
	obj.test()
//此时控制台出现的就是"111，asdf"

2.2、改变this指向

  1. call
    • 可以改变call()指向括号内部的值
    • 可以传n个参数
    • 执行函数，并改变this执行为函数的第一个参数
  2. apply
    • 执行函数，并改变this执行为函数的第一个参数
    • 支持两个参数，第二个参数是数组
  3. bind
    • 改变this执行为函数的第一个参数，不会自动执行函数

三、ES6

3.1、ES6介绍

  • 我们所说的ES5和ES6其实就是在js语法的发展过程中的一个版本而已
  • ECMAScript就是js的语法
    • 以前的版本没有某些功能
    • 在ES5这个版本的时候增加了一些功能
    • 在ES6这个版本的时候增加了一些功能
  • 因为浏览器是浏览器厂商生产的
    • ECMAScript 发布了新的功能以后，浏览器厂商需要让自己的浏览器支持这些功能
    • 这个过程是需要时间的
    • 所以到现在，基本上大部分浏览器都可以比较完善的支持了
    • 只不过有些浏览器还是不能全部支持
    • 这就出现了兼容性问题
    • 所以我们写代码的时候就要考虑哪些方法是ES5或者ES6的，看看是不是浏览器都支持

3.2、ES6关键词

  1. let
    • 定义变量
    • 必须先定义在使用， 使用必须在定义之后
    • 一个变量名称只能定义一次
    • 定义的变量只在一个块级作用域（相当于在一个大括号内）
  2. const
    • 定义常量
    • 定义后不能变，并且使用comst必须赋值

3.3、案例-块级作用域

var oHeaderItems = document.querySelectorAll(".header li")
var oBoxItems = document.querySelectorAl1( ".box li")
	for(let i=0; i<oHeaderItems.length; i++){
		oHeaderItems[i].dataset.index = i	
		oHeaderItems[i].onclick = function(){
		}
	}
  • 选项卡案例改编，let定义后可以使当前的值得以保留所以每次点击都是当前的值，而不是循环后的值

3.4、ES6的箭头函数

  • 相当于将function(){}改变成了()=>{}

特点

  1. 可以省略括号（只能是只有一个形参时可以省略）
  2. 可以省略{}（只有返回值时可以省略return，只有一句代码时）
  3. 当返回一句语句，并且是对象时，需要在大括号外面加一个括号
  4. 没有arguments（arguments是相当于没有形参时，但传入了参数，此时可以以数组的方式查看参数）
  5. 箭头函数没有this，箭头函数中的this会指向父级作用域

默认参数
在函数的形参区域先给参数定义一个值

3.5、ES6的解构赋值

  • 快速的从对象和数组中获取里面的成员
  • 例：
var arr = ["asd","132","12sd"]

let [x,y,z]

console.log(x,y,z)
  • 交换：
var a = 10
var b = 20
var [b,a] = [a,b]
  • 多维数组取值：
var arr = [1,2,[3,4,[5]]]

//想获取5，需要arr[2][2][0]
var [a,b,[c,d,[e]]] = arr

//直接取e即可

对象

  • 赋值对象(对号入座)
var obj = {
	name = "zhangsan"
	age = 100
	location:"henaN"
}

let {name , age, location:mylocation} = obj

3.6、ES6的对象简写

对象结构中，key与后面的变量相同时，可以不写变量的名称

mybtn.onclick = function(){
	let usesrname = myusername.value
	let password = password.value

	var obj = {
		username,
		password
	}
}

3.7、ES6展开运算符

  • ...展开运算符

  • 展开数组

    • 可以展开数组
    var a = [1,2,3]
var b = [2,3,4,5]
var c = [...a...b]
//此时c数组等与a与b数组合并
    • 可以复制数组
    arr a = [1,2,3]
var b = [...a]
    • 参数-实参-形参
    var test = (...arr)=>{
	console.log(arr)
}
test(1,2,3,4,5)
    • 提取数组最大值
    var arr = [1,2,3,4,5]

var res = Math.max(...arr)
    • 伪数组转换
    function test(){
	var arr  = [...arguments]
}
test(1,2,3,4,5)

  • 展开对象

    • 合并对象
    var obj1 = {
	name:"zhangsan"
	age:100
}
var obj1 = {
	name:"zhangsan"
	age:100
}

var obj = {
...obj1,
...obj2
}
//出现相同的key时下面的会覆盖掉上面的

3.8、ES6模块化语法

  1. 私密不漏

    • 为了防止不想被看见的函数被使用，在js文件中将想被表达的函数放在export{}中，以对象的方式
    • 然后在原文件里的script里的type中添加module，紧接着用import{}from './module/XXX'的 { }中加入export{}中的方法

  2. 重名不怕

    • 与上面的方法相同，如果出现了相同的函数，则会报错

  3. 依赖不乱

    • 在哪里用函数就在哪里导入函数，可以避免未定义而提前用

四、面向对象

4.1、初始面向对象

  1. 首先，我们要明确，面向对象不是语法，是一个思想，是一种 编程模式
  2. 面向: 面 (脸) ，向 (朝着)
  3. 面向过程: 脸朝着过程 =》关注着过程的编程模式
  4. 面向对象:脸朝着对象=》关注着对象的编程模式实现一个效果
  5. 实现一个效果
    • 在面向过程的时候，我们要关注每一个元素，每一个元素之间的关系，顺序，。。。
    • 在面向过程的时候，我们关注的就是找到一个对象来帮我做这个事情，我等待结果
  6. 我们以前的编程思想是，每一个功能，都按照需求一步一步的逐步完成

4.2、创建对象函数的方式

  1. 工厂函数：
 function createObject(name){
            var obj = {}
            obj.name = name
            //if(name==XXX){执行XXX}
            onj.matical = []
            return obj
        }
        var obj1 = createObject('shaokao')
  1. 自定义函数
            function createObject(name){
                this.name = name
                this.martical = []
                this.coke = function(){
                     
                }
            }

            var obj2=new createObject("第三次")

4.2.1、构造函数的注意事项

  1. 首字母大写

    • 例：
    • function CreateObject(){}

  2. 构造函数中不写return

  3. 构造函数可以当成不同函数用，不过里面加了this会指向window

  4. this指向

            function createObject(name){
                this.name = name
                this.martical = []
                this.coke = function(){
                     
                }
            }
            new CreateObj()//new过程 == 实例化这个过程，实例化后，，this指向实例化对象

4.3、面向对象原型

概念：

  • 在典型的 OOP 的语言中（如 Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6之前， JS 中并没用引入类的概念。
  • ES6， 全称 ECMAScript 6.0 ，2015.06 发版。但是目前浏览器的 JavaScript 是 ES5版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
  • 在 ES6之前 ，对象不是基于类创建的，而是用一种称为构造函数的特殊函数来定义对象和它们的特征。

对象原型__proto__

  • 对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。
  • __proto__对象原型和原型对象prototype是等价的。
  • __proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype

4.4、面向对象选项卡


<head>
	<style>
	*{
	margin:0;
	padding:0;
	}
	ul{
	list-style: none;
	}
	.header{
	dispLay: flex;
	width:500px;
	}
	.header li {
	flex:1;
	height: 50px;
	line-height: 50px;
	text-align: center;
	border:1px solid black;
	}
	.box {
	position: relative;
		height: 200px;
	}
	.box li {
	position: absolute;
	left:0;
	top:0;
	width: 500px;
	height: 200px;
	background-color:yellow;
	display:none;
	}
	.header .active{
	background-color: red;
	}
	.box .active{
	dispLay: block;
	}
	</style>
</head>
<body>
	<div class="container1">
		<ul class=" header">
		<li class="active">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	</div>
	<div class="container2">
	<ul class="box">
		<li class="active">111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
	</div>
<script>

		function Tabs(select,type){
			var container = document.querySelector(select)
			this.oHeaderItems = container.querySelectorAll(".heraer li")
			this.oBoxItems = document.querySelectorAl1( ".box li")
			this.type = type
			this.change()
}
	Tabs.prototype.change = function(){
	for(let i=0; i<oHeaderItems.length; i++){
		this.oHeaderItems[i].addEventListener(type,()=>{
		var index =i
		for(var m=0;m<oHeaderitems.length; m++){
			this.oHeaderItems[m].classList.remove("active")
			this.oBoxItems[m].classList.remove( "active")
		}
			this.oHeaderItems[index].classList.add( "active")
			this.oBoxItems [index].classList.add ( "active")
		})
	}
}

	new Tabs(".container1","click")
	new Tabs(".container2","mouserover")
</script>
</body>

4.5、class类

cLass createobj {
//构造器函数
constructor( name){
	this.name =name
	}
}

4.6、继承

  1. 构造函数继承
function Person(name,age){
		this.name = name
		this.age = age
	}
	Person.prototype.say = function(){
	console.log(this.name,this.age)
}
	function student(name,age,classroom){
		Person.call(this,name,age)
		this.classroom = classroom
	}
  1. 原型继承
	student.prototype = new Person()
  1. 组合继承
    构造函数继承+原型继承
function Person(name,age){
		this.name = name
		this.age = age
	}
	Person.prototype.say = function(){
	console.log(this.name,this.age)
}
	function student(name,age,classroom){
		Person.call(this,name,age)
		this.classroom = classroom
	}

	student.prototype = new Person()
        
    var obj1 = new student("lu",18,474)
        console.log(obj1)
        obj1.say()

4.8、继承案例

<div class="box1">
	<h1></h1>
	<ul></ul>
</div>
<div class="box2">
	<h1></h1>
	<img src="">
	<ul></ul>
</div>
<script>

var data1 = {
	title: "体育",
	list:["体育-1","体育-2","体育-3"]
}
var data2 = {
	title:"综艺",
	url:""
	list:["综艺-1","综艺-2","综艺3"]
}
function CreateList(select,data={}) {
	this.ele = document.queryselector(select)
	this.title = data.title,
	this.list = data.list
}
CreateList.prototype.render = function () {
//渲染页面
	var h1 = this.ele.querySelector("h1")
	var ul = this.ele.querySelector("ul")
	// console.log(h1,ul)
	h1.innerHTML = this.title
	ul.innerHTML = this.list.map(item => `<li>${item}</li>`).join("")
}
var obj1 = new CreateList( ".box1", data1)
obj1.render()

function CreateImgList(select,data){
	CreateList.call(this,select,data) 
	this.imgUrl = data.url
}

 CreateImgList.prototype = new CreateList()

CreateImgList.prototype.enhenceRender = function(){
	this.render()
	var img = this.ele.querySelector("img")
	img.src = this.imgUrl
}

var obj2 = new CreateImgList( ".box2" , data2)
obj2.enhenceRender()

<script>

4.9、ES6继承

  //父类
        class Person{
            constructor(name,age){
                this.name = name
                this.age = age
            }
            say(){
                console.log("hello")
            }
        }
		//子类
        //extends继承
        class Student extends Person{
            constructor(name,age,grade){
                super(name,age)
                 //super相当于Person.call(this,name,age).而且super必须写到constructor里面的第一行
                this.grad = grade
            }
            //直接可以改变Parson里面的方法使自己使用
            
            say(){
                super.say()//调用父元素的say()使其不会被覆盖
                document.write("bjsad")//修改say()方法，将其覆盖，若加上super就不会被覆盖
            }
        }

        var obj = new Student("asd",100,100)
        console.log(obj.grad)
        obj.say()

五、初识前后端交互

5.1、ajax

AJAX 的优势

  1. 不需要插件的支持，原生js 就可以使用
  2. 用户体验好(不需要刷新页面就可以更新数据)
  3. 减轻服务端和带宽的负担
  4. 缺点: 搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到

AJAX 的使用

  1. 在js 中有内置的构造函数来创建 ajax 对象
  2. 创建 ajax 对象以后，我们就使用 ajax 对象的方法去发送请求和接受响应

创建步骤：

  1. 创建XHR ==>new XMLHttpRequest()
  2. 配置open（请求方式，请求地址，是否同步）
  3. send发出
  4. 接受数据，创造一个事件

ajax状态码 200 ok 404 error

  • ajax 状态码-xhr.readyState
  • 是用来表示一个 ajax 请求的全部过程中的某一个状态
    • readyState === 0:表示未初始化完成，也就是open方法还没有执行
    • readyState ===1:表示配置信息已经完成，也就是执行完open 之后
    • readystate === 2 : 表示send 方法已经执行完成
    • readystate === 3 :表示正在解析响应内容
    • readystate === 4 :表示响应内容已经解析完毕，可以在客户端使用了
  • 这个时候我们就会发现，当一个 ax请求的全部过程中，只有当 readystate === 4 的时候，我们才可以正常使用服务端给我们的数据 所以，配合 http 状态码为 200 ~ 299
  • 一个ajax 对象中有一个成员叫做 xhr.status这个成员就是记录本次请求的 http
  • 状态码的两个条件都满足的时候，才是本次请求正常完成
  var xhr = new XMLHttpRequest()
      // ip：js%E5%AE%9E%E6%88%98%E7%BB%83%E4%B9%A0
        xhr.open("GET","http://127.0.0.1:5500/js%E5%AE%9E%E6%88%98%E7%BB%83%E4%B9%A0/01.text")
        xhr.send()

        //当后端与前端接上头后执行该函数
        xhr.onreadystatechange = function(){
            // console.log("edkw");

            if(xhr.readyState===4 &&xhr.status === 200){
                console.log("此时已经加载完毕");
            }else if(xhr.readyState === 4 &&xhr.status===404){
                console.log("没有找到这个对象");
            }
        }
        //两种区别为：onload判断一次，而onreadstatechange判断四次
         xhr.onload = function(){
              console.log(xhr.responseText)
           if(xhr.status==200){
               document.write(xhr.responseText)
            }else if(xhr.status===404){
                 console.error("没有找到这个页面")
                  location.href ="404.html
             }
         }

readyStateChange

  • 在ajax对象中有一个事件，叫做readystatechange事件
  • 这个事件是专门用来监听ajax对象的readystate值改变的的行为
  • 也就是说只要readystate的值发生变化了，那么就会触发该事件
  • 所以我们就在这个事件中来监听ajax的readystate是不是到4了
const xhr = new XMLHttpRequest(
xhr.open( 'get', './data.php ')

xhr.send()

xhr.onreadystatechange = function(){
	//每次readystate改变的时候都会触发该事件
	//我们就在这里判断readystate的值是不是到4
	//并且 http的状态码是不是200 ~ 299
	if (xhr.readystate === 4&&/^2\d{2|S$/.test(xhr.status)) {
	//这里表示验证通过
	//我们就可以获取服务端给我们响应的内容了}
	```
	}
}

5.2、案例：ajax

JavaScript部分

<ul id="malist"></ul>
    <button id="btn">lisy</button>
    <script>
        btn.onclick = function(){
            var xhr = new XMLHttpRequest()
            // ip：js%E5%AE%9E%E6%88%98%E7%BB%83%E4%B9%A0
                xhr.open("GET","http://127.0.0.1:5500/js%E5%AE%9E%E6%88%98%E7%BB%83%E4%B9%A0/data.json")
                xhr.send()

                //当后端与前端接上头后执行该函数
                xhr.onreadystatechange = function(){
                    // console.log("edkw");

                    if(xhr.readyState===4 && xhr.status === 200){
                        console.log("此时已经加载完毕");
                        var jsondata = JSON.parse(xhr.responseText)
                        rader(jsondata)
                    }else if(xhr.readyState === 4 && xhr.status===404){
                        console.log("没有找到这个对象");
                    }
                }
            function rader(jsondata){
                var html = jsondata.data.list.map(item=>`
                    <li>
                        <img src="${item.imageUrl}"/>
                        <div>${item.name}</div>    
                    </li>
                `)
                malist.innerHTML = html.join('')
            }
        }

json部分

{
    "data":{
        "list":[
            {
                "namne":"1111",
                "imageUrl":"https://ts1.cn.mm.bing.net/th?id=ORMS.7bf3e9347df69e68f66692e0f32f7bc9&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.25&p=0"
                
            },
            {
                "namne":"1111",
                "imageUrl":"https://ts1.cn.mm.bing.net/th?id=ORMS.7bf3e9347df69e68f66692e0f32f7bc9&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.25&p=0"
                
            },
            {
                "namne":"1111",
                "imageUrl":"https://ts1.cn.mm.bing.net/th?id=ORMS.7bf3e9347df69e68f66692e0f32f7bc9&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.25&p=0"
                
            }
        ]
    }
}

5.3、ajax同步异步

通过里面的第三个参数判断

xhr.open("GET","地址",true)

true 表示异步请求：表示会进行后面的函数，等返回值调回来的时候跟着回去
false表示同步请求：要等到返回的数据回来过后才会执行后面的代码，所以容易造成数据的堵塞

5.4、ajax的请求方式

get 偏向获取数据
post 偏向提交数据
put 偏向更新(全部)
delete偏向删除信息
patch 偏向部分修改

  1. get
const xhr = new XMLHttpRequest();
//设置响应体数据类型
xhr.responseType='json'
xhr.open('GET','http://127.0.0.1:8080/server-json /*?(传参位置，可以获取想得到的数据，如果不加就是全部取出 例：username=ximen)*/ ')
xhr.send()
xhr.onreadystatechange=function(){
    if(xhr.readyState===4){
        if(xhr.status >= 200 ){
         console.log(xhr.response);
         
          }
     }
}
  1. post
const xhr = new XMLHttpRequest();
//设置响应体数据类型
xhr.responseType='json'
xhr.open('POST','http://127.0.0.1:8080/server-json')
xhr.send()
xhr.onreadystatechange=function(){
   if(/^2d{2|$/.test(xhr.status){
        if(xhr.status >= 200 ){
         console.log(JSON.parse(xhr.responseText));
          }
     }
	//如果是POST形式的需要添加send在后面
	//支持 name=Kerwin&&age=100的方式
	//还支持{"name":"asd"}的方式
	xhr.setRequestHeader( "content-Type","application/-www-form-urlencoded")//name=kerwin&age=100
	xhr.send(`username=gangdaner&password=123`)
	
	xhr.setRequestHeader( "content-Type","application/json")//json字符串方式
	xhr.send ( JSON.stringify({
	username: "ximen",
	password: "789"}))
}
  1. put
xhr.responseType='json'
xhr.open('PUT','http://127.0.0.1:8080/server-json/1')
xhr.send()
xhr.onreadystatechange=function(){
   if(/^2d{2|$/.test(xhr.status){
        if(xhr.status >= 200 ){
         console.log(JSON.parse(xhr.responseText));
          }
     }
	xhr.setRequestHeader( "content-Type","application/-www-form-urlencoded")//name=kerwin&age=100
	xhr.send(`username=111111`)
	
	xhr.setRequestHeader( "content-Type","application/json")//json字符串方式
	xhr.send ( JSON.stringify({username: "111",)
}
  1. patch
const xhr = new XMLHttpRequest();
//设置响应体数据类型
xhr.responseType='json'
xhr.open('PATCH','http://127.0.0.1:8080/server-json/2')
xhr.send()
xhr.onreadystatechange=function(){
   if(/^2d{2|$/.test(xhr.status){
        if(xhr.status >= 200 ){
         console.log(JSON.parse(xhr.responseText));
          }
     }
	//支持 name=Kerwin&&age=100的方式
	//还支持{"name":"asd"}的方式
	xhr.setRequestHeader( "content-Type","application/-www-form-urlencoded")//name=kerwin&age=100
	xhr.send(`username=adasdasd`)
	
	xhr.setRequestHeader( "content-Type","application/json")//json字符串方式
	xhr.send ( JSON.stringify({username: "asdasda"}))
}
  1. delete
const xhr = new XMLHttpRequest();
//设置响应体数据类型
xhr.responseType='json'
xhr.open('DELETE','http://127.0.0.1:8080/server-json/1')
xhr.send()
xhr.onreadystatechange=function(){
   if(/^2d{2|$/.test(xhr.status){
        if(xhr.status >= 200 ){
         console.log(JSON.parse(xhr.responseText));
          }
     }
	send()
}

5.5、ajax封装

function queryStringify(obj){
	let str = ''
	for (let k in obj)str += `${k}=${obj[k]}&`	
	return str.slice(0,-1)
}
function ajax (options){
		let defaultoptions = {
        ur1:"http://1ocalhoscct:3000/users",
        method:"GET",
        async:true ,
        data:{
        username : "kerwin",
        password:"123"
        },
        headers:{},
        success:function(res){
            console.log(res)
        }
        error:function(err){
            console.log(err)
        }
    })

5.6、回调地狱问题

  • 当一个回调函数嵌套一个回调函数的时候·就会出现一个嵌套结构
  • 当嵌套的多了就会出现回调地狱的情况·比如我们发送三个ajax请求
  • 第一个正常发送
  • 第二个请求需要第一个请求的结果中的某一个值作为参数
  • 第三个请求需要第二个请求的结果中的某一个值作为参数

5.7、Promise封装ajax

<script>
封装 ajax
  function ajax(options) {
    let defaultoptions = {
      url: "",
      method: "GET",
      async: true,
      data: {},
      headers: {
        "content-type":"application/x-www-form-urlencoded"
      },
      success: function () { },
      error: function () { }
    }
    let { url, method, async, data, headers, success, error } = {
      ...defaultoptions,
      ...options
    }
    </script>

5.8、fetch

用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response对象。当遇到网络错误时，fetch() 返回的 promise 会被 reject，并传回 TypeError。成功的 fetch()检查不仅要包括 promise 被 resolve，还要包括 Response.ok 属性为 true。HTTP 404状态并不被认为是网络错误。

var username = "kerwin"
fetch(` http:// localhost:3000/users111?username=$ {username} `)
.then((res)=>{
console. log(res)
if(res.ok){
return res.json()
}else{
//拒绝
return Promise.reject(
}

cookie

<script>
       //cookie 本地存储
       // 存cookie

       savebtn.onclick = function(){
           //路径设置
        //    document.cookie = "username=xiaoming;path=/155-cookie/aaa"
            document.cookie = "age=18"
       
            //过期时间设置
            var date = new Date()
            date.setMinutes(date.getMinutes()+10)
            document.cookie = `username=kerwin;expires=${date.toUTCString()}`
        }

        getbtn.onclick = function(){
            console.log(getCookie("age"))
        }

        function getCookie(key){
            var str = document.cookie
            var arr = str.split("; ")
            // console.log(arr)
            var obj = {}
            for(var i=0;i<arr.length;i++){
                var subArr = arr[i].split("=")
                // console.log(subArr)
                obj[subArr[0]] = subArr[1]
            }

            // console.log(obj)
            return obj[key]
        }

        delbtn.onclick = function(){
            var date = new Date()
            date.setMinutes(date.getMinutes()-1)
            document.cookie = `username=111;expires=${date.toUTCString()}`
            document.cookie = `age=111;expires=${date.toUTCString()}`
        }
</script>

josnp
注：

  1. 后端接口形式必须**（），需要后端配合
  2. jsonp 缺点
    onload 删除sciprt标签
    只能get请求，不能post put delete
mybtn.onclick = function(){
var oscript = document.createElement( "script")
oscript.src="01.txt”//未来地址
document.body . appendchild(oscript)
}

5.9、闭包

函数内部返回一个函数，被外界所引用。
这个内部函数就不会被销毁回收。
内部函数所用到的外部函数的变量也不会被销毁

5.10、闭包案例

求索引值下标
法一：（闭包）

var oli = document.querySelectorAl1("li")
        for (var i = 0; i < oli.length; i++) {
            oli[i].onclick = (function (index) {
                return function () {
                    console.log(11111, index)
                }
            })(i) //匿名自执行函数
        }

法二：（ES6）

 var oli = document.querySelectorAl1("li")
        for(let i=0;i<oli.length;i++){
            oli[i].onclick =function(){
                console.log(i)
            }
        }
Smulll_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 学习笔记（十五）
10-29
标题《JavaScript 学习笔记（十五）》指出，本次学习的主题是关于事件在JavaScript编程中的理解和应用，这是深入学习Web前端开发的一个重要领域。文档对象模型（DOM）是处理HTML和XML文档的编程接口，JavaScript通过...
JavaScript 学习笔记（十一）
10-29
### JavaScript 学习笔记（十一）：深入理解 Document 对象 #### 一、Document 对象概述 在继续探讨 `document` 对象之前，我们先简要回顾一下 `document` 在 Web 开发中的重要性。`document` 对象代表当前加载在...
JavaScript学习笔记第五天
qq_43681850的博客
12-22 106
标签语句 语句是可以添加标签的，标签是由语句前的表示符和冒号组成。 一个Error对象有一个name属性表示错误类型，一个message属性用来存放传递给构造函数的字符串。 当抛出异常时，JavaScript解释器会立即停止当前正在执行的逻辑，并跳转至就近的异常处理程序。 ...
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1058
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript学习笔记第二天
冰蛙
09-15 246
本文简介：这是接上一篇JavaScript第一天笔记：记录了js中重点需要掌握的地方，对于前端工程师来说，描述的比较浅显。需要前端工程师以此为基础去做更多的拓展才行，对于后端工程师来说，文章上的熟练掌握就行了。 本文重点：DOM、BOM、location 一、事件对象（event） event.Target //获取当前事件的源头 event.clientX //获取当前事件发生的横向坐标...
Javascript入门学习笔记
weixin_61370021的博客
04-27 4636
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
Javascript学习笔记五
qwsadsdga的博客
12-03 421
JavaScript中函数的定义方式。
JavaScript学习笔记 01
m0_63882057的博客
06-18 948
在写牛客时对前端三件套（html，css，js）的知识点进行复习。在学vue或者做项目时对知识点进行补充。(在旧笔记基础上写的，导致有的知识点非常古早…有的又是最近的……)
JavaScript基础第一弹学习笔记
qq_55961367的博客
07-13 960
JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
《高性能JavaScript》学习笔记
Leon_Chenl的博客
05-21 1074
当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。一旦空闲，队列中的下一个任务就被重新提取出来并运行。并不是所有的DOM变化都会影响几何属性，例如改变一个元素的背景色不会影响它的宽和高，这种情况下只会发生一次重绘，因为元素的布局并没有改变。对象成员包括属性和方法，当一个被命名的成员引用了一个函数，该成员就被称为一个“方法”，相反，引用了非函数类型的成员就被称为“属性”。
JavaScript学习笔记——第二天
破风少年
01-31 463
JavaScript学习打卡JavaScript学习笔记---第二天JavaScript笔记 第二天一．DOM编程【重点】1. 概念 ---- document object model 文档对象模型2. DOM提供的API --- 获取标签的api3. Dom里的常见属性4. 处理下拉列表的常见属性5. 从网页中删除标签6. 向网页中添加标签二．BOM1. 概念 --- browser obj...
Ruffy javascript 学习笔记
12-02
在Ruffy的JavaScript学习笔记中，主要涉及了几个关键概念：原型模型、继承、CSS盒模型、图像处理、反射机制、HTML表格属性以及Base64编码。 1. **JavaScript的原型模型**：在JavaScript中，对象可以通过构造函数...
JavaScript课堂笔记 第三天
07-04
以上只是JavaScript学习第三天可能涉及的部分关键知识点，实际笔记中可能还会涵盖更多细节，如字符串方法、正则表达式、错误处理、模块化等内容。深入理解和掌握这些概念是成为熟练JavaScript开发者的基础。
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1442
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
Vue双向绑定
m0_56131422的博客
09-01 751
简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。Vue 的双向绑定主要通过v-model。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 473
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 446
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2592
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
JavaScript入门：第一天笔记与基本概念
在JavaScript Day_01的学习笔记中，我们深入探讨了JavaScript语言的基础知识和应用。JavaScript作为一门重要的开发语言，尤其在前端开发领域发挥着核心作用，它基于ECMAScript规范，允许在网页中实现动态交互。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值