正常函數的調用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>函數的調用</title>
</head>
<body>
<script>
function f1(){
console.log('1111111111111');
console.log('1111111111111');
console.log('1111111111111');
console.log('1111111111111');
console.log('1111111111111');
}
function f2(){
console.log('222222222222222');
console.log('222222222222222');
f1();
console.log('222222222222222');
console.log('222222222222222');
console.log('222222222222222');
}
function f3(){
console.log('3333333333333333');
console.log('3333333333333333');
f2();
console.log('3333333333333333');
console.log('3333333333333333');
console.log('3333333333333333');
}
f3()
</script>
</body>
</html>
調用順序：
調用f3函數，輸出2次33333，然后調用f2函數，輸出2次22222，調用f1函數，輸出5次1111111；
f1的代碼執行完成后會回到被調用的位置接着執行代碼，此時輸出3次222222，然后回到f2被調用的位置，輸出3次333
回調函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>回調函數</title>
</head>
<body>
<script>
function getResult(n1,n2,fn){
var result = fn(n1,n2)
return result;
}
var res = getResult(120,230, function (a, b) {
return a + b;
})
console.log(res);
</script>
</body>
</html>
調用順序：
調用getResult時傳入3個參數，第3個是一個匿名函數，函數里面計算ab的和，getResult接受到120，230參數分別賦值給n1和n2，然后調用fn函數進行計算值，返回結果給result，返回result給res接收，最后控制台輸出res就得到350了。
Get和Post請求的差異
封轉AJAX異步發送請求的過程
目錄結構：
myAjax.js
/* 1.創建異步對象 2. 設置請求行 3. 設置請求頭 4. 設置請求體 5. 設置監視異步對象狀態 */ // 這種方式不好，參數固定死了，不靈活，順序只能這樣 // ajax是一個函數，如果引入到別的文件當中，有可能會靠變量或函數的污染 /* function ajax(params) { var xhr = new XMLHttpRequest(); // 設置請求行 xhr.open('get', '/getStudentsJSON'); // 設置請求頭 // get請求可以省略這一步 // 設置請求體 xhr.send(null); // 監聽異步對象狀態 xhr.onreadystatechange = function () { // 判斷數據是否全部接收完成 if (xhr.status == 200 && xhr.readyState == 4) { // 由於服務端響應過來的json數據是字符串類型的，這里需要把它轉換成對象或者數組類型，使用JSON.parse()方法 var obj = JSON.parse(xhr.responseText); console.log(obj); } } } */ var $ = { // 創建一個名為convert方法，把對象轉換成拼接字符串的方法 convertTostring: function(obj){ var str = ''; for(var key in obj){ str += key + '=' + obj[key] + '&'; console.log(str); } console.log(str.slice(0,-1)); return str.slice(0,-1); }, // 代碼沒問題 // 創建一個名為ajax方法，進行使用異步對象發送請求 ajax: function(params) { // 傳入的參數是一個對象 // 這個parmas對象里面應該包括：type，url，data，callback // 定義變量獲取數據, 短路運算 var type = params.type || 'get'; // 獲取請求的方式 var url = params.url || location.pathname; //location.href也可以; 獲取要發送的目標地址 var data = this.convertTostring(params.data || {}); // 獲取要發送的數據 var success = params.success; var dataType = params.dataType || 'text/plain'; // 什么都沒有就以純字符串 // 創建異步AJAX對象 var xhr = new XMLHttpRequest(); if(type=='get'){ url = url+"?"+data; //http://baidu.com:3002/submit?userName=jack&passPWd=jack1234 data = null; } // 設置請求行 xhr.open(type, url); // 設置請求頭 if(type=='post'){ xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } // get請求可以省略這一步 // 設置請求體 xhr.send(data); // 這里的data就是通過convertTostring方法拼接的字符串 // 監聽異步對象狀態 xhr.onreadystatechange = function () { // 判斷數據是否全部接收完成 if (xhr.status == 200 && xhr.readyState == 4) { var res; // 把服務器響應回來的數據進行判斷然后保存起來 if(dataType =='json'){ res = JSON.parse(xhr.responseText) }else if(dataType=='xml'){ res = xhr.responseXML; }else{ res = xhr.responseText; // 當成純文本字符串接收 } success(res); } } } }
studentsJSON.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>studentsJSON頁面</title>
<!-- <script src="/assets/js/myAjax.js"></script> -->
<!-- 引入jQuery文件 -->
<script src="/assets/js/jquery-1.12.2.js"></script>
</head>
<body>
<h2>這是studentsJSON頁面</h2>
<input type="button" id="btn" value="獲取JSON數據">
<table border="1">
<thead>
<th>id</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>專業</th>
<th>地址</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小蘇</td>
<td>男</td>
<td>18</td>
<td>前端</td>
<td>佛山</td>
</tr>
</tbody>
</table>
<script>
// 查找元素
var btn = document.querySelector('#btn');
var tbody = document.querySelector('tbody');
// 給btn綁定點擊事件
btn.addEventListener('click', function () {
$.ajax({
type: 'get',
url: '/getStudentsJSON',
dataType: 'json', // 告訴ajax函數，將返回來的數據以json的形式進行處理
// 創建一個方法
success: function (obj) {
var data = obj.data;
var str = '';
for (var i = 0; i < data.length; i++) {
// 套用ES6的模版快速拼接字符串
str += `
<tr>
<td>${data[i].id}</td>
<td>${data[i].name}</td>
<td>${data[i].gender}</td>
<td>${data[i].age}</td>
<td>${data[i].zhuanye}</td>
<td>${data[i].address}</td>
</tr>
`
}
// 渲染頁面中的數據
tbody.innerHTML = str;
},
})
})
</script>
</body>
</html>
studentsXML.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>studentsXML頁面</title>
<!-- 引入封轉好的AJAX文件 -->
<script src="/assets/js/myAjax.js"></script>
</head>
<body>
<h2>這是一個使用XML數據渲染的列表</h2>
<input type="button" id="btn" value="獲取XML數據">
<table border="1">
<thead>
<th>id</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>專業</th>
<th>地址</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小蘇</td>
<td>男</td>
<td>18</td>
<td>前端</td>
<td>佛山</td>
</tr>
</tbody>
</table>
<script>
// 查找元素
var btn = document.querySelector('#btn');
var tbody = document.querySelector('tbody');
// 給按鈕綁定點擊事件
btn.addEventListener('click', function () {
// 調用ajax方法傳入參數
$.ajax({
type: 'get', // 請求方式
url: '/getStudentsXML', // 服務器接口地址
dataType: 'xml', // 服務器返回的數據格式
success: function(obj){ // 回調函數
console.log(obj);
console.log(typeof(obj));
var items = obj.querySelector('items').children;
var str = '';
for(var i=0; i<items.length; i++){
str += `
<tr>
<td>${items[i].querySelector('id').innerHTML}</td>
<td>${items[i].querySelector('name').innerHTML}</td>
<td>${items[i].querySelector('gender').innerHTML}</td>
<td>${items[i].querySelector('age').innerHTML}</td>
<td>${items[i].querySelector('zhuanye').innerHTML}</td>
<td>${items[i].querySelector('address').innerHTML}</td>
</tr>
`
}
tbody.innerHTML = str;
}
});
})
</script>
</body>
</html>
如果不想手動封裝AJAX，可以使用JQuery，直接引入jQ文件，其他不需要改，直接$.ajax({傳參})就可以了。