作者小头像 Lv.2
63 成长值

个人介绍

这个人很懒,什么都没有留下

感兴趣或擅长的领域

暂无数据
个人勋章
  • 活跃之星
成长雷达
30
33
0
0
0

个人资料

个人介绍

这个人很懒,什么都没有留下

感兴趣或擅长的领域

暂无数据

达成规则

发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32615 468 0
他的回复:
# ID: CShawn # AJAX第四章笔记 # jQuery中的AJAX ## jQuery简介 jQuery 是一个 JavaScript 库。 宗旨:write less, do more. "$"为jQuery的全局对象。 使用操作节点时,必须先加载jQuery。为了效率,一般将js引用放入页面底部。 ## Get和Post ### get方法 `$.get(url, data, callback, type)` - url是请求的接口地址 - data是请求的参数 - callback是请求成功时的回调函数 - type是请求返回数据的格式 除了url,其它三个参数如果没有可以省略 注意: - 请求参数的格式可以是json对象,也可以是字符串 - 返回的数据格式可以是:JSON、HTML、Script、XML、Text等 ``` $.get('/path', function() { console.log(xxx); }, 'script') ``` ### post方法 `$.post(url, data, callback, type)` 注意:post请求发出去的时候请求参数是放在请求体中 ## ajax方法 `$.ajax(option)` option是JSON格式的配置参数,用于设置ajax请求 ### option的常用配置 - url:发送请求的地址 - type:请求方式 (get or post 等) - data:请求参数 - dataType:返回的数据类型 (json、html、xml 等) - success:请求成功后的回调函数 - error:请求失败后的回调函数 - complete:请求完成后的回调函数 (不论成功与否都会执行) 布尔类型的配置 - async:是否为异步请求 - cache:是否进行缓存 (主要针对get请求) 容易被忽视的配置项 - timeout:请求超时时间 (毫秒) ``` $.ajax({ url: '/path', dataType: 'script', success: function() { console.log(xxx) } }) ```
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32615 468 0
他的回复:
# ID: CShawn # AJAX第四章笔记 # jQuery中的AJAX ## jQuery简介 jQuery 是一个 JavaScript 库。 宗旨:write less, do more. "$"为jQuery的全局对象。 使用操作节点时,必须先加载jQuery。为了效率,一般将js引用放入页面底部。 ## Get和Post ### get方法 `$.get(url, data, callback, type)` - url是请求的接口地址 - data是请求的参数 - callback是请求成功时的回调函数 - type是请求返回数据的格式 除了url,其它三个参数如果没有可以省略 注意: - 请求参数的格式可以是json对象,也可以是字符串 - 返回的数据格式可以是:JSON、HTML、Script、XML、Text等 ``` $.get('/path', function() { console.log(xxx); }, 'script') ``` ### post方法 `$.post(url, data, callback, type)` 注意:post请求发出去的时候请求参数是放在请求体中 ## ajax方法 `$.ajax(option)` option是JSON格式的配置参数,用于设置ajax请求 ### option的常用配置 - url:发送请求的地址 - type:请求方式 (get or post 等) - data:请求参数 - dataType:返回的数据类型 (json、html、xml 等) - success:请求成功后的回调函数 - error:请求失败后的回调函数 - complete:请求完成后的回调函数 (不论成功与否都会执行) 布尔类型的配置 - async:是否为异步请求 - cache:是否进行缓存 (主要针对get请求) 容易被忽视的配置项 - timeout:请求超时时间 (毫秒) ``` $.ajax({ url: '/path', dataType: 'script', success: function() { console.log(xxx) } }) ```
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32615 468 0
他的回复:
# ID:CShawn # AJAX笔记 ## AJAX AJAX: Asynchronous JavaScript And XML,异步的JavaScript和XML AJAX的优势 - 大幅提升用户体验 - 能够减轻服务器端的压力 - 异步加载 - 局部更新 - 前端通过AJAX技术从后端服务器中获取数据 ### 网络通信 |OSI模型|各层的解释|TCP/IP模型|备注| |:-:|:--|:-:|:-:| |应用层|为应用程序提供服务|应用层| | |表示层|数据格式转化、数据加密|应用层| | |会话层|建立、管理和维护|应用层| | |传输层|建立、管理和维护端到端的连接|传输层|TCP/UDP| |网络层|IP选址及路由选择|网际层|路由器| |数据链路层|提供介质访问和链路管理|网络接口层|交换机| |物理层|硬件层|网络接口层| | ### HTTP协议 http协议特点: - 无状态协议 - 不会建立持久连接 # Node.js RyanDahl使用JavaScript(单线程异步IO)开发,是一个基于ChromeV8引擎的JavaScript运行时。 安装后,会自动安装npm包管理器. - `node -v`查看node.js的版本 - `npm -v`查看npm版本 ## koa koa是Node.js的下一代Web框架 koa-generator是koa项目的生成器,即koa脚手架 安装:`npm install koa-generator -g`,-g表示global全局安装,无法安装时可使用`cnpm`从阿里的镜像服务器安装 ## 搭建Web服务器 # 揭秘AJAX ## 同步和异步 - 同步(sync):synchronous - 异步(async):asynchronous ## XMLHttpRequest(XHR) ### 方法 - open 初始化 - send 发送 - setRequestHeader Content-type ### 属性 - onreadystatechange - readyState - status - responseText ### XMLHttpRequest的使用 1. 创建XMLHttpRequest 2. 使用open方法,初始化请求参数 3. 使用send方法,发送请求 4. 使用onreadystatechange属性,接收返回数据 ## ajax的使用 发送ajax请求 1. open(method, url, async) 2. setRequestHeader("Content-type", "application/x-www-form-urlencoded") 3. send(param) 4. readyState: 4, status: 200 ``` var xhr = null; // 兼容浏览器 if (window.XMLHtttpRequest) { // 是否支持XHR xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { //IE5或6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open("get", "/xxx", true); // 请求方式,接口路径,是否为异步请求 xhr.send(param); // 传递参数 xhr.onreadystatechange = function(){ if(xhr.readyState === 4) { // 4 if(xhr.status == 200) { alert(xhr.responseText); } } } ``` ### XHR.readyState状态 - 0:请求未初始化,还没有调用 open()。 - 1:请求已经建立,但是还没有发送,还没有调用 send()。 - 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。 - 3:请求在处理中;通常响应中已有部分数据可用了,没有全部完成。 - 4:响应已完成;您可以获取并使用服务器的响应了。 ## 同源策略 浏览器的一种安全策略,防止不同域获取数据。同域需要保证:协议名 + 主机名 + 端口号相同。 例如: - https://www.huawei.com 与 http://www.huawei.com (跨域) - https://www.huawei.com 与 https://www.huaweicloud.com (跨域) - https://www.huawei.com 与 https://www.huawei.com:81 (跨域) ### 跨域请求 - 跨域的方法:JSONP, Proxy, iframe, CORS - 天然可以跨域的标签:script(img, link)
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32615 468 0
他的回复:
# ID: CShawn # 第六章笔记 ## 内置对象 JS对象:自定义对象、内置对象、浏览器对象。 内置对象是指JS自带的一些对象,提供了一些常用的或是最基本而必要的功能(属性和方法)。 ### Math对象 ``` Math.max(); // -Infinity Math.max(3, 'abc'); // NaN Math.abs(-1); // 1 Math.abs('-1'); // 1,隐式转换 Math.abs('abc'); // NaN Math.floor(1.9); // 1 Math.ceil(1.1); // 2 Math.round(1.4); // 1 Math.round(1.5); // 2 Math.round(-1.1); // -1 Math.round(-1.5); // -1,5较大,向上取整,为-1 Math.random(); // 此方法无参数,返回[0, 1)之间的随机值 // 自定义带参数的随机整数方法,返回[min, max]之间的随机整数 function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // 自定义带参数的随机整数方法,返回[min, max)之间的随机整数 function getRandom(min, max) { return Math.floor(Math.random() * (max - min)) + min; } ``` ### Data对象 ``` var date = new Date(); var date = new Date(2020, 10, 1); // 此构造方法,month从0开始,故此时为11月 var date = new Date(''2019-8-3 3:18:00'); date.getFullYear(); date.getMonth(); // month从0开始 date.getDate(); // 日期 date.getDay(); // 星期,起始周日为0 date.getHours(); // 24小时制 date.getMinutes(); date.getSeconds(); // 格式化时间 function getTime() { var time = new Date(); function getFormatted(num) { return num 10 ? '0' + num : num; } return time.getFullYear() + '-' + getFormatted(time.getMonth() + 1) + '-' + getFormatted(time.getDate()) + ' ' + getFormatted(time.getHours()) + ':' + getFormatted(time.getMinutes()) + ':' + getFormatted(time.getSeconds()); } //毫秒数获取方法: date.valueOf(); date.getTime(); var date2 = +new Date(); console.log(date2); // H5新增的 Date.now(); ``` 倒计时: ``` function countDown(date) { var diff = (new Date().getTime() - nowTime) / 1000; var days = parseInt(diff / 60 / 60 / 24); var hours = parseInt(diff / 60 / 60 % 24); var minutes = parseInt(diff / 60 % 60); var seconds = parseInt(diff % 60); return days + '天' + hours + '时' + minutes + '分' + seconds + '秒'; } ``` ### 数组 构造数组 ``` var array = new Array(); new Array(2); // 长度为2,值为undefined new Array(3, 4); // 长度为2, 值为3,4 ``` 判断是否为数组 ``` array instanceof Array Array.isArray(array); // H5新增, ie9以上支持 ``` 操作数组元素 ``` arr.push(4); // 向数组尾部添加元素4,返回数组长度 arr.push(4, 'abc'); // 向数组尾部添加4和'abc'两个元素,返回数组长度 arr.pop(); // 删除数组尾部的一个元素,返回被删除的元素 arr.shift(); // 删除数组头部的一个元素,返回被删除的元素 arr.unshift(4); // 在数组头部添加新元素,返回数组长度 ``` 筛选数组 ``` function filter() { var newArr = []; for (var i = 0; i arr.length; i++) { if(condition) { // newArr[newArr.length] = arr[i]; newArr.push(arr[i]); } } return newArr; } ``` 翻转数组: `arr.reverse();` 数组排序: ``` arr.sort(); // 按照字符串比较来排序,如:1,14,5,56 arr.sort(function(e1, e2) { return e1 - e2; // 升序 }); ``` 返回数组元素的索引 ``` arr.indexOf('a'); // 返回第一个元素的索引,不存在返回-1 arr.lastIndexOf('a'); // 返回最后一个元素的索引,不存在返回-1 ``` 数组转为字符串 ``` var arr = [1, 2, 3]; arr.toString(); // 1, 2, 3 arr.join(); // 1, 2, 3 arr.join('-'); // 1-2-3 ``` 数组拼接截取 ``` concat(); // 连接多个数组,返回一个新数组 slice(begin, end); // 从begin截取到end,返回被截取的新数组 splice(begin, count); // 从begin开始截取count个,返回被截取的原数组 ``` ### 字符串对象 #### 基本包装类型 为方便操作基本数据类型,JS提供了三个特殊的引用类型:String, Number, Boolean. 把简单数据类型包装成复杂数据类型,因而基本数据类型具有了一定属性和方法. ``` var str = 'abc'; console.log(str.length); // lengh属性为String包装类型的属性,过程如下: // 1. 生成临时变量,把简单类型包装为复杂数据类型 var temp = new String('abc'); // 2. 赋值给声明的字符变量 str = temp; // 3. 销毁临时变量 temp = null; ``` 字符串出现位置 ``` str.indexOf('a', index); // 从索引为index开始查找,返回第一个字符的索引,不存在返回-1 arr.lastIndexOf('a', index); // 从索引为index开始查找,返回最后一个字符的索引,不存在返回-1 ``` 根据位置返回字符: ``` str.charAt(index); str[index]; // H5新增,ie8+支持 ``` 根据位置返回字符的ASCII码: `str.charCodeAt(index);` 统计字符串中出现次数最多的字符 ``` var str = 'cabcdbacb'; var o = {}; for (var i = 0; i str.length; i++) { var ch = str.charAt(i); if (o[ch]) { o[ch] ++; } else { o[ch] = 1; } } var max = 0; var ch = ''; for (var k in o) { if (o[k] > max) { max = o[k]; ch = k; } } console.log('最多的字符是:' + ch + '出现' + max + '次'); ``` 拼接与截取 ``` str.concat(str1, str2, str3...); str.substr(index, count); substring(start, end); slice(start, end); ``` 字符串替换 ``` str.replace('a', 'b'); // 只替换第一个匹配的字符 // 全部替换 function replaceAll(str, oldStr, newStr) { while (str.indexOf(oldStr) !== -1) { str = str.replace(oleStr, newStr); } return str; } ``` 字符串转换为数组 ``` var str = 'a,b,c'; str.split(','); // 按逗号分割字符串 ``` 转换大小写 ``` str.toUpperCase(); str.toLowerCase(); ``` ### 简单类型与复杂类型 简单数据类型又叫基本数据类型、值类型 在存储时变量中存储的是值本身,string, number, boolean, undefined, null 复杂数据类型又叫引用类型,存储时变量中存储的是地址(引用),通过`new`关键字创建的对象(系统对象、自定义对象),如Object, Array, Date - 栈:由操作系统自动分配释放存放函数的参数值,局部变量的值等。其操作方式类似于数据结构中的栈。简单数据类型存放在栈中。 - 堆:一般由用户分配释放,若不释放则由垃圾回收机制回收。复杂数据类型存放在堆中。