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