JavaScrip快速入门

标签：function console 入门 JavaScript JavaScrip tag var 快速 log

一概述

JavaScript是一个古老的语言，它几乎是互联网前端唯一的选择，我们不得不学习并掌握它。

JavaScript 是当前应用最广泛的脚本语言，用来在网页中实现交互效果。JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页。

HTML 用来定义网页的内容，例如标题、正文、图像等；
CSS 用来控制网页的外观，例如颜色、字体、背景等；
JavaScript 用来实时更新网页，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。

1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，但是这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。之后JavaScript语言诞生！

在同一时期，微软和 Nombas也分别开发了 JScript 和 ScriptEase 两种脚本语言，与 JavaScript 形成了三足鼎立之势。它们之间没有统一的标准，不能互用。

为了解决这一问题，1997 年，在 ECMA（欧洲计算机制造商协会）的协调下，Netscape、Sun、微软、Borland（一家软件公司）组成了工作组，并以 JavaScript 为基础制定了 ECMA-262 标准（ECMAScript）。

完整的 JavaScript是由以下三个部分组成：

核心（ECMAScript）：提供语言的语法和基本对象；
文档对象模型（DOM）：提供处理网页内容的方法和接口；
浏览器对象模型（BOM）：提供与浏览器进行交互的方法和接口。

二 Hello JavaScript

创建网页文件index.html，编写网页代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        
	</body>
</html>

在网页代码</body> 标签前插入script标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        
		<script type="text/javascript">
			
		</script>
	</body>
</html>

在<script>标签内加入一行javascript代码，使用浏览器运行html网页文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        
		<script type="text/javascript">
			// 弹出警告框
			window.alert("Hello JavaScript");
		</script>
	</body>
</html>

三 JavaScript引入

1 引入方式

在HTML中，可以使用内联式、外链式、行内式 三种方式`引入JavaScript。

行内式(了解)

行内式是将JavaScript代码作为ＨＴＭＬ标签的属性值来使用，示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript引入方式</title>
	</head>
	<body>
		<!-- 行内式引入JS代码　 -->
		<input type="button" value="点我" onclick="alert('顶')">
	</body>
</html>

内联式(掌握)

内联式是将JavaScript代码包裹在<script>标签中直接编写在HTML文件中，示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript引入方式</title>
		
		<script type="text/javascript">
			alert("顶");
		</script>
	</head>
	<body>
		网页内容
	</body>
</html>

其中 type="text/javascript",是告知浏览器里面是js代码的类型，在HTML5中其属于默认值，可以省略不些。

外链式(掌握)

外链式是指将JavaScript代码保存到一个单独的扩展名为.js的文件中，然后使用script 标签的src属性引入这个js文件，示例如下：

创建一个test.js的文件（一般放在目录下面），完成代码编写

alert("顶");

在HTML代码中引入test.js文件

<script type="text/javascript" src="js/test.js">
	
</script>

在开发过程中，提倡模块化、结构化，在网页面开发时，提倡结构、样式、代码分离，尽量避免都直接在HTML中编写，尽量分离为XX.html、XX.css、XX.js文件编写，以便于后期维护。

2 引入位置

一般为加快网页响应速度，网页要优先加载显示布局效果内容（HTML和CSS），最后再加载JavaScrip代码部分

操作方式一：将script标签放到了body最后位置，页面元素加载完了，再加载执行代码 (掌握)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript引入位置</title>
	</head>
	
	<body>
		<span id="text1">你我他</span>
		
        <!--在这里引入JS代码-->
        <script type="text/javascript">
            
        </script>
	</body>
</html>

操作方式二：异步加载 (了解)

为了降低JavaScript阻塞问题对页面造成的影响，可以使用HTML5为script标签新增的两个可选属性 async 和 defer。

async：用于异步加载，即先下载文件，不阻塞其他代码执行，下载完成后再执行。

<script  type="text/javascript" src="js/test.js" async></script>

defer：用于延后执行，即先下载文件，直到网页加载完成后，再执行。

<script  type="text/javascript" src="js/test.js" defer></script>

四入门操作(重要)

整体基础语法理解操作与Python，Java等语言类型，以下学习全部通过案例来进行

1 基础操作

案例：日志输出

<head>
	<meta charset="utf-8">
	<title>变量</title>
	
	<script type="text/javascript">
		var name = "袁sir";
        // 在浏览器控制台输出日志
        console.log( name );
	</script>
</head>

通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”查看日志显示结果

案例：提取/更改标签文本

innerText

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <span id="c1">获取标签文本内容</span>
        
        <script type="text/javascript">
            // 1.想获取到标签对象
            var tag = document.getElementById('c1');
            // 2.提取该标签文字
            var data = tag.innerText;
            // 3.打印
            console.log(data)
        </script>
    </body>
</html>

案例：提取/更改标签值

value

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
		<input type="text" id="my_password"/>
        
        <script type="text/javascript">
            // 1.想获取到标签对象
            var tag = document.getElementById('my_password');
            // 2.更改值
            tag.value = "123456"
        </script>
    </body>
</html>

2 字符串

var name1 = "袁sir";
var name2 = String("袁sir");

var v1 = name1.length;			// 获取字符串长度
var v2 = name1[2];				// 获取字符 name.charAt(3)
var v3 = name.trim(); 			// 去除前后空格
var v4 = name.substring(0, 2) 	// 字符串截取

3 函数

Python语言的函数语法

def gogogo():
    print("1")
    print("2")
    print("3")

JavaScript语言的函数语法

// 函数定义
function gogogo() {
    console.log("1")
    console.log("2")
    console.log("3")
}
// 函数调用
gogogo()

JavaScript的函数其实也是变量

var foo = function () {
    
}
foo()

案例：跑马灯

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <span id="id_title">湖南湘江工贸软件开发高技班</span>
        
        <script type="text/javascript">
            function horse() {
                // 1.想获取到标签对象
                var tag = document.getElementById('id_title');
                // 2.提取该标签文字
                var data = tag.innerText;
                // 3.提取第一个字符
                var firstString = data[0];
                // 4.提取剩余的字符
                var otherString = data.substring(1, data.length);
                // 5. 拼接一波
                var newData = otherString + firstString;
                // 6.在标签内更新内容
                tag.innerText = newData
            }
            // JavaScript中的定时器,Interval:间隔，传入函数名和间隔时间ms
            setInterval(horse, 1000)
        </script>
    </body>
</html>

扩展let

JavaScript的变量作用域实际上是函数内部，无法定义局部块的变量

python的for语句语法：

for i in range(10):
    pass

JavaScript的

function foo() {
    for (var i=0; i<100; i++) {
        //
    }
    i += 100; // 仍然可以引用变量i
}

为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：

function foo() {
    for (let i=0; i<100; i++) {
        // 
    }
    i += 1; // 报错：SyntaxError
}

4 条件语句

python的

age = 20;
if age >= 18:
    print('成年人');
else:
    print('未成年');

JavaScript的

var age = 20;
if (age >= 18){
    alert('成年人');
}
else{
    alert('未成年');
}

5 循环语句

for

var i = 0;
for (i=1; i<=10; i++) {
    console.log( i );
}

while

var n = 10;
while (n > 0) {
  	console.log("第"+n+"次")
    n = n - 1;
}

do ... while

用do...while()循环体至少会执行1次，而for和while循环则可能一次都不执行的

也就是说for和while是先判断再执行，do...while()是先执行再判断

var n = 10;
do {
    n = n + 1;
    console.log(n)
} while (n < 5);

运行结果：
11

6 数组

Python的

vvv = [10,20,30]  # 列表
print ( vvv[1] )  # 输出20
print ( len(vvv) )	# 输出vvv列表的长度

JavaScript的

var v1 = [10,20,30];
var v2 = Array( [10,20,30] )

console.log(v1[0])		// 通过索引访问数组内的值
console.log(v1.length)	// 数组的长度

var v1 = [10,20,30];
v1.push(40); 			// 追加

// 通过循环进行遍历操作
for(var item in v1){
    console.log('取的是下标',item)		# 0, 1, 2
    console.log('对应的下标值',v1[item])
}
// 通过循环进行遍历操作
for (var i=0; i<v1.length; i++){
    console.log('第二种循环取值',v1[i])
}

var v1 = [50,20,30,40,10];

v1.sort();		// 排序
v1.reverse();	// 反转

var arr = ['Microsoft', 'Apple', 'Yahoo', 'Oracle'];

// splice() 是修改数组的“万能方法”
// splice() 可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素,且返回删除的元素
// 从索引2开始 删除1个元素, 然后再添加两个元素
arr.splice(2, 1, 'Google', 'Facebook'); 

// 只删除,不添加
arr.splice(2, 2); 

// 只添加,不删除:
arr.splice(0, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素

案例: 动态列表

<body>
    <h1 id="mytitle">动态列表</h1>

    <ul id="mylist">   </ul>

    <script type="text/javascript">
        var codes = ["python", "java", "c", "php", ".net"];
		// 拿到HTMl中id为mylist的标签UL
        var ul_tag = document.getElementById("mylist")
		
        for (var i = 0; i < codes.length; i++) {
          	// 创建一个新的HTML标签LI
            li_tag = document.createElement("li");
            li_tag.innerText = codes[i];
            // 向UL上添加孩子标签LI
            ul_tag.appendChild(li_tag)
        }
    </script>
</body>

练习：动态添加数据，实现功能：当单机添加按钮时，将input控件中的内容,添加显示到ul列表中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JavaScript引入</title>
	</head>
	
	<body>
		<h1>动态列表</h1>
		
		<input type="text" id="myedit" />
		
        <button type="button" onclick="addText()">添加</button>
		
		<ul id="mylist"></ul>
		
		<!-- 在HTML中 内联式 引入js -->
		<script type="text/javascript">
			// 功能：
			// 当单机添加按钮时，将input控件中的内容,添加显示到ul列表中
			
			function addText(){
				// 2 以下是获取到INPUT中内容的代码
				var tag_input = document.getElementById("myedit");
				var text = tag_input.value;
				
				// 1 以下是实现向UL列表上添加LI的代码
				var tag_ul = document.getElementById("mylist");
				var tag_li = document.createElement("li");
				tag_li.innerText = text;
				tag_ul.appendChild( tag_li );
			}
		</script>
	</body>
</html>

7 对象（无序集合）

python的

datas = { "name":"小张", "age":22, "score":[90,99,40] }

javascript的

var user = {
    name: '袁sir',
    birth: '1986',
    height: 1.72,
    age: 36
};

console.log( user.name )
console.log( user.age )
console.log( user['birth'] )
console.log( user['height'] )

JavaScript的对象是动态类型,访问不存在的属性不报错，而是返回undefined, 同时还可自由添加删除属性

var user = {
    name: '袁sir',
    birth: '1986',
    height: 1.72,
    age: 36,
};

console.log( user.abc )     // 返回undefined

user.sex = '男'	// 添加sex属性
delete user.age; // 删除age属性

扩展

命名空间

全局变量会绑定到window上，不同的JavaScript文件的全局变量或函数如重名，都会造成命名冲突，并且很难被发现。

解决方案：我们可以用对象创造一个命名空间，把自己所有变量和函数全绑定到一个全局变量中。

// 唯一的全局变量MYAPP
var MYAPP = {   };

// 变量
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 函数
MYAPP.foo = function () {
    return 'foo';
};

把自己的代码全部放入唯一的名字空间MYAPP中，可大大减少冲突的可能。如果这个MYAPP和其他人的代码也冲突~~~~~~~那就再见

许多著名的JavaScript库都是这么干的：jQuery，VUE等等。

8 JSON操作

在JSON出现之前，大家一直用XML来传递数据，XML本身不算复杂，但是有一大堆复杂的规范，从而给了JSON机会。

几乎所有编程语言都有解析JSON的库，而在JavaScript中内置了JSON的解析。

json格式( 本质上就是一个字符串，只是他有自已固定的格式 )

<script type="text/javascript">

    // 这是JS的集合，也就是对象
    var user = {
        name: '袁sir',
        birth: '1986',
        height: 1.72,
        age: 36
    };
    console.log( user )

    // 这是JS中的字符串，JSON格式的字符串
    var jsonstr =  "{name: '袁sir',birth: '1986',height: 1.72,age: 36}";
    console.log( jsonstr )

</script>

我们可以把任何JavaScript对象 序列化 成一个JSON格式的字符串

我们也可以把JSON格式的字符串 反序列化 成一个JavaScript对象

序列化

var user = {
    name: '袁sir',
    birth: '1986',
    height: 1.72,
    age: 36,
    skills: ['JavaScript', 'Java', 'Python', 'android']
};

var s = JSON.stringify(user);
// var s = JSON.stringify(user,null,"\t");
// var s = JSON.stringify(user,['name','age','skills'],"\t");
console.log(s);

运行结果：
{	
    "name":"袁sir",
    "age":36,
    "skills":["JavaScript","Java","Python","android"]
}

反序列化

拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象

json_str = '{"name":"小明","age":14}';
var obj = JSON.parse(json_str);
console.log( obj );
console.log( obj.name );

输出结果：
{name: '小明', age: 14}
小明

可以在JSON转换时，过滤更新信息

json_str = '{"name":"小明","age":14}';
var obj = JSON.parse(json_str, function (key, value) {
    if (key === 'name') {
        return value + '同学';
    }
    return value;
});
console.log( obj ); 

输出结果：
{name: '小明同学', age: 14}

案例：JSON数据适配

练习：完成以下JSON文本的反序列化操作，设置到HTML列表上进行前端显示

var jsonstr = {
    "reason": "success",
    "result": [
        {
            "day": "2\/23",
            "date": "1455年2月23日",
            "title": "活字印刷机第一次印刷《圣经》",
            "e_id": "2572"
    	},
        {
            "day": "2\/23",
            "date": "1685年2月23日",
            "title": "英籍德国作曲家乔治·弗里德里希·亨德尔诞辰",
            "e_id": "2573"
        },
        {
            "day": "2\/23",
            "date": "1855年2月23日",
            "title": "德国数学家高斯逝世",
            "e_id": "2574"
        },
        {
            "day": "2\/23",
            "date": "1868年2月23日",
            "title": "美国著名作家杜波依斯诞辰",
            "e_id": "2575"
        },
        {
            "day": "2\/23",
            "date": "1873年2月23日",
            "title": "清代维新运动领袖梁启超诞辰",
            "e_id": "2576"
        },
    ],
    "error_code": 0
}

console.log( jsonstr );					// 对象(无序集合)
console.log( jsonstr.result );			// 数组Array
console.log( jsonstr.result.length );	// 数组Array的长度
console.log( jsonstr.result[0] );		// 数组Array中的第一个值(这个值是对象类型)
console.log( jsonstr.result[0].day );	// 数组Array中的第一个值的day属性
console.log( jsonstr.result[0].date );	// 数组Array中的第一个值的date属性
console.log( jsonstr.result[0].title );	// 数组Array中的第一个值的title属性
console.log( jsonstr.result[0].e_id );	// 数组Array中的第一个值的e_id属性

五 DOM操作

1 查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

2 改变 HTML 元素

方法	描述
element.innerHTML = 新文本内容	改变元素的 inner HTML
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = 新的style样式	改变 HTML 元素的样式

更改标签属性

<body>
    <h1 id="mytitle" data-a="300">动态列表</h1>
    
    <script type="text/javascript">
        var tag_h1 = document.getElementById("mytitle")
        // 获取标签属性
        console.log(tag_h1.getAttribute("data-a"))	// 300
        // 设置标签属性（一般自定义属性用data-开头）
        tag_h1.setAttribute("data-a",100)			
        tag_h1.setAttribute("data-b",200)
        // 获取标签属性
        console.log(tag_h1.getAttribute("data-a"))	// 100
        console.log(tag_h1.getAttribute("data-b"))	// 200
    </script>
</body>

更改标签样式

<body>
    <h1 id="mytitle" style="color: black; font-size:22px ;">动态列表</h1>

    <script type="text/javascript">
        var tag_h1 = document.getElementById("mytitle")
        
        // 修改单个CSS属性
        tag_h1.style.color  = "red" 
        tag_h1.style.fontSize = "66px";
		// 修改CSS文件
        tag_h1.style.cssText = "color:blue; font-size:88px;"
    </script>
</body>

实现整体页面换肤(这只是部分代码，了解即可)

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
 
<script type="text/javascript">
    function changeStyle1() {
        var obj = document.getElementById("css");
        obj.setAttribute("href","css1.css");
    }
    function changeStyle2() {
        var obj = document.getElementById("css");
        obj.setAttribute("href","css2.css");
    }
</script>

3 添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

案例参考动态列表

4 事件处理

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

<body>
    <button id="mybtn">确定</button>
    
    <script type="text/javascript">
        var tag_h1 = document.getElementById("mybtn");
        // 添加事件处理
        tag_h1.onclick = function(){
            alert("ddd")
        }
    </script>
</body>

<body>
    <button id="mybtn">确定</button>
    
    <script type="text/javascript">
        function abc(){
            alert("ddd")
        }
        
        var tag_h1 = document.getElementById("mybtn");
        // 添加事件处理
        tag_h1.onclick = abc;
    </script>
</body>

鼠标事件

window.onclick = function () { 执行语句 } //鼠标单击事件
window.οndblclick= function () { 执行语句 }//鼠标双击事件
window.onmousedown = function () { 执行语句 }//当鼠标按钮按下运行时
window.onmouseup = function () { 执行语句 }//当鼠标按钮运行时
window.onmouseover = function () { 执行语句 }//当鼠标移入时 不能阻止冒泡
window.onmouseout = function () { 执行语句 }//当鼠标移出时 不能阻止冒泡
window.onmouseenter = function () { 执行语句 }//当鼠标移出时 可以阻止事件冒泡
window.onmouseleave = function () { 执行语句 }//当鼠标移出时 可以阻止事件冒泡
window.onmousewheel = function () { 执行语句 }//当鼠标的滚轮运行

浏览器事件

window.onblur = function(){ 事件执行的语句} //当窗口失去焦点时
window.onfocus = function(){ 事件执行的语句}//当窗口获得焦点时
window.onload = function(){ 事件执行的语句}//窗口加载完成后
window.onresize = function(){ 事件执行的语句}//窗口大小改变
window.onchange = function(){ 事件执行的语句}//内容改变事件
window.oninput = function(){ 事件执行的语句}//当文本框内容改变时 ，立即将改变内容
window.oninvalid = function(){ 事件执行的语句}//获取表单 未能提交时
window.onselect = function(){ 事件执行的语句}//当文本框内容被选中时

案例：单击按钮，更换背景

<body>
    <button id="mybtn1" >换为红色背景</button>
    <button id="mybtn2" >换为绿色背景</button>
    <button id="mybtn3" >换为蓝色背景</button>

    <!-- 在HTML中 内联式 引入js -->
    <script type="text/javascript">
        var tag_btn1 = document.getElementById("mybtn1");
        var tag_btn2 = document.getElementById("mybtn2");
        var tag_btn3 = document.getElementById("mybtn3");
        var tag_body = document.getElementsByTagName("body")[0];

        tag_btn1.onclick = function(){
            tag_body.style.backgroundColor = "#F00";
        }
        tag_btn2.onclick = function(){
            tag_body.setAttribute("style","background-color: #0f0");
        }
        tag_btn3.onclick = function(){
            tag_body.style.cssText = "background-color: #00f"
        }
	</script>
</body>

表单提交事件

HTML表单的输入控件主要有以下几种：

文本框，对应的<input type="text">，用于输入文本；
口令框，对应的<input type="password">，用于输入口令；
单选框，对应的<input type="radio">，用于选择一项；
复选框，对应的<input type="checkbox">，用于选择多项；
下拉框，对应的<select>，用于选择一项；
隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

//表单提交事件, 在提交表单时触发
表单对象.onsubmit = function(){ 事件执行的语句}

案例

<body>

    <form action="." method="get" id="myform">
        账号：<input type="text" id="userCode" value="这是默认值" />
        密码：<input type="password" id="userPwd" />
        <input type="submit" />
    </form>

    <script type="text/javascript">
        var tag_form = document.getElementById("myform");
        /* 为表单绑定提交事件 */
        tag_form.onsubmit = function() {
            let userCode = document.getElementById("userCode").value;
            let userPwd = document.getElementById("userPwd").value;
            var reg = /^[A-Za-z0-9]{6,12}$/;
            if (userCode == '') {
                alert("账号不能为空");
            } else if (userCode.length < 6 || userCode.length > 12) {
                alert("账号长度错误");
            } else if (!reg.test(userCode)) {
                alert("账号只能为字母与数字!");
            } else if (userPwd == '') {
                alert("密码不能为空");
            } else if (userPwd.length < 6 || userPwd.length > 12) {
                alert("密码长度错误");
            } else if (!reg.test(userPwd)) {
                alert("密码只能为字母与数字!");
            } else {
                return true;
            }
            // return true:可以提交  false 不能提交
            return false;
        }
    </script>
</body>

5 Ajax

客户端和服务器

连接到互联网的计算机被称作客户端和服务器。下面是一个简单描述它们如何交互的图表：

客户端是典型的 Web 用户入网设备（比如，你连接了 Wi-Fi 的电脑，或接入移动网络的手机）和设备上可联网的软件（通常使用像 Firefox 和 Chrome 的浏览器）。
服务器是存储网页，站点和应用的计算机。当一个客户端设备想要获取一个网页时，一份网页的拷贝将从服务器上下载到客户端机器上来在用户浏览器上显示。

Ajax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。

功能： 用于实现与服务器进行异步交互的功能。

不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

AJAX请求是异步执行的，通过回调函数获得响应。

AJAX请求操作的核心是XMLHttpRequest对象，通过此对象向服务器发送请求并处理响应，且不阻塞用户。

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
request.open('GET', 'test.json',true);// 建立连接    GET/POST ，  http://.....  ，是否异步处理
request.send();// 发送请求

// 连接状态发生变化时，函数被回调
request.onreadystatechange = function () { 
    // 请求发送的状态反馈
    // 0：请求未初始化
    // 1：服务器连接已建立(已经调用 open()，但尚未调用 send())
    // 2：请求已收到(发送状态，已经调用 send()，但尚未接收到响应)
    // 3：正在处理请求(已经接收到部分响应数据)
    // 4： 请求已完成且响应已就绪(已经接收到全部响应数据)
    if (request.readyState == 4) { // 成功完成
        // 判断响应结果:200为成功
        if (request.status == 200) {
            // 成功，通过responseText拿到响应的文本:
            console.log(request.responseText)
        } else {
            // 失败，根据响应码判断失败原因:
            console.log(request.status)
        }
    } else {
        // HTTP请求还在继续...
    }
}

免费测试WEB接口API

https://api.apiopen.top/api/sentences

readyState的状态值:

0:xmlHttp对象被创建
1:异步对象被初始化
2:发送请求
3:服务器有数据返回
4:可以进行服务器返回的数据渲染

status的状态值:

200:请求和响应是成功
404:服务器的资源找不到
400:请求参数异常
500:服务器端语法出错.

案例：一名名言API接口数据获取适配

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>案例</title>
	</head>
	<body>
		<h1>名言</h1>
		<h2 id="h2_name"></h2>
		<h2 id="h2_from"></h2>
		
		<script type="text/javascript">
			// 1 网络连接操作对象
			var httpRequest = new XMLHttpRequest()
			// 4 网络连接状态监听
			httpRequest.onreadystatechange = function(){
				// 网络成功
				if(httpRequest.readyState == 4){
					// 响应成功
					if(httpRequest.status == 200){
						// 5 获得响应文本内容
						var text_json = httpRequest.responseText;
						// 6 转化为对象
						var text_obj = JSON.parse(text_json);
						// 7 取出内容（查看接口，才能得到对应key）
						var name  = text_obj.result.name;
						var from = text_obj.result.from;
						// 8 将对应文本设置到标签上
						document.getElementById("h2_name").innerText = name;
						document.getElementById("h2_from").innerText = from;
					}
				}
			}
			// 2 连接配置
			httpRequest.open('GET','https://api.apiopen.top/api/sentences',true);
			// 3 连接
			httpRequest.send();
		</script>
	</body>
</html>

视频播放

<video src="" controls muted width="800px" height="400px"></video>

标签：function,console,入门,JavaScript,JavaScrip,tag,var,快速,log
From： https://www.cnblogs.com/yxchao/p/17142348.html

一概述

二 Hello JavaScript

三 JavaScript引入

1 引入方式

行内式(了解)

内联式(掌握)

外链式(掌握)

2 引入位置

四入门操作(重要)

1 基础操作

案例：日志输出

案例：提取/更改标签文本

案例：提取/更改标签值

2 字符串

3 函数

案例：跑马灯

扩展let

4 条件语句

5 循环语句

for

while

do ... while

6 数组

案例: 动态列表

7 对象（无序集合）

扩展

8 JSON操作

案例：JSON数据适配

五 DOM操作

1 查找 HTML 元素

2 改变 HTML 元素

3 添加和删除元素

4 事件处理

5 Ajax

相关文章

赞助商

阅读排行

JavaScrip快速入门

一 概述

二 Hello JavaScript

三 JavaScript引入

1 引入方式

行内式(了解)

内联式(掌握)

外链式(掌握)

2 引入位置

四 入门操作(重要)

1 基础操作

案例：日志输出

案例：提取/更改标签文本

案例：提取/更改标签值

2 字符串

3 函数

案例：跑马灯

扩展let

4 条件语句

5 循环语句

for

while

do ... while

6 数组

案例: 动态列表

7 对象（无序集合）

扩展

8 JSON操作

案例：JSON数据适配

五 DOM操作

1 查找 HTML 元素

2 改变 HTML 元素

3 添加和删除元素

4 事件处理

5 Ajax

相关文章

赞助商

阅读排行

一概述

四入门操作(重要)