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)
<script> console.log(Math.PI) // console.log(Math.ceil(12.1)) //上舍入 console.log(Math.floor(12.1)) //下舍入 for(let i=0;i<10;i++){ let r = Math.floor(Math.random()*10); //10以下的随机数 console.log(r) } let student = [\"丁炜鸿\
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> <!--1 百度cdn在线的jquery--> <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基础(第二周)
0 条评论
回复 删除
下一页