1.Ajax封裝方法
自封裝Ajax請求檔案，其實就是將原生的Ajax的請求代碼抽象為一個函式，
然后單獨生成一個js檔案保存，用到Ajax的時候引入檔案，呼叫函式的程序，
封裝Ajax大致步驟如下：
⑴ 提供創建xhr物件的兼容性函式
⑵ 提供發送請求的對外介面
⑶ 設計并約定對外介面的引數規格
⑷ 實作對外介面中引數處理
⑸ 實作對外介面中相應處理
⑹ 實作對外介面中發送處理
⑺ 設定命名空間，避免全域變數污染
2.Ajax封裝實作
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自封裝Ajax測驗</title>
<script src="https://www.cnblogs.com/husa/archive/2021/02/01/privyAjaxUnit.js"></script>
</head>
<body>
<button>發送測驗</button>
<script>
var btn=document.querySelector('button');
btn.onclick=function () {
myAjax({
type:'post',
url:'privyAjax.php',
data:{
uName:'Rebecca',
uCode:'111111'
},
success:function (res) {
console.log(res);
}
});
}
</script>
</body>
</html>
//模擬jQ中的Ajax創建myAjax方法，
function myAjax(paramsObj) {
//判斷引數物件中的請求方式，請求方式為“get”時
if (paramsObj.type.toLowerCase()=='get'){
var arr=[];
for (var ki in paramsObj.data){
//paramsObj.data為物件型別資料，通過for in方法將其轉為陣列
var str=ki+'='+paramsObj.data[ki];
arr.push(str);
}
// 由于get方法傳參需要是字串格式，通過join方法將陣列轉為字串,并使用“&”拼接，
var paramStr=arr.join('&');
// 將字串格式的引數拼接到“url”，但拼接之前有必要判斷一下呼叫Ajax時，
// url是否已有部分引數或傳參符號“?”，通過三目運算使用indexof方法遍歷查找“?”，
paramsObj.url+=paramsObj.url.indexOf('?')==-1?'?'+paramStr:'&'+paramStr;
// 判斷引數物件中的請求方式，請求方式為“post”時
}else if (paramsObj.type.toLowerCase()=='post'){
var formData=https://www.cnblogs.com/husa/archive/2021/02/01/new FormData();
for (var ki in paramsObj.data){
formData.append(ki,paramsObj.data[ki]);
}
}else{
console.log('無該種請求方式！')
}
// 創建xhr物件
var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('');
xhr.onreadystatechange=function () {
if (xhr.readyState==4){
if (xhr.status==200){
//呼叫回呼函式，并將后臺回傳的資料決議后傳參，
paramsObj.success(JSON.parse(xhr.responseText));
}
}
}
// 準備發送請求
xhr.open(paramsObj.type, paramsObj.url, true);
// 發送請求
if (paramsObj.type.toLowerCase()=='get'){
xhr.send(null);
}else if (paramsObj.type.toLowerCase()=='post'){
xhr.send(formData);
}else {
console.log('無該種請求方式，請求發送失敗！')
}
}
/*自封裝Ajax函式的創建程序，本質就是以引數化的形式實作原生Ajax請求，
上述代碼中從第4行到第26行，都是為了判斷請求方式，進而根據不同的請求方式生成“url”或“ForMData”*/
//myAjax方法創建完成后，可以將其封裝到“(function(){}())”這個自執行函式中，
/*(function (){
function myAjax(paramsObj) {...}
// 可以將創建好的myAjax方法系結到“window”物件，通過window呼叫
window.myAjax=myAjax;
}());*/
<?php
$suc=array('msg'=>'ok');
if($_POST){
$suc['info']=$_POST;
}else if($_GET){
$suc['info']=$_GET;
}else{
$suc['info']='無此種請求方式';
};
echo json_encode($suc);
?>
3.跨域
所謂跨域，是指前臺訪問路徑不符合同源政策時即為跨域，
同源政策，是兩個路徑是否在同一臺服務器下的判斷標準，
判斷標準，三要素（網路協議、主域名或IP、埠號）相同則視為同一臺服務器，否則反之，
Ajax不能發送跨域請求，出現跨域時會報錯，
解決Ajax跨域問題兩種常用方法：
⑴ 通過后臺請求跨域檔案解決，后臺不存在跨域問題；
PHP中訪問跨域url路徑，使用“file_get_contents('跨域url')”方法
后臺獲取跨域檔案后，前臺再使用Ajax方法獲取后臺資料
⑵ 使用“jsonp”通過前臺解決，
jsonp解決方案不使用Ajax方法，而是使用其它既具有前后臺互動、請求異步以及
鏈接PHP后臺這三個核心功能，又可以訪問外部檔案的標簽替代Ajax，
<script>標簽滿足上述條件，但需要后臺配合實作跨域請求，
代碼示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域請求</title>
</head>
<body>
<button onclick="creatScript()">跨域請求</button>
<script>
// 第一種方式：通過創建script元素發送請求
/*function creatScript() {
var script=document.createElement('script');
script.src='https://www.cnblogs.com/husa/archive/2021/02/01/crossServ.php';
document.body.appendChild(script);
script.onload=function(){
this.remove();
}
}*/
function cross(res) {
console.log(res);
}
</script>
<!-- 第二種方式：直接在<script>標簽中定義 src 屬性值 -->
<!-- 為確保后臺回傳資料時呼叫的方法與前臺定義方法一致，在發送請求時可將方法名一并發送 -->
<script src="https://www.cnblogs.com/husa/archive/2021/02/01/crossServ.php?callback=cross"></script>
</body>
</html>
<?php
// 通過前臺 callback 引數接收方法名，
$fn=isset($_GET['callback'])?$_GET['callback']:'cross';
$info=file_get_contents('http://blog.sina.com.cn');
$info=json_encode($info);
echo "{$fn}({$info})";
?>
4.分頁案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>multi-pages</title>
<script src="https://www.cnblogs.com/husa/archive/2021/02/JScodeFile/jquery-1.8.3.js"></script>
<style>
.contentUl{
width: 600px;
margin: 50px auto;
}
.contentUl li{
}
.btnContainer{
height: 30px;
margin: 20px auto;
}
.btnContainer span{
border: 1px solid grey;
box-shadow: 0 1px 2px #0f6674;
margin: 0 3px;
padding: 0 5px;
cursor: pointer;
}
.btnContainer span.active{
border: none;
box-shadow: none;
color: orangered;
font-weight: bold;
}
</style>
</head>
<body>
<ul id="contentUl"></ul>
<div ></div>
<script>
var contentUl=document.querySelector('#contentUl');
var btnContainer=document.querySelector('.btnContainer');
$.get('multiPages.php',function (data) {
var content=JSON.parse(data); //獲取后臺資料
// 定義頁碼索引
var rows=5;
var rowsNum=content.length;
var pagesNum=Math.ceil(content.length/rows);
var activePageNum=1; //默認加載第一頁，
//創建分頁索引
$('<span>上一頁</span>').appendTo(btnContainer);
for (var j=1;j<=pagesNum;j++){
$('<span>'+j+'</span>').appendTo(btnContainer);
}
$('<span>下一頁</span>').appendTo(btnContainer);
$('.btnContainer span').eq(1).addClass('active');
// 定義分頁內容
function turnPage(activePageNum){
var rowsIndex=rows*activePageNum;
if (rowsIndex>rowsNum){
rowsIndex=rowsNum;
}
//每次生成頁面內容前對串列進行清空操作，否則會造成內容累加！
$('#contentUl').empty(); //empty()為jQ方法，JS變數無法呼叫
for (var i=rows*(activePageNum-1);i<rowsIndex;i++){
$('<li>'+content[i]["author"]+'：<br>'+content[i]["summary"]+'<li>').appendTo(contentUl);
}
}
turnPage(activePageNum)
//定義分頁敲擊事件
$('.btnContainer span').click(function () {
var clickPageNum=$(this).html();
if (clickPageNum=='上一頁'){
activePageNum--;
if (activePageNum<1){
activePageNum=1;
return;
}
}else if (clickPageNum=='下一頁'){
activePageNum++;
if (activePageNum>pagesNum){
activePageNum=pagesNum;
return;
}
}else {
activePageNum=clickPageNum;
}
//點擊翻頁時清除其他兄弟元素的“active”屬性，
$('.btnContainer span').eq(activePageNum).addClass('active').siblings().removeClass('active');
turnPage(activePageNum);
});
});
</script>
</body>
</html>
<?php
$dbBase=new PDO('mysql:host=localhost;dbname=dbTest;charset=utf8','root','');
$res=$dbBase->query('select * from news where 1');
if($res){
$data=https://www.cnblogs.com/husa/archive/2021/02/01/$res->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($data);
}else{
echo'沒有資料！';
}
?>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/255475.html
標籤：其他
上一篇：Python爬蟲入門教程13：高質量電腦桌面壁紙爬取
下一篇：450. 洗掉二叉搜索樹中的節點