小白入門之前端網頁技術JavaScript-有解無憂

文章目錄

- 靜態網頁和動態網頁
- - 動態網頁
  - 網頁是如何和后端互動的呢？
- JS概述
- - 什么是JS
  - 名詞解釋
  - 特點和優勢
  - 入門案例
- HTML中引入JS
- - 通過script標簽引入JS代碼
  - 通過script標簽引入外部的JS檔案
- JS語法
- - 注釋
  - 基本資料型別
  - 復雜資料型別
  - JS的變數
  - JS的運算子
- JS陳述句
- - if..else陳述句
  - switch…case陳述句
  - 回圈陳述句
- JS陣列
- - JS陣列的宣告方式
  - 陣列需要注意的細節
  - 陣列的常見操作
- JS函式
- - 方式一：通過function關鍵字宣告函式
  - 方式二：通過函式直接量宣告函式
- JS物件
- - 內置物件
  - 自定義物件
- DOM樹的作用
- - 組成
  - DOM樹結構
  - Document物件
  - dom.html
  - 總結
- json
- - 概念
  - 作用
  - 語法
  - 轉換工具
  - 測驗
- ajax
- - 概述
  - 原理
  - 核心物件XMLHttpRequest
  - 測驗
- console除錯網頁
- - Chrome
  - log
  - warn
  - table

靜態網頁和動態網頁

動態網頁

我們有了html超文本標記語言實作了網站頁面展現，展現文字、表格、圖片、超鏈接等，有了css樣式表實作了頁面的美化，這些技術實作了靜態網頁，

日常展現是已經足夠了，但是如果我們要做個注冊功能呢？如論壇，我們注冊個論壇來發文章，聊天，這就帶來一個問題，資訊如何根據不同的使用者，展現不同的內容呢？再如我注冊登錄和你注冊登錄，我們在網站上顯示的登錄名稱就不同，這html+css就無能為力了，它們無法實作，那誰能辦到呢？這時javascript就派上用場了，它能實作瀏覽器用戶和后臺服務器進行互動，注冊、登錄、添加商品到購物車、下訂單對它而言都是小菜一碟，有了javascript的加入，實作頁面和后臺系統的互動，實作用戶資訊的注冊，實作用戶的登錄，實作個性化的資料展現，功能強大不老少，業界把這樣的網頁稱為動態網頁，把這樣的網站稱為動態網站，

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8GoCFcXD-1622526184986)(RackMultipart20210601-4-1vdjb36_html_683b0f623d6265f.png)]

簡而言之，靜態網站只能看，不同瀏覽者看到內容一致不能變化；動態網站可以讀寫資料，內容根據不同瀏覽者展示不同的資訊，

網頁是如何和后端互動的呢？

動態網站的軟體架構是怎樣的呢？

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-br6P2qaO-1622526184994)(RackMultipart20210601-4-1vdjb36_html_a71a298b5faabd1f.png)]

用戶訪問頁面，頁面觸發事件創建XHR物件，進行ajax請求，請求訪問服務器端，請求被web中間件攔截并進行處理，由控制層框架springmvc中的controller進行接收，controller請求業務層spring框架的service服務，service請求持久層mybatis框架的mapper映射，mapper訪問資料庫，操作完資料庫，回傳結果，mybatis封裝成java物件傳回service，service把java物件傳回controller，controller把java物件又轉換為json字串，然后傳回瀏覽器，瀏覽器傳回給呼叫者XHR，XHR呼叫回呼方法callback，callback進行json字串的決議，從中拿到要展現的資料，通過javascript處理，最侄訓顯到頁面上，

可以看到這個呼叫程序是非常復雜的，跨越網路，跨域多個服務器，很多技術應用其中，而這一切的始作俑者是誰呢？誰讓這一切成為可能，它就是javascript，它實作了用戶的請求和回應，實作了資料的動態展現，使早期靜態的網站走向了動態的網站，

JS概述

什么是JS

JavaScript 是 web 前端開發者必學的三種語言之一：

HTML 定義網頁的內容 H5
CSS 規定網頁的布局 CSS3
JavaScript 實作網站的互動 ES6

JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實作而成，因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript，但實際上它們根本沒有關系，java是強語言幾乎無所不能，而javascript是腳本語言，只局限于瀏覽器，

JavaScript遵循ECMA國際組織頒布的ECMAScript標準，截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準，2015年6月17日，ECMA國際組織發布了ECMAScript 的第六版，簡稱為ES6，它的目標是使得JavaScript語言可以用來撰寫復雜的大型應用程式，成為企業級開發語言，很多js相關技術都遵循這個標準，如目前最受歡迎的Vue，

微軟出了符合規范類似javascript的稱為js，但一般開發者忽略它們的差異，全稱就習慣叫javascript，簡稱就習慣叫js，

全稱JavaScript，是一種弱型別語言，同其他語言一樣，有它自身的語法，資料型別，運算式，算術運算子等，

JS是一門 基于物件 和 事件驅動 的 腳本語言 ，通常用來提高網頁與用戶的互動性，

名詞解釋

基于物件：它不僅可以創建物件,也能使用現有的物件，JS沒有類的概念，也沒有編譯的程序，是一邊解釋一邊執行，

事件驅動：在JS中，大部分情況下都是通過事件觸發驅動函式執行的，從而實作特定的功能，（比如點擊div將內容替換為時間、當滑鼠滑過元素，元素就有翻轉的動態，）

腳本語言：在網路前端開發環境下，用于嵌入在客戶端瀏覽器中的一段小程式，

特點和優勢

特點：

(1)JS是一門直譯式的語言，直接執行的就是源代碼.

是一邊解釋一邊執行，沒有編譯的程序（不像Java需要提前編譯為class檔案再運行）.

(2)JS是一門弱型別的語言,沒有嚴格的資料型別.

優勢：

(1)良好的互動性

(2)一定的安全性(JS被強制的要求,不能訪問瀏覽器以外的東西,只能訪問瀏覽器和瀏覽器內部的資源)

(3)跨平臺性(Java語言具有跨平臺性,是因為有虛擬機)

只要有瀏覽器的地方都能執行JS

入門案例

<head>
    <title>hello</title>
	<meta charset="utf-8"/>
	<script>/* JS代碼 */
alert(100);
		function fn(){
			alert("111");
		}
	</script>
</head>
<body>
	<a href="#" onclick="fn();">滑鼠點擊事件...</a>
</body>

HTML中引入JS

通過script標簽引入JS代碼

<head>
	<meta charset="utf-8"/>
	<script>/* JS代碼 */
		function fn(){
			alert("JS的第1種引入方式");
		}
	</script>
</head>
<body>
	<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>

通過script標簽引入外部的JS檔案

創建1.js檔案

function fn(){
	alert("JS的第2種引入方式");
}

在html中引入檔案

<head>
	<meta charset="utf-8"/>
	<script src="1.js"> </script>
</head>
<body>
	<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>

注意：不要同時通過一個script標簽引入JS代碼和JS檔案，會導致代碼不會執行！比如：

<script src="demo1.js">
	alert("哈哈哈哈，，，");//代碼不會執行！！
</script>

JS語法

注釋

單行注釋： //注釋內容

多行注釋： /* 注釋內容 */

基本資料型別

包括:number/string/boolean/null/undefined

(1) 數值型別-number

在JS中，數值型別只有一種，就是浮點型，

在JS中，需要時會自動的進行資料型別的轉換，比如：在顯示和處理的時候，浮點型和整型會自動的轉換，

2.4+3.6=6;

Infinity ： 正無窮大

-Infinity ： 負無窮大

NaN : Not a Number 非數字， 和任何值都不相等，包括它本身

(2) 字串型別-string

在JS中，字串是基本資料型別，

在JS中，字串直接量是通過單引號或者雙引號引起來，


var str1 = "Hello…";

var str2 = 'CGB2103…';;

alert(str1);

(3) 布爾型別-boolean

值為true或者是false；

var s1 = false;

console.log(s1);

(4) undefined

值只有一個就是undefined，表示變數沒有初始化值，

比如：

a) var num; alert(num);//宣告了變數但是沒有為變數賦值，該變數的值就是undefined，

b) 或者訪問一個物件上不存在的屬性時，也是undefined，

c) 或者訪問陣列中一個沒有的元素的位置時，該位置處的值也是undefined.

(5) null

值也只有一個，就是null，表示空值或者不存在的物件，

復雜資料型別

函式、陣列、物件（自定義物件、內置物件、DOM物件、BOM物件…）

JS的變數

js是弱型別語言，所有型別的變數都是用var關鍵字定義，并且引數的型別可以隨時轉換，

javascript沒有類似采用靜態語言型別，如java的變數型別是編譯期就確定的；而它采用了動態型別，也就是說在編譯期型別不確定，運行時會動態根據變數的賦值來決定它的型別，這點比較靈活，這也是雙刃劍，編譯期就難以檢查出其賦值的錯誤，

練習:變數交換

(1) 在JS中是通過 var 關鍵字來宣告一個變數

var a=1; alert(a);

var x=true; alert(x);

var y=10.8; alert(y);

(2) 在JS中宣告的變數是不區分型別的，可以指向任意的資料型別，

var a = 1;
a=true;
a=100;
alert(a);//100

function x(){
	var m = 10;
	alert("區域變數:"+m);
	alert("全域變數:"+a);
}
alert("區域變數2:"+m);//區域變數失效,報錯

JS的運算子

JS中的運算子和Java中的運算子大致相同

算術運算子: +，-，*，/，%，++，–

賦值運算子: =，+=，-=，*=，/=，%=

比較運算子: ，!=，=，!==，>，>=，<，<=

位運算子: & ， |

邏輯運算子: && ，||

前置邏輯運算子: ! (not)

三元運算子: ? :

常見運算子測驗

var a = 3;
var b = 1;
console.log(a+b);//4
a+=4;
console.log(a+b);//8
//a+=4;
console.log(a==b); //true
console.log(a==="3"); //false  如果兩邊比較的值不是同一種資料型別，===直接回傳false，如果是同一種資料型別，==和===沒有區別！
console.log("1"=="1"); //true   //由于JS中字串是基本資料型別，比較字串相等通過 == 進行！
var a = 1;
alert(a++);//1
alert(++a);//3
alert(++a+a+++a);//4+4+5
alert(a>3?10:8);
var b = 10;
alert(a>b?a:b);//求兩個數里的大數
var c = 8;
var d = a>b?(a>c?a:c):(b>c?b:c);
alert(d);//三個數里的大值

typeof運算子: 用于回傳變數或者運算式的資料型別

var i = 3;
console.log(typeof i);//number
i=true;
console.log(typeof i);//boolean
i="hello";
console.log(typeof i);//string
console.log(typeof 123+"abc");//numberabc
console.log(typeof (123+"abc"));//string

JS陳述句

JS中的陳述句和Java中的陳述句用法也大致相同

if…else陳述句

var i = 3;
if(i==4){
alert(“yes”);
}else{
alert(“no”);//no
}
例子: 接收用戶輸入的成績，判斷成績所屬的等級
80~100(包括80，也包括100)		優秀 
60~80(包括60，但不包括80)		中等
0~60(包括0，但不包括60)		不及格
其他值							輸入有誤
// prompt函式可以彈框提示用戶輸入成績, 并回傳用戶輸入的內容
var score = prompt("請輸入您的成績：");
console.log( score );
if( score >= 80 && score <=100 ){
	alert("您的成績屬于：優秀！");
}else if( score >= 60 && score < 80 ){
	alert("您的成績屬于：中等！");
}else if( score >= 0 && score < 60 ){
	alert("您的成績屬于：不及格！");
}else{
	alert("您輸入的成績不合法，請重新輸入！");
}

switch…case陳述句

var day = 3;
switch( day ){
	case 1: 
		alert("今天是星期一");
		break;
	case 2: 
		alert("今天是星期二");
		break;
	case 3: 
		alert("今天是星期三");
		break;
	case 4: 
		alert("今天是星期四");
		break;
	case 5: 
		alert("今天是星期五");
		break;
}

回圈陳述句

for(var i=0;i<5;i++){
	alert( i );
console.log(i);
}
var i=0;
while(i<5){
alert(i);
i++;
}
var sum = 0;
for( var i=1; i<=100; i++ ){
	sum += i; //sum = sum+i;
}
console.log(sum );
//沒有增強for回圈

注意： JS中的陳述句，判斷條件可以不是boolean型別，因為JS中會自動進行資料型別的轉換，

JS陣列

JS陣列用于在單個的變數中存盤多個值(其實就是一個容器)，

JS中的陣列可以存盤例如：數值、字串、布林值、undefined、null、物件、函式等

JS陣列的宣告方式

var arr1 = new Array();//宣告一個空陣列
var arr2 = new Array("abc", "hello", true);//宣告一個具有初始值的陣列
alert(arr2.length);//3
var arr4 = [];//宣告一個空陣列
alert(arr4.length);//0
arr4 = ["abc", "hello", true];//宣告一個具有初始值的陣列
alert(arr4);

陣列需要注意的細節

(1)JS陣列中可以存放任意的資料型別

(2)JS中的陣列長度可以被改變

var arr1 = [];//宣告一個空陣列
console.log( arr1.length ); //此時陣列長度為 0
arr1.length = 10;
console.log( arr1.length ); //此時陣列長度為 10
arr1[99] = "abc";
console.log( arr1.length ); //此時陣列長度為 100
arr1.length = 0;
console.log( arr1.length ); //此時陣列長度為 0

陣列的常見操作

length屬性  --  獲取陣列的長度，還可以改變陣列的長度
var a = [1,2,3];  
alert(a.length);  

var arr = [123, "abc", false, new Object() ]
//遍歷陣列
for( var i=0; i< arr.length; i++ ){
	console.log( arr[i] ); 
}
//for..in
for(var i in a){
	console.log("i:::"+i);
}
//回圈接收用戶輸入，將資料存盤在陣列中，直至輸入‘exit’結束
c();
function c(){
	var a=[];
	for(;;){
		var x=prompt("請輸入整數:");
		a[a.length]=x; 
		if(x=="exit"){
			break;
		}
	}
	console.log(a);
}

JS函式

函式就是一個具有功能的代碼塊, 可以反復呼叫

函式就是包裹在花括號中的代碼塊，前面使用了關鍵詞 function

方式一：通過function關鍵字宣告函式

宣告：function 函式名稱([引數串列]){ 函式體 }
呼叫: 函式名稱([引數串列]);
案例：
function a(){ //無參函式定義
	var a = [1,2,3,4,5]; //定義陣列
	var sum =0; //定義變數
	for (var i = 0; i <a.length; i++) {
		if(a[i]%2==0){
			sum+=a[i];
		}
	}
	alert(sum);
}
a();//函式呼叫
function b(x,y){//定義含參函式
	alert(x+y);
}
b(1,"2");//函式呼叫
b(1,2);//函式呼叫

方式二：通過函式直接量宣告函式

宣告：var 函式名稱 = function([引數串列]){ 函式體 }
呼叫: 函式名稱([引數串列]);
案例：
// fn2();  //這種方式定義的函式還未加載就呼叫,會報錯.方式1沒問題
var fn2 = function(){ //定義無參函式
	alert(100);
}
fn2();  //函式呼叫

var fn3 = function(x,y){  //定義含參函式
	alert(x*y);
}
fn3(0.32,100);//函式呼叫
fn2("王海濤");引數個數不匹配，王海濤undefined
var e = function(x,y){ //定義有回傳值含參函式
	return x-y;
}
alert("函式回傳值:::"+ e(1.1,10.9) ); //函式呼叫

注意: 在JS中呼叫函式時, 傳遞的引數個數如果與宣告的引數個數不相同, 也不會報錯，

但是最好按宣告的個數來傳遞, 因為個數不符, 可能會引發一些問題！！！

JS物件

利用function關鍵字宣告物件，用new關鍵字創建物件，

內置物件

String/Array/Number/Math/JSON…

Window物件–代表瀏覽器中一個打開的視窗,了解一下即可，很多被UI替代

window.onload() 		    在瀏覽器加載完整個html后立即執行!
window.alert("text") 				提示資訊會話框
window.confirm("text") 			確認會話框
window.prompt("text") 			鍵盤輸入會話框
window.event						事件物件
window.document					檔案物件

Document物件–代表整個HTML檔案，可用來訪問頁面中的所有元素

document.write()               	動態向頁面寫入內容
document.getElementById(id)  		獲得指定id值的元素
document.getElementsByName(name)	獲得指定Name值的元素

學會簡單使用，后期被jQuery封裝，在后期被Vue框架封裝

自定義物件

(1)方式一：

宣告物件：function Person(){}
創建物件：var p1 = new Person();
設定屬性：p1.name = "張飛"; p1.age = 18;
設定方法：p1.run = function(){ alert(this.name+" : "+this.age); }
訪問p1物件：

/* 自定義物件*/
function Person(){ } /* 定義物件*/ 
var p1 = new Person(); /* 創建物件*/
p1.name="張三";
p1.age=20;
console.log(p1);  
p1.say = function(){ /* 定義函式*/
console.log("haha");
}
p1.say(); /* 函式呼叫*/
上面展示了js的強大！js的牛掰之處就在于，它的屬性可以邊寫邊創建，非常靈活，而java不行，必須先定義，

上面展示了js的強大！js的牛掰之處就在于，它的屬性可以邊寫邊創建，非常靈活，而java不行，必須先定義，

(2)方式二:

var p2 = {
		"pname":"李四",
		"page":100,
		"psay":function(){
			/* this使用p2里定義的 */
			console.log(this.pname+this.page);
		}
	}
	console.log(p2);
	p2.psay();  /* 函式呼叫*/

DOM樹的作用

組成

ECMAScript描述了javascript語言的語法和基本物件
檔案物件模型DOM（Document Object Model）與HTML網頁API介面
瀏覽器物件模型BOM（Browser Object Model），與瀏覽器進行互動的API介面

核心物件有：window瀏覽器視窗，navigator瀏覽器資訊，location瀏覽器當前地址資訊，history瀏覽器歷史資訊，screen用戶螢屏資訊，

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-YMZBuK5C-1622526185003)(RackMultipart20210601-4-1vdjb36_html_7c541c1bae188940.png)]

DOM非常重要，實際開發更多通過js操作DOM物件實作對html頁面的操作，BOM也用，比較少用，所以學習重點放在DOM上，

DOM樹結構

DOM 是一項 W3C (World Wide Web Consortium) 標準，DOM（Document Object Model）檔案物件模型為JS操作html檔案所提供的一套API，通過這套API可以很方便的對html元素進行訪問及增刪改查操作，

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mw8l1nxY-1622526185008)(RackMultipart20210601-4-1vdjb36_html_1b9343e8dd3a0f7a.png)]

Document物件

--獲取物件: window.document
--呼叫方法: 
		getElementById("元素的id的屬性的值")--回傳1個元素
		getElementsByName("元素的name屬性的值")--回傳多個元素(用陣列)
		getElementsByClassName("元素的class屬性的值")--回傳多個元素(用陣列)
		getElementsByTagName("元素的標簽名的值")--回傳多個元素(用陣列)
write()--向檔案寫 HTML 運算式 或 JavaScript 代碼
title--回傳網頁的標題
id--設定或回傳元素的id
innerHTML--設定或回傳元素的內容

dom.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM決議</title>

		<!-- js -->
		<script>
			function a(){
				/* 按id獲取,回傳1個 */
				var x = document.getElementById("div1");
				x.innerHTML="<h1>你好div</h1>";
				
				/* 按name屬性值獲取,回傳多個*/
				var y = document.getElementsByName("div2"); 
				console.log(y);//NodeList
				y[0].innerHTML="hello js...";
				
				/* 按class屬性值獲取,回傳多個*/
				var z = document.getElementsByClassName("span1");
				console.log(z);//HTMLCollection
				z[0].innerText="<p>我變了</p>"
				
				/* 按照標簽名獲取,回傳多個 */
				var m = document.getElementsByTagName("div");
				console.log(m);//HTMLCollection
				m[1].style.fontSize=30+"px";
			}
		</script>
	</head>
	<body>
		<div id="div1" onclick="a();">我是div1</div>
		<div name="div2"  onclick="a();">我是div2</div>
		<span class="span1">我是span1</span>
		<span class="span1">我是span2</span>
		<a name="div2" id="a1">我是a</a>

		<!-- js事件: -->
<a href="#" onclick="method();">單擊觸發js</a>
		<a href="#" ondblclick="method2();">雙擊觸發js</a>
		<a href="#" onm ouseenter="method3();">滑過觸發js</a>
		<a href="#" onm ouseleave="method4();">滑走觸發js</a>
<button onkeydown="alert(1);">點我</button>
	</body>
</html>

總結

獲取頁面元素的4種方式:

getElementsByTagName 標簽名稱，得到陣列
getElementsByName name屬性，得到陣列
getElementsByClassName class屬性，得到陣列
getElementById id屬性，單個值

注：dom樹在描述標簽時除id方式，其它都是以陣列形式體現，哪怕是一個元素，

json

概念

ajax往往要完整應用還會配合一個技術：JSON，那什么是JSON呢？

JSON 指的是 JavaScript 物件表示法（JavaScript Object Notation）

JSON(JavaScript Object Notation，JS 物件簡譜) 起名不咋地，非常拗口，我們就記住它是一種輕量級的資料交換格式即可，它基于 ECMAScript (js規范)的一個子集，采用完全獨立于編程語言的文本格式來存盤和表示資料，簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言，是xml的終結者，成為主流開發方式（ajax異步請求，json回傳），

作用

JSON 是存盤和交換文本資訊的語法，當資料在瀏覽器與服務器之間進行交換時，這些資料只能是文本，JSON 屬于文本，并且我們能夠把任何 JavaScript 物件轉換為 JSON，然后將 JSON 發送到服務器，我們也能把從服務器接收到的任何 JSON 轉換為 JavaScript 物件，以這樣的方式，我們能夠把資料作為 JavaScript 物件來處理，無需復雜的決議和轉譯，

語法

JSON資料:

var a =' "firstName" : "John" '

JSON 物件:

var a = '{ "firstName":"John" , "lastName":"Doe" }'

JSON 陣列:

var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';

轉換工具

使用JS里的內置物件JSON.用來把以 JSON 格式寫的字串和原生 JavaScript 物件互轉.

給服務器發送資料: 將JS物件轉成JSON字串 	JSON.stringify(Js物件)
接受服務器的資料: JSON字串轉成JS物件		JSON.parse("json字串")

測驗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>json</title>
		<script>
			//json用來在瀏覽器和服務器之間做資料傳輸,輕量級,格式簡單明了.
			//JSON是js的內置物件,用來把json型別的字串和js物件互轉
			//json型別的字串---{ "k1":"v1", "k2":"v2", "k3":"v3" }
			function jschuan(){
				var jsonchuan = '{ "k1":"v1", "k2":"v2", "k3":"v3" }';
				document.getElementById("h").innerHTML=jsonchuan;
			}
			function chuan2js(){
				var text='{ "k1":"v1", "k2":"v2", "k3":"v3" }';
				console.log(text);
		//從服務器收到的資料都是字串,轉成js物件,用js語法決議屬性/方法
	var jsobj = JSON.parse(text);//串轉js物件,就可以寫js代碼決議資料
				console.log(jsobj);
				document.getElementById("d").innerHTML=jsobj.k2;
			}
			function js2chuan(){
				var obj = {"k1":"v1", "k2":"v2", "k3":"v3"};
				console.log(obj);
				//把瀏覽器的資料發給服務器,服務器只要json串
				var text = JSON.stringify(obj);//js物件轉成串
				document.getElementById("p1").innerHTML=text;
				console.log(text);
				console.log(text.length);
			}
		</script>
	</head>
	<body>
		<p id="p1" onclick="js2chuan();">我是p</p>
		<div id="d" onclick="chuan2js();">我是div</div>
		<h1 id="h" onclick="jschuan();">我是h1哦</h1>
	</body>
</html>

ajax

概述

AJAX = Asynchronous JavaScript And XML. AJAX 并非編程語言，
Ajax 允許通過與場景后面的 Web 服務器交換資料來異步更新網頁，這意味著可以更新網頁的部分，而不需要重新加載整個頁面，

原理

在這里插入圖片描述

核心物件XMLHttpRequest

所有現代瀏覽器都支持 XMLHttpRequest 物件，
XMLHttpRequest 物件用于同幕后服務器交換資料，這意味著可以更新網頁的部分，而不需要重新加載整個頁面，
在這里插入圖片描述

測驗

在這里插入圖片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax-js版</title>
		<script>
			function change(){
				// 1. 創建xhr物件,用于同幕后服務器交換資料
				var xhr = new XMLHttpRequest();
				// 2. 定義當 readyState 屬性發生變化時被呼叫的函式
				xhr.onreadystatechange=function(){
					//3. status是200表示請求成功,readyState是4表示請求已完成且回應已就緒
					if(this.status==200 && this.readyState==4){
						// document.getElementById("d1").innerHTML="hi ajax";
						//5.以字串回傳回應資料,并展示
						document.getElementById("d1").innerHTML=this.responseText;
					}
				}
				//3.規定請求的型別(請求方式,檔案位置,異步)
				xhr.open('get','1.json',true);
				//xhr.open('get','http://localhost:8080/car/get',true);
				//4.xhr將請求發送到服務器
				xhr.send();
			}
		</script>
	</head>
	<body>
		<!-- 點擊時,使用ajax修改文字 -->
		<div id='d1' onclick="change()">你好</div>
	</body>
</html>

console除錯網頁

Chrome

專業人用專業的工具，瀏覽器除錯谷歌、火狐最佳，使用F12打開除錯視窗，也可以快捷鍵打開：ctrl+shift+i，

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QK9Qms9o-1622526185011)(RackMultipart20210601-4-1vdjb36_html_dce9447ed4ea7532.png)]

支持自動補全，提示下，按tab鍵補全
清除日志
Console控制臺選單

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6y32hLZF-1622526185013)(RackMultipart20210601-4-1vdjb36_html_1faab11e37410c47.png)]

log

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ApmBOpKD-1622526185014)(RackMultipart20210601-4-1vdjb36_html_452ff1cab3407fbf.png)]

warn

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-qynkg3CR-1622526185016)(RackMultipart20210601-4-1vdjb36_html_12bf66c013182cde.png)]

table

以表格形式展現：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-eEb87EdJ-1622526185019)(RackMultipart20210601-4-1vdjb36_html_d037d642cdad2159.png)]

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292056.html

標籤：其他

上一篇：初識 JavaScript

下一篇：前端Ajax入門