Ajax工作原理以及封裝使用

2021-09-01 11:49:02 字數 1621 閱讀 1487

1、什麼是ajax?

ajax （非同步程式設計的一種解決方案） 是一種用於建立快速動態網頁的技術。


通過後台與伺服器之間資料的少量交換，在不重新整理頁面的情況下，更新頁面部分的資料。
2、工作原理？

相當於在瀏覽器（客戶端）與伺服器之間增加了乙個中間層（ajax引擎），


使使用者操作與伺服器響應非同步化，這樣就可以把以前伺服器的一些負擔轉嫁到客戶端，


利用客戶端閒置的處理能力來處理，從而減輕伺服器負擔和頻寬。
3、封裝原生ajax

function ajax(method,url,senddata,fnsucc,fnfaild)  else 


if (method == 'get') 


oajax.open(method,url,true);


if (method == 'get') else 


oajax.onreadystatechange = function () 


} else 


} }}
4、建立乙個php檔案（getpics.php）

<?php


header('content-type:text/html; charset="utf-8"');


/*api:


getpics.php


引數 cpage : 獲取資料的頁數


*/$cpage = isset($_get['cpage']) ? $_get['cpage'] : 1;


$url = '' . $cpage;


$content = file_get_contents($url);


$content = iconv('gbk', 'utf-8', $content);


echo $content;


?>
5、建立乙個index.html檔案（效果為瀑布流）

---------------css樣式

*


#list


#list li


imgdiv
---------------------html布局

------------------------js**

var olist = document.getelementbyid("list");


var ali = document.getelementsbytagname("li");


var len = ali.length;


var ipage = 1;


var flag = true;


getdata();


window.onscroll = function() 


} function getdata()})}


function getmin()


} return index;


}//將封裝好的ajax引入在這裡

ajax的工作原理以及非同步請求的封裝介紹

ajax原理 客戶端通過瀏覽器的內建物件xmlhttprequest來傳送非同步請求，當伺服器返回響應時，會呼叫先前註冊的 函式，在 函式中程式設計客棧可以使用j ascript操作dom來更新頁面，非同步請求不會阻塞客戶端程式設計客棧的操作，達到頁面無法重新整理就可以更新資料的效果。非同步請求的封...

封裝ajax原理

首先處理 使用者如果不傳某些引數，設定預設值 處理使用者傳進來的引數物件 通過xmlhttprequest物件建立xhr，早期的ie瀏覽器不支援xmlhttprequest物件,通過var xhr new activexobject msxm12.xmlhttp 建立 判斷使用者請求的方法 判斷資料...

AJAX工作原理

xmlhttprequest 是 ajax 的基礎 所有現代瀏覽器均支援 xmlhttprequest 物件 ie5 和 ie6 使用 activexobject 所有現代瀏覽器 ie7 firefox chrome safari 以及 opera 均內建 xmlhttprequest 物件。如需將...