首页  思维导图  详情

JavaScript基础（第二周）

2021-11-28 22:42:29   0  举报





AI智能生成

JavaScript基础

js基础总结

作者其他创作

大纲/内容

AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 XMLHttpRequest 对象用于和服务器交换数据。

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法： xmlhttp.open("GET","test1.txt",true); xmlhttp.send(); 方法与描述 open(method,url,async)  规定请求的类型、URL 以及是否异步处理请求。 • method：请求的类型；GET 或 POST • url：文件在服务器上的位置 • async：true（异步）或 false（同步） send(string)  将请求发送到服务器。 • string：仅用于 POST 请求

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。 属性 描述 responseText 获得字符串形式的响应数据。 responseXML 获得 XML 形式的响应数据。

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性： 属性与描述 onreadystatechange ： 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 readyState ： • 0: 请求未初始化 • 1: 服务器连接已建立 • 2: 请求已接收 • 3: 请求处理中 • 4: 请求已完成，且响应已就绪 status ： 200: "OK" 404: 未找到页面 在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。 当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

参考代码

<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>ajax</title> </head> <body> <button onclick="loadData()">load ajax</button> <script>     function loadData(){         //要通过ajax拿到数据,从网络上的某个接口来.         //1 .创建一个核心对象 XMLHttpRequest         let xhr = new XMLHttpRequest();         //2. 先open,设置请求方法,get ; url地址:远端接口请求; async是否异步         xhr.open("GET","https://api.apiopen.top/getSingleJoke?sid=28654780",true);         //再send         xhr.send();         //事件写来         xhr.onreadystatechange = function(){             //4 请求已完成，且响应已就绪             //200: "OK"             if(xhr.readyState == 4 && xhr.status == 200){                 //拿到服务器响应的数据                 let result = xhr.responseText;                 console.log(result);             }         }     } </script> </body> </html>

服务端接口

1. 服务端接口提供一个请求地址,暴露出来给我们的客户端访问: ajax 2.在客户端使用ajax技术来发送请求给服务器. 注意:不是所有的接口都可以通过ajax直接调用的，有些接口有特定方法，例如baiduAI的java代码来调用.

1. 别人写好的，放在网络上公开出来的 https://gitee.com/safflower_club/free_api_interface 2.可以自己写的.掌握后端接口的编码的技术: node,java,PHP,等等

JSON

什么是JSON

•JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）  •JSON 是轻量级的文本数据交换格式  •JSON 独立于语言 *  •JSON 具有自我描述性，更易理解 * JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。 JSON 解析器和 JSON 库支持许多不同的编程语言。

JSON语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。 • 数据在名称/值对中 • 数据由逗号分隔 • 花括号保存对象 • 方括号保存数组 https://www.bejson.com/

JSON值

JSON 值可以是： • 数字（整数或浮点数） • 字符串（在双引号中） • 逻辑值（true 或 false） • 数组（在方括号中） • 对象（在花括号中） • null

JSON文件

• JSON 文件的文件类型是 ".json" • JSON 文本的 MIME 类型是 "application/json"

把 JSON 文本转换为 JavaScript 对象

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest）， 将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。 为了更简单地为您讲解，我们使用字符串作为输入进行演示（而不是文件）。 可以使用eval: 可以使用 ： JSON.parse将字符串文本转化为js对象.

常见对象

数组（Array）

数组的创建方式

//1、最简洁的方式，直接赋值 let arr = [1,2,3,4,5,6]； //arr为数组名

//2、不指定长度和内容 let arr = new Array()

//3、指定长度 let arr = new Array(size)

//4、指定元素数量，同时长度也就确定了 let arr = new Array(element0,element1,.....,elemenntn);

concat() 连接两个或更多的数组，并返回结果是一个数组要接受.。 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 pop() 删除并返回数组的最后一个元素 push() 向数组的末尾添加一个或更多元素，并返回新的长度。 reverse() 颠倒数组中元素的顺序。 sort() 对数组的元素进行排序

sort() 方法用于对数组的元素进行排序。 语法 arrayObject.sort(sortby)       参数                 描述 sortby 可选。规定排序顺序。必须是函数。 返回值 对数组的引用。请注意，数组在原数组上进行排序，不生成副本。 说明 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序， 说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应 把数组的元素都转换成字符串（如有必要），以便进行比较。如果想按照 其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返 回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数  a 和 b，其返回值如下： • 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。 • 若 a 等于 b，则返回 0。 • 若 a 大于 b，则返回一个大于 0 的值。

//大小顺序是乱的    let array01 = [1,0,99,8,12];     //调用排序方法->不是想我们想的那样对数字进行排序     //array01.sort();     //console.log(array01);     //排序需要指定一个按照规则排序的函数     function sortby(a,b){       //return a-b; ->最终的排序结果就是 从小到大         return b-a; //最终的排序结果就是 从大到小     }     array01.sort(sortby);     console.log(array01);

数组和循环结合

//例子：求最值 let arr = new Array(5);  //创建一个长度为5的数组 for(let i = 0; i<arr.length; i++){     arr[ i ] = Math.floor(Math.random()*100)  //表示这5个数是100以内的随机整数 } //假设数组的第一个元素最大 let max = arr[ 0 ]; //用max和其余的每个元素都比较一下 for(let i = 0;i<arr.length ; i++){     //用max比较其余     if(max<arr[ i ]){  //总是取得最大的值         max=arr[ i ] ;     } } console.log( max ) ;  //输出最大值

数学（Math）

Math 对象用于执行数学任务。 使用 Math 的属性和方法的语法： var pi_value=Math.PI; var sqrt_value=Math.sqrt(15); 注释：Math 对象并不像 Date 和 String 那样是对象的类， 因此没有构造函数 Math()，像 Math.sin() 这样的函数只 是函数，不是某个对象的方法。您无需创建它， 通过把 Math 作为对象使用就可以调用其所有属性和方法。

ceil(x) 对数进行上舍入。   floor(x) 对数进行下舍入。   max(x,y) 返回 x 和 y 中的最高值。   min(x,y) 返回 x 和 y 中的最低值。   pow(x,y) 返回 x 的 y 次幂。   random() 返回 0 ~ 1 之间的随机数。   round(x) 把数四舍五入为最接近的整数。   sqrt(x) 返回数的平方根。

字符串（String）

时间（Date）

正则（RegExp）

函数（function）

//1 函数是一段代码,完成特定某个功能的块.可以被多次调用 //2 语法结构: function 固定的 //  函数名-> 自定义,动词，功能相关的 getmax,getsum,findById,sort //() 固定，当然括号可以为空，可以写 -> "参数" ->函数执行的过程中，需要依赖外部数据，这些数据通过参数传递进来. //函数执行的前提条件. //定义函数 -》求两个数字中的最大值  参数前不要加 let var -》还不能确定参数的值，我们将这种定义函数参数 成为形式参数 ，简称形参

函数的定义和调用

//无参数，无返回值 function fun01(){     console.log("fun01") } //1、直接在js中调用    2、事件调用

//无参数，有返回值，必须要接受并处理 function fun02(){     return "string"; } //1、直接在js中调用    2、事件调用

//实现特定功能: 计算两个数字的和  function getsum(a,b){  //有两个参数，分别为a和b，用逗号隔开      //在函数内部，将a和b当成已知条件      let sum  = a+b;       console.log("sum :"+sum);  }   //1、直接在js中调用    2、事件调用

function getsum2(a,b){  //有两个参数，分别为a和b，用逗号隔开     //在函数内部，将a和b当成已知条件     let sum  = a+b;     //return 后面的内容就是返回值     return sum; } //1、直接在js中调用    2、事件调用

有返回值.必须要接收并处理. 用的是最多的. //return 后面的内容就是返回值 //1. 函数中只能return 一次 //2. 如果有多次return的代码 也只是去执行第一个而已 //3.其实 return 的功能是结束当前的函数

jQuery

定义和用法

ajax() 方法通过 HTTP 请求加载远程数据。 该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。 大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。 最简单的情况下，$.ajax() 可以不带任何参数直接使用。 注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

语法 jQuery.ajax ( [settings] ) 可选。用于配置 Ajax 请求的键值对集合。 可以通过 $.ajaxSetup() 设置任何选项的默认值

url

类型：String 默认值: 当前页地址。发送请求的地址。

type

类型：String 默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。 注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

async

类型：Boolean 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。 注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

dataType

类型：String 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:  • "xml": 返回 XML 文档，可用 jQuery 处理。 • "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。 • "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载） • "json": 返回 JSON 数据 。 • "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 • "text": 返回纯文本字符串

success

类型：Function 请求成功后的回调函数。 参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。 这是一个 Ajax 事件。

参考代码

<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>          <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> </head> <body> <button onclick="funajax()">ajax</button>  <script>     function funajax(){     $.ajax({         //Ajax 请求的键值对集合         url: "https://api.apiopen.top/getTencentNews",         type: "GET",         async: true,         dataType: "json",         success: function(res){             //res 从服务器返回的数据             console.log(res);             let array = res.data;             for(let i=0;i<array.length; i++){                 console.log(array[i].title);                 console.log(array[i].intro);                 console.log("**********************");             }         }     })     } </script> </body> </html>