基礎(chǔ)學(xué)習(xí)路徑
AJAX是Asynchronous javascript and xml 的縮寫,表示異步j(luò)avascript 和 xml ,是一種交互式網(wǎng)頁應(yīng)用開發(fā)技術(shù)。
AJAX是一些老技術(shù)的新應(yīng)用, 應(yīng)用到了html css javascript dom , 以XMLHttpRequest為技術(shù)核心實(shí)現(xiàn)網(wǎng)頁異步數(shù)據(jù)傳輸。
最大特點(diǎn)就是:網(wǎng)頁不用刷新進(jìn)行數(shù)據(jù)傳輸
用戶注冊(cè)
AJAX分頁效果
圖片加載瀑布流效果
傳統(tǒng)的數(shù)據(jù)提交方式
AJAX數(shù)據(jù)提交方式
通過上述對(duì)比,客戶端用戶部分減少了2個(gè)流程,交給了ajax去處理,那么就減少了用戶的等待時(shí)間,用戶體驗(yàn)大大的提升
? 減少服務(wù)器帶寬,按需獲得數(shù)據(jù)
注意:在一些有列表展示功能的地方優(yōu)勢(shì)特別突出
? 無刷新更新頁面,減少用戶的實(shí)際和心理等待時(shí)間
注:用戶注冊(cè),用戶登錄。多數(shù)據(jù)信息的展示
? 更好的用戶體驗(yàn),傳統(tǒng)數(shù)據(jù)提交會(huì)刷新頁面,易丟失用戶填寫數(shù)據(jù)
? 主瀏覽器都支持
XHR = new XMLHttpRequest();
創(chuàng)建請(qǐng)求頭使用OPEN,主要實(shí)現(xiàn)(請(qǐng)求類型,請(qǐng)求地址)
對(duì)象.open(請(qǐng)求類型GET/POST,請(qǐng)求地址,[同步true/異步false]);
默認(rèn):同步 True
//創(chuàng)建AJAX對(duì)象
var XHRObj = new XMLHttpRequest();
//創(chuàng)建請(qǐng)求頭
XHRObj.open('GET','demo.php');
主要實(shí)現(xiàn)請(qǐng)求服務(wù)器操作
對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
【HTML代碼】
<script type="text/javascript">
//創(chuàng)建AJAX對(duì)象
var XHRObj = new XMLHttpRequest();
//創(chuàng)建請(qǐng)求頭
XHRObj.open('GET','demo.php');
//發(fā)送請(qǐng)求 對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
XHRObj.send();
</script>
【PHP代碼】
<?php
echo 'test';
腳下留心:
一定要在服務(wù)器目錄下面運(yùn)行AJAX-發(fā)送請(qǐng)求.html,不能直接用瀏覽器瀏覽該文件
對(duì)象.responseText (獲取服務(wù)器響應(yīng)的字符串?dāng)?shù)據(jù))
對(duì)象.responseXML(獲取服務(wù)器響應(yīng)的xml數(shù)據(jù))
<script type="text/javascript">
//創(chuàng)建AJAX對(duì)象
var XHRObj = new XMLHttpRequest();
//創(chuàng)建請(qǐng)求頭
XHRObj.open('GET','demo.php');
//發(fā)送請(qǐng)求 對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
XHRObj.send();
//alert返回的數(shù)據(jù)
alert(XHRObj.responseText);
</script>
案例運(yùn)行結(jié)果
腳下留心:無法響應(yīng)數(shù)據(jù)
原因:在AJAX沒有完成請(qǐng)求這個(gè)時(shí)候是沒有返回值的,所以獲取數(shù)據(jù)是沒有結(jié)果的。
解決方法:通過判斷reaystate == 4 是否AJAX請(qǐng)求完成
Onreadystatechange 作用:ajax在請(qǐng)求的過程中發(fā)生任何狀態(tài)的變化都會(huì)調(diào)用該方法
Readystate 作用:返回ajax的請(qǐng)求狀態(tài)
狀態(tài)說明:
最終代碼:以及結(jié)果
思考:為什么沒有打印0~4
<script type="text/javascript">
//創(chuàng)建AJAX對(duì)象
var XHRObj = new XMLHttpRequest();
//創(chuàng)建請(qǐng)求頭
XHRObj.open('GET','demo.php');
//發(fā)送請(qǐng)求 對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
console.log(XHRObj.readyState);
//發(fā)送請(qǐng)求
XHRObj.send();
//當(dāng)請(qǐng)求狀態(tài)發(fā)送變化時(shí)ajax會(huì)自動(dòng)調(diào)用該方法onreadystatechange
XHRObj.onreadystatechange=function(){
console.log(XHRObj.readyState);
if(XHRObj.readyState==4){
console.log(XHRObj.responseText);
}
}
console.log(XHRObj.readyState+'sdf');
</script>
說明:
程序是從上往下進(jìn)行的, 里面的代碼是等發(fā)送異步請(qǐng)求完了才去執(zhí)行的。
狀態(tài)0是無法獲取的,因?yàn)閷?shí)例化AJAX的對(duì)象,然而監(jiān)聽需要對(duì)象對(duì)象里面的屬性來完成,所以0裝就是實(shí)例化對(duì)象的時(shí)候。
思考:避免接口寫錯(cuò)
例如:
在實(shí)際使用中,我們?yōu)榱酥挥性谡?qǐng)求的接口正確的時(shí)候獲取相應(yīng)的數(shù)據(jù),一般我們要判斷返回的HTTP狀態(tài)是否正確,
使用:
對(duì)象.status == 200
<script type="text/javascript">
//創(chuàng)建AJAX對(duì)象
var XHRObj = new XMLHttpRequest();
//創(chuàng)建請(qǐng)求頭
XHRObj.open('GET','demo1.php');
//發(fā)送請(qǐng)求 對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
// console.log(XHRObj.readyState);
//發(fā)送請(qǐng)求
XHRObj.send();
//當(dāng)請(qǐng)求狀態(tài)發(fā)送變化時(shí)ajax會(huì)自動(dòng)調(diào)用該方法onreadystatechange
XHRObj.onreadystatechange=function(){
// console.log(XHRObj.readyState);
if(XHRObj.readyState == 4 && XHRObj.status == 200){
console.log(XHRObj.responseText);
}
// else{
// //以郵件或者短信的形式發(fā)送通網(wǎng)站管理員
// alert('服務(wù)器錯(cuò)誤,很忙......');
// }
}
// console.log(XHRObj.readyState+'sdf');
</script>
判斷用戶名admin是否存在,當(dāng)存在的時(shí)候返回【不可用】,當(dāng)不存在的時(shí)候返回【可用】
明確需求:
第一步:給按鈕增加點(diǎn)擊事件
第二步:獲取用戶輸入的值username
第三步:使用AJAX將內(nèi)容發(fā)送給服務(wù)器端PHP文件
第四步:編寫PHP文件checkuser.php 判斷用戶是否存在,返回結(jié)果
第五步:將PHP返回的結(jié)果彈出來
<!--
第一步:給按鈕增加點(diǎn)擊事件
第二步:獲取用戶輸入的值username
第三步:使用AJAX將內(nèi)容發(fā)送給服務(wù)器端PHP文件
第四步:編寫PHP文件checkuser.php 接受參數(shù),并且判斷用戶是否存在,返回結(jié)果
第五步:將PHP返回的結(jié)果彈出來
-->
<script type="text/javascript">
//按鈕綁定事件,給input增加ID屬性
var checkObj = document.getElementById('check');
checkObj.onclick = function(){
var username = document.getElementById('username').value;
//創(chuàng)建ajax對(duì)象
var XHRObj = new XMLHttpRequest();
//創(chuàng)建請(qǐng)求頭,設(shè)置請(qǐng)求發(fā)送的地址和類型,并且將參數(shù)傳遞給服務(wù)端
XHRObj.open('get','check.php?username='+username);
//獲取服務(wù)器端返回的數(shù)據(jù)
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
alert(XHRObj.responseText);
}
}
//發(fā)送請(qǐng)求
XHRObj.send();
}
</script>
<?php
//定義一個(gè)用戶數(shù)組
$user = array('admin','xiaoming','xiaohong','xiaoqiang');
//獲取傳遞的參數(shù)
$username = $_GET['username'];
//判斷用戶是否存在在數(shù)組中
if(in_array($username,$user)){
echo '不可用';
}else{
echo '可用';
}
進(jìn)化版本
1)進(jìn)化要求
當(dāng)用戶名可用的時(shí)候后面增加√說可用,當(dāng)用戶名不可用的時(shí)候出現(xiàn)一個(gè)×提示當(dāng)前用戶名太火,請(qǐng)換一個(gè)
HTML代碼
<style>
.error{
color: red;
font-size: 14px;
}
.green{
color: green;
font-size: 14px;
}
</style>
<body>
<!-- <span class="error">×此用戶名太首歡迎,請(qǐng)換一個(gè)</span>-->
<!-- <span class="green">√恭喜你,該用戶可用</span>-->
<table border="1">
<th colspan="2">用戶注冊(cè)</th>
<tr>
<td><input id="username" name="username" type="text"/><div id='error'></div></td>
<td><input id="check" type="button" value="檢測(cè)用戶"/></td>
</tr>
</table>
</body>
<!--
第一步:給按鈕增加點(diǎn)擊事件
第二步:獲取用戶輸入的值username
第三步:使用AJAX將內(nèi)容發(fā)送給服務(wù)器端PHP文件
第四步:編寫PHP文件checkuser.php 接受參數(shù),并且判斷用戶是否存在,返回結(jié)果
第五步:將PHP返回的結(jié)果彈出來
-->
<script type="text/javascript">
//按鈕綁定事件,給input增加ID屬性
var checkObj = document.getElementById('check');
checkObj.onclick = function(){
var username = document.getElementById('username').value;
//創(chuàng)建ajax對(duì)象
var XHRObj = new XMLHttpRequest();
//創(chuàng)建請(qǐng)求頭,設(shè)置請(qǐng)求發(fā)送的地址和類型,并且將參數(shù)傳遞給服務(wù)端
XHRObj.open('get','check.php?username='+username);
//獲取服務(wù)器端返回的數(shù)據(jù)
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
// alert(XHRObj.responseText);
if(XHRObj.responseText =='可用'){
document.getElementById('error').innerHTML='<span class="green">√恭喜你,該用戶沒有被注冊(cè)</span>';
}else{
document.getElementById('error').innerHTML=' <span class="error">×此用戶名太首歡迎,請(qǐng)換一個(gè)</span>';
}
}
}
//發(fā)送請(qǐng)求
XHRObj.send();
}
</script>
數(shù)據(jù)方面:GET受瀏覽器的影響
POST 原則上是不受限制的,可以通過PHP配置POST_MAX_SIZE進(jìn)行更改
安全方面:POST比GET要安全
文件上傳:GET不能進(jìn)行文件上傳
說明:在請(qǐng)求地址后面增加參數(shù),例如:demo.php?a=111&b=222&c=333
【HTML代碼】
<script type="text/javascript">
//創(chuàng)建AJAX對(duì)象
var XHRObj = new XMLHttpRequest();
//創(chuàng)建請(qǐng)求頭,請(qǐng)求方式,請(qǐng)求鏈接
XHRObj.open('get','test.php?a=111&b=222&c=333');
//發(fā)送請(qǐng)求
XHRObj.send();
</script>
【PHP代碼】
<?php
var_dump($_GET);
Open(‘POST’,請(qǐng)求地址);
設(shè)置發(fā)送的數(shù)據(jù)格式,采用URL編碼格式
對(duì)象.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);
對(duì)象.send(發(fā)送的數(shù)據(jù));
<script type="text/javascript">
//創(chuàng)建AJAX對(duì)象
var XHRObj = new XMLHttpRequest();
XHRObj.onreadystatechange = function() {
if (XHRObj.readyState == 4) {
alert(XHRObj.responseText);
}
}
//創(chuàng)建請(qǐng)求頭,請(qǐng)求方式,請(qǐng)求鏈接
XHRObj.open('post','test.php');
//發(fā)送post的數(shù)據(jù)
var postData = 'name=123123&age=rrr';
//設(shè)置數(shù)據(jù)編碼格式,使用URL編碼格式
XHRObj.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//發(fā)送請(qǐng)求
XHRObj.send(postData);
</script>
【PHP代碼】
<?php
var_dump($_POST);
效果
4.練習(xí):表單無刷新數(shù)據(jù)錄入
同步:等待服務(wù)器響應(yīng)完成在執(zhí)行下一段JS代碼 (阻塞模式)
異步:不等服務(wù)器響應(yīng)完成直接執(zhí)行下一段JS代碼(非阻塞模式)
設(shè)置open(方式,請(qǐng)求地址,false/同步);
HTML【代碼】
<script type="text/javascript">
//創(chuàng)建AJAX對(duì)象
var XHRObj = new XMLHttpRequest();
//創(chuàng)建請(qǐng)求頭
XHRObj.open('GET','demo.php',false);
//時(shí)時(shí)監(jiān)控
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4){
console.log('111');
}
}
//發(fā)送請(qǐng)求 對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
XHRObj.send();
console.log('js執(zhí)行完成');
</script>
【PHP代碼】
為了增加延遲效果使用sleep
<?php
sleep(8);
echo 'test';
【HTML代碼】
<script type="text/javascript">
//創(chuàng)建AJAX對(duì)象
var XHRObj = new XMLHttpRequest();
//創(chuàng)建請(qǐng)求頭
XHRObj.open('GET','demo.php');
//時(shí)時(shí)監(jiān)控
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4){
console.log('111');
}
}
//發(fā)送請(qǐng)求 對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
XHRObj.send();
console.log('js執(zhí)行完成');
</script>
【PHP代碼】
<?php
sleep(8);
echo 'test';
我們?cè)贋g覽一些網(wǎng)站的時(shí)候?yàn)g覽器為了方便用戶再次訪問的時(shí)候增加用戶訪問體驗(yàn)會(huì)將一些靜態(tài)資源文件緩存到本地
緩存的位置在:
選中IE瀏覽器右鍵
打開
靜態(tài)緩存目錄就出現(xiàn)再這里面了
說明:IE存在緩存
代碼設(shè)置:?t=Math.random()
缺點(diǎn):
1.不能保證URL絕對(duì)唯一
2.產(chǎn)生大量緩存文件
代碼設(shè)置:?t=new Date().getTime(); //取得毫秒時(shí)間戳
優(yōu)點(diǎn):保證URL絕對(duì)唯一
缺點(diǎn):依然產(chǎn)生大量緩存文件
代碼設(shè)置:對(duì)象.setRequestHeader("If-Modified-Since","0");
原理分析:
If-Modified-Since是標(biāo)準(zhǔn)的HTTP請(qǐng)求頭標(biāo)簽,在發(fā)送HTTP請(qǐng)求時(shí),把瀏覽器端緩存頁面的最后修改時(shí)間一起發(fā)到服務(wù)器去,服務(wù)器會(huì)把這個(gè)時(shí)間與服務(wù)器上實(shí)際文件的最后修改時(shí)間進(jìn)行比較。
如果時(shí)間一致,那么返回HTTP狀態(tài)碼304(不返回文件內(nèi)容),客戶端接到之后,就直接把本地緩存文件顯示到瀏覽器中。
如果時(shí)間不一致,就返回HTTP狀態(tài)碼200和新的文件內(nèi)容,客戶端接到之后,會(huì)丟棄舊文件,把新文件緩存起來,并顯示到瀏覽器中。
代碼設(shè)置:header("Cache-Control: no-cache, must-revalidate");
原理分析:
利用php的header函數(shù)向響應(yīng)頭中寫數(shù)據(jù),寫的是告訴客戶端:不要對(duì)本次的結(jié)果進(jìn)行緩存。
這種做法,可以從根本上解決緩存問題,不產(chǎn)生任何緩存文件。
普通字符串文本格式:responseText
XML數(shù)據(jù)格式:responseXML
JSON 字符串?dāng)?shù)據(jù)格式:responseText (在實(shí)際工作中用到最多,最廣泛的格式)
<script type="text/javascript">
//創(chuàng)建AJAX對(duì)象
var XHRObj = new XMLHttpRequest();
//創(chuàng)建請(qǐng)求頭
XHRObj.open('GET','text.php');
//時(shí)時(shí)監(jiān)控
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
document.getElementById('content').innerHTML=XHRObj.responseText;
}
}
//發(fā)送請(qǐng)求 對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
XHRObj.send();
</script>
<body>
<div id="content"></div>
</body>
<?php
echo '<h1>返回的文本</h1>';
最終效果
<script type="text/javascript">
//創(chuàng)建AJAX對(duì)象
var XHRObj = new XMLHttpRequest();
//創(chuàng)建請(qǐng)求頭
XHRObj.open('GET','xml.php');
//時(shí)時(shí)監(jiān)控
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
var xmlObj = XHRObj.responseXML;
//以前獲取html文檔我們使用 document.getElementByTagName()
books = xmlObj.getElementsByTagName('book');
for(i=0;i<books.length;i++){
//獲取第二級(jí)的值我們使用childen 方法
for(j=0;j<books[i].children.length;j++){
console.log(books[i].children[j].innerHTML);
}
}
}
}
//發(fā)送請(qǐng)求 對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
XHRObj.send();
</script>
1.2PHP代碼
首先確保PHP寫的xml文件能再瀏覽器端訪問
<?php
header('Content-Type:text/xml; charset=utf-8');
echo '<?xml version="1.0" encoding="utf-8"?>
<books>
<book>
<name>西游記</name>
<price>50.12</price>
</book>
<book>
<name>三國演義</name>
<price>876.12</price>
</book>
</books>
';
JSON(javascript Object Notation js 對(duì)象標(biāo)記) 是一種輕量級(jí)的數(shù)據(jù)交換格式。
數(shù)據(jù)格式比較簡(jiǎn)單,易于讀寫, 格式都是壓縮的,占用帶寬小
易于解析這種語言,客戶端JavaScript可以簡(jiǎn)單的通過eval()進(jìn)行JSON數(shù)據(jù)的讀取
因?yàn)镴SON格式能夠直接為服務(wù)器端代碼使用, 大大簡(jiǎn)化了服務(wù)器端和客戶端的代碼開發(fā)量, 但是完成的任務(wù)不變, 且易于維護(hù)
PHP端生成JSON數(shù)據(jù)使用:json_encode(數(shù)組數(shù)據(jù)格式);
PHP端解析JSON數(shù)據(jù)使用:json_decode(待解碼數(shù)據(jù),true/false);
說明:false 解碼出來的數(shù)據(jù)是一個(gè)對(duì)象,true,解碼出來的是一個(gè)數(shù)組
由于我們返回值的處理使用的是responseText 格式
語法格式:JSON.parse(字符串);
作用:從一個(gè)字符串中解析出json數(shù)據(jù)對(duì)象
前提:字符串必須是json格式的字符串
用戶會(huì)員注冊(cè)功能,用戶填寫好根據(jù)規(guī)則進(jìn)行驗(yàn)證,如果驗(yàn)證成功提示用戶注冊(cè)成功。
驗(yàn)證規(guī)則:
1.用戶名不能為空
2.用戶名必須是由數(shù)字和字母組成,而且是在6~8位之間
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>AJAX-用戶注冊(cè)</title>
</head>
<style>
dd{float: left;}
</style>
<body>
<div>
<dl>
<dd>用戶名</dd>
<dd><input type="text" name="username" id="username"></dd>
<dd><input type="button" id="regbtn" value="注冊(cè)"></dd>
</dl>
</div>
</body>
<script type="text/javascript">
//給注冊(cè)按鈕增加click事件
var regbtn = document.getElementById('regbtn');
regbtn.onclick = function(){
//獲取用戶輸入的值
var username = document.getElementById('username').value;
//創(chuàng)建AJAX對(duì)象
var XHRObj = new XMLHttpRequest();
//打開對(duì)象
XHRObj.open('get','reg.php?username='+username);
//實(shí)時(shí)監(jiān)控AJAX運(yùn)行狀態(tài)
XHRObj.onreadystatechange = function(){
//判斷服務(wù)器是否響應(yīng)成功
if(XHRObj.readyState==4 && XHRObj.status == 200){
//將json數(shù)據(jù)轉(zhuǎn)換成對(duì)象
jsonObj = JSON.parse(XHRObj.responseText);
//判斷用戶是否操作成功進(jìn)行頁面跳轉(zhuǎn)
if(jsonObj.state ==1){
location.href='success.html';
}else{
alert(jsonObj.msg);
}
}
}
//發(fā)送請(qǐng)求
XHRObj.send();
}
</script>
</html>
最近寫博客真的是太痛苦了,倒不是寫博客本身,而是寫完之后往多個(gè)平臺(tái)發(fā)布的過程,一不注意就是十多分鐘往上的時(shí)間消耗。
為了解決這個(gè)問題,之前立項(xiàng)的“解決自媒體一鍵多平臺(tái)發(fā)布”項(xiàng)目必須得立刻著手完善了,爭(zhēng)取早日讓自己從發(fā)布這件事情上解脫出來專心寫文章。
【hxsfx的JavaScript庫】這個(gè)系列基本上是為“一鍵多平臺(tái)發(fā)布”項(xiàng)目打基礎(chǔ)用的。之所以把各個(gè)功能模塊拆分出來,是為了盡量讓小伙伴能夠復(fù)制即用(在兼容性方面,因?yàn)閭€(gè)人能力的原因,幾乎只會(huì)兼容Chrome瀏覽器)。
AJAX 是異步的 JavaScript 和 XML(Asynchronous JavaScript And XML),開發(fā)hxsfx.ajax庫的主要目的就是希望通過異步加載HTML,從而盡量避免直接在js中寫HTML來刷新頁面內(nèi)容。
hxsfx.ajax這個(gè)庫與jquery的ajax功能基本一致,不過短時(shí)間內(nèi)應(yīng)該是寫不到人家那么完善的。哈哈~
各位小伙伴別問,為什么不用jquery的ajax而要自己再寫一個(gè)呢?
問就是,博主喜歡造輪子。開玩笑了~
其實(shí)原因是為了減少三方庫的依賴,達(dá)到對(duì)項(xiàng)目的全面掌控。
項(xiàng)目地址:https://github.com/hxsfx/hxsfx_web_tools
要自己開發(fā)一個(gè)ajax庫,需要借助Web API接口中的XMLHttpRequest(XHR)對(duì)象。
XMLHttpRequest(XHR)對(duì)象用于與服務(wù)器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請(qǐng)求特定 URL,獲取數(shù)據(jù)。這允許網(wǎng)頁在不影響用戶操作的情況下,更新頁面的局部?jī)?nèi)容。
//hxsfx.js
(function () {
window.hxsfx = {};
})();
//ajax.js
(function () {
window.hxsfx.ajax = {
};
})();
//ajax.js
(function () {
window.hxsfx.ajax = {
loadHTML: function (ele, url) {
}
};
})();
//ajax.js
(function () {
window.hxsfx.ajax = {
loadHTML: function (ele, url) {
const httpRequest = new XMLHttpRequest();
httpRequest.open('GET', url, true);
httpRequest.onreadystatechange = function () {
//為了讓代碼更健壯,使用try...catch來捕獲返回狀態(tài)判斷和處理HTML代碼的異常
try {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
//在這處理返回的HTML
}
}
else {
console.log("【ajax.get(" + url + ")請(qǐng)求出錯(cuò)】");
}
}
}
catch (ex) {
console.log("【ajax.get(" + url + ")異常】" + ex.message);
}
};
httpRequest.send();
}
};
})();
//ajax.js
//時(shí)間戳用來解決加載頁面緩存的問題
var urlTimeStamp = "timeStamp=" + new Date().getTime();
url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
//ajax.js
ele.innerHTML = httpRequest.responseText;
var scriptElements = ele.getElementsByTagName("script");
for (var i = 0; i < scriptElements.length; i++) {
var scriptElement = document.createElement("script");
scriptElement.setAttribute("type", "text/javascript");
var src = scriptElements[i].getAttribute("src");
if (src) {
//因?yàn)榧虞d的src路徑是之前相對(duì)加載HTML頁面的,需要修改為當(dāng)前頁面的引用路徑
src = url.substring(0, url.lastIndexOf('/') + 1) + src;
src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
scriptElement.setAttribute("src", src);
}
var scriptContent = scriptElements[i].innerHTML;
if (scriptContent) {
scriptElement.innerHTML = scriptContent;
}
//用生成的script元素去替換html中的script標(biāo)簽,以此來激活script代碼
ele.replaceChild(scriptElement, scriptElements[i]);
}
//ajax.js
(function () {
window.hxsfx.ajax = {
loadHTML: function (ele, url) {
//時(shí)間戳用來解決加載頁面緩存的問題
var urlTimeStamp = "timeStamp=" + new Date().getTime();
url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
const httpRequest = new XMLHttpRequest();
httpRequest.open('GET', url, true);
httpRequest.onreadystatechange = function () {
//為了讓代碼更健壯,使用try...catch來捕獲返回狀態(tài)判斷和處理HTML代碼的異常
try {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
ele.innerHTML = httpRequest.responseText;
var scriptElements = ele.getElementsByTagName("script");
for (var i = 0; i < scriptElements.length; i++) {
var scriptElement = document.createElement("script");
scriptElement.setAttribute("type", "text/javascript");
var src = scriptElements[i].getAttribute("src");
if (src) {
//因?yàn)榧虞d的src路徑是之前相對(duì)加載HTML頁面的,需要修改為當(dāng)前頁
src = url.substring(0, url.lastIndexOf('/') + 1) + src;
src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
scriptElement.setAttribute("src", src);
}
var scriptContent = scriptElements[i].innerHTML;
if (scriptContent) {
scriptElement.innerHTML = scriptContent;
}
//用生成的script元素去替換html中的script標(biāo)簽,以此來激活script代
ele.replaceChild(scriptElement, scriptElements[i]);
}
}
}
else {
console.log("【ajax.get(" + url + ")請(qǐng)求出錯(cuò)】");
}
}
}
catch (ex) {
console.log("【ajax.get(" + url + ")異常】" + ex.message);
}
};
httpRequest.send();
}
};
})();
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js庫測(cè)試</title>
<script src="Scripts/hxsfx/hxsfx.js"></script>
<script src="Scripts/hxsfx/ajax.js"></script>
<script>
window.onload = function () {
//調(diào)用ajax中的loadHTML方法
window.hxsfx.ajax.loadHTML(document.getElementById("ContentContainer"), "Views/test/testPage.html");
};
</script>
</head>
<body>
<div id="ContentContainer"></div>
</body>
</html>
<style>
div#TestPageContainer {
height: 300px;
width: 300px;
background-color: #F0F0F0;
}
</style>
<script src="../../Scripts/hxsfx/test/test.js"></script>
<script>
function updateBackgroundColor() {
try {
var backgroundColor = '#' + (Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0'));
document.getElementById("TestPageContainer").style.backgroundColor = backgroundColor;
}
catch (ex) {
console.log(ex.message);
}
}
</script>
<div id="TestPageContainer">
<button onclick="updateBackgroundColor()">更改背景色</button>
<button onclick="modifyPFontColor()">更改下面一句話的字體顏色</button>
<p id="P">這兒是一句話。</p>
</div>
以上內(nèi)容只是hxsfx.ajax庫的開始,后續(xù)的內(nèi)容更新小伙伴可以通過訪問Github項(xiàng)目地址進(jìn)行獲取。
題
在瀏覽器中瀏覽了網(wǎng)頁之后,下一步就是查看其HTML源代碼。盡管這種方法很簡(jiǎn)單,但仍然非常值得去做。查看源代碼有兩項(xiàng)作用;它可以幫助你發(fā)現(xiàn)最明顯的安全問題,但最重要的是,它使你能夠?yàn)閷淼臏y(cè)試建立一個(gè)比較基準(zhǔn)。對(duì)攻擊失敗之前和之后的源代碼進(jìn)行比較,你就能夠調(diào)整你是輸入,了解到哪些通過了,哪些沒有通過,并再次嘗試。
解決方案
我們推薦使用Firefox,你已經(jīng)在2.1節(jié)中學(xué)會(huì)了它的安裝。首先瀏覽應(yīng)用中你所感興趣的網(wǎng)頁。
右擊,并選擇“查看源文件”或從菜單欄選擇“查看”→ "源文件"。
我們推薦Firefox的主要原因是因?yàn)樗牟噬@示。如圖3-1所示,使用這種顯示方式,HTML標(biāo)簽和屬性都要容易理解得多。相比之下,Internet Explorer在記事本中打開網(wǎng)頁。就會(huì)難讀得多。
討論
作為比較基準(zhǔn),訪問HTML源代碼會(huì)非常有幫助。最常見的Web漏洞涉及到向Web應(yīng)用提供惡意輸入以修改HTML源代碼。在測(cè)試這些漏洞時(shí),驗(yàn)證測(cè)試通過或失敗的最簡(jiǎn)單的方法就是檢查源代碼是否被惡意更改。
當(dāng)心一切未經(jīng)更改就寫進(jìn)源代碼中的輸入。我們將在第8章討論輸入驗(yàn)證,然后許多應(yīng)用根本就不對(duì)輸入進(jìn)行驗(yàn)證。在開始討論更加復(fù)雜的內(nèi)容之前,不妨在源代碼中搜索你剛剛提供的輸入。然后,使者將可能的危險(xiǎn)值作為輸入,比如HTML標(biāo)簽或JavaScript,并注意它是否未經(jīng)修改就直接顯示在源代碼中。如果是這樣的話,那么這就是個(gè)警示信號(hào)。
注意,你可以像搜索任何其他Firefox頁面那樣搜索HTML源代碼(根據(jù)具體情況,使用Ctrl+F或(Windows徽標(biāo)鍵)+F)。
在以后的秘訣和章節(jié)中,我們將使用工具來自動(dòng)搜索、解析和比較源代碼。記住基本要點(diǎn);通常,可以通過重復(fù)地手動(dòng)檢查源代碼以檢查怎樣做才能使它通過篩選程序或編碼找出漏洞。
注意:你在這里看到的靜態(tài)源代碼不能反映JavaScript或AJAX功能所做的任何更改。
搜索微信公眾號(hào):TestingStudio霍格沃茲的干貨都很硬核
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。