javascript进阶学习笔记(含AJAX)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

刚刚了解到js还可以在node.js的支持下运行在服务器端
真厉害啊 决定重新学一哈子
因为之前学过两次了,所以现在主要记录一下这两天看不懂的语法,加深一下印象

一、JS变量(var、let和const)

JavaScript let 和 const

二、for/in循环

在这里插入图片描述

三、正则表达式

语法:

/正则表达式主体/修饰符(可选)

正则表达式修饰符:

i	执行对大小写不敏感的匹配。
g	执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m	执行多行匹配。

正则表达式模式

①方括号用于查找某个范围内的字符:

[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找任何以 | 分隔的选项。

②元字符是拥有特殊含义的字符:

\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

③量词:

n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

字符串方法:

search() 方法:用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
replace() 方法:用于在字符串中用一些字符串替换另一些字符串,或替换一个与正则表达式匹配的子串。

正则表达式方法:

test() 方法:用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
exec() 方法:用于检索字符串中的正则表达式的匹配。该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

四、JS错误 - throw、try 和 catch

try、catch、finally

try 语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

语法:

try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

throw

throw 语句允许我们创建自定义错误(异常)。此处的异常可以是 JavaScript 字符串、数字、逻辑值或对象。
如果把 throw 与 try 和 catch 一起使用,能够控制程序流,并生成自定义的错误消息。

实例:本例检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。catch 会捕捉到这个错误,并显示一段自定义的错误消息:

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}

五、使用误区

Undefined 不是 Null

在 JavaScript 中, null 用于对象, undefined 用于变量,属性和方法。对象只有被定义才有可能为 null,否则为 undefined。
如果我们想测试对象是否存在,需要先使用 typeof 来检测对象是否已定义,否则会报错:

if (typeof myObj !== "undefined" && myObj !== null) 

程序块作用域

在每个代码块中 JavaScript 不会创建一个新的作用域,一般各个代码块的作用域都是全局的。
以下代码的的变量 i 返回 10,而不是 undefined:

for (var i = 0; i < 10; i++) {
    // some code
}
return i;

六、JavaScript API

JavaScript API(应用程序编程接口)是一种常见的提供给开发者的一系列的代码,帮助他们创建网络应用程序的功能。它通常在一个网站的服务器上安装,当然也可以在本地安装,一个API的功能就像一个对外接口,可以让外部开发者调用。

这些API通常以一个“调用”或“指令”(数据传播)的形式来提供特性,并返回结果。大多数API要求输入预定义的特定参数,并以结构化格式返回所需的结果,通常是JSON、XML或XHTML。

一些常见的JavaScript API有DOM API(文档对象模型)、Ajax API(异步的网页应用程序)、WebGL API(即时渲染的3D网页站点)、Geolocation API(实时位置信息)等。

DOM API可以让开发者直接从客户端的浏览器中读取和操作网页的内容、这样就可以生成动态的网页,这使得网页更具吸引力,并且可以满足用户的某些需求,例如用户可以在浏览器中直接用鼠标做出动作,类似于客户端应用程序。

Ajax API可以让网页开发者利用JavaScript在一个页面上创建复杂的网络应用程序,它们不但可以加载和显示网页,而且还可以像客户端应用程序一样响应用户事件。

WebGL API则可以利用现代浏览器的JavaScript功能,让开发者创建现实世界中的出色的3D图形,而不需要任何插件。

Geolocation API可以让开发者访问浏览器的地理位置功能,以便针对当前位置返回有关当地天气、交通状况等信息,帮助用户更加有效地获取所需信息。

JavaScript API在Web开发者中备受欢迎,因为它能够让他们创建出吸引用户、高效可用的网络应用程序,进而提高用户体验。

七、JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用,但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。
在方法中,this 表示该方法所属的对象。

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

如果单独使用or直接出现在函数中,this 表示全局对象(在浏览器中,window 就是该全局对象, [object Window])。
在严格模式下,函数中的this 是未定义的(undefined)。
在事件中,this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。
在这里插入图片描述

八、JavaScript JSON

JSON 是用于存储和传输数据的格式。JSON 通常用于服务端向网页传递数据 。

JSON 实例

{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息,(JSON)本质是一个字符串。
如:

var obj = {a: 'Hello', b: 'World'}; //这是一个js对象,注意js对象的键名也是可以使用引号包裹的,这里的键名就不用引号包含
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串,本质是一个字符串

JSON(格式字符串) 和 JS 对象(也可以叫JSON对象 或 JSON 格式的对象)互转(JSON.parse 和 JSON.stringify)。
要实现从JSON字符串转换为JS对象,使用 JSON.parse() 方法:

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}  一个对象

要实现从JS对象转换为JSON字符串,使用 JSON.stringify() 方法:

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'  一个JSON格式的字符串

说句不严谨的话:JSON.parse() 就是字符串转 js 对象, JSON.stringify()就是 js 对象转字符串,它们前提是要 json 格式才有意义。

九、JS编码规范

关于缩进、命名的一些规则:https://www.runoob.com/js/js-conventions.html

十、AJAX

1.创建对象

XMLHttpRequest 是 AJAX 的基础,所有现代浏览器均支持 XMLHttpRequest 对象,
它用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
创建 XMLHttpRequest 对象的语法:

xmlhttp=new XMLHttpRequest();

2.请求

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。下面是一个简单的get请求:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

在这里插入图片描述
一个简单 POST 请求:

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

在这里插入图片描述

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

3.响应

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性获取服务器的响应:

responseText	获得字符串形式的响应数据。(来自服务器的响应并非 XML)
responseXML	获得 XML 形式的响应数据。(来自服务器的响应是 XML,而且需要作为 XML 对象进行解析)

例如:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

再例如,请求 cd_catalog.xml 文件,并解析响应:

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

4.onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务,每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性:

onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪

status 200: “OK”
404: 未找到页面
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务,比如:

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

注意: onreadystatechange 事件被触发 4 次(0 - 4), 分别是: 0-1、1-2、2-3、3-4,对应着 readyState 的每个变化。

回调函数是一种以参数形式传递给另一个函数的函数,它在主体函数执行完之后执行。

如果网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同),如:

function myFunction()
{
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}

附:AJAX ASP/PHP 实例

https://www.runoob.com/ajax/ajax-asp-php.html
演示当用户在输入框中键入字符时,网页如何与 web 服务器进行通信

附:AJAX Database 实例

演示网页如何通过 AJAX 从数据库读取信息:
https://www.runoob.com/ajax/ajax-database.html

附:AJAX实例合集

https://www.runoob.com/ajax/ajax-examples.html

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值