首页  思维导图  详情

JavaScript基础（第二周）

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





AI智能生成

为你推荐

查看更多



JavaScript基础

作者其他创作

大纲/内容

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

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

XMLHttpRequest 对象

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：xmlhttp.open(\"GET\

向服务器发送请求

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

服务器响应

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

onreadystatechange 事件

<!DOCTYPE html><html><head lang=\"en\"> <meta charset=\"UTF-8\"> <title>ajax</title></head><body><button onclick=\"loadData()\

参考代码

服务端接口

AJAX

•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文件

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

把 JSON 文本转换为 JavaScript 对象

JSON

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

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

数组的创建方式

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

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

//例子：求最值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 ) ; //输出最大值

数组和循环结合

数组（Array）

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

数学（Math）

字符串（String）

时间（Date）

正则（RegExp）

常见对象

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

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

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

函数的定义和调用

函数（function）

定义和用法

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

url

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

type

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

async

类型：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\": 返回纯文本字符串

dataType

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

success

<!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()\

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

jQuery

JavaScript基础（第二周）