首頁 > web前端 > js教程 > 主體

ajax的作用有哪些? ajax作用的詳細介紹(附實例)

寻∝梦
發布: 2018-09-10 14:51:19
原創
5047 人瀏覽過

這篇文章主要的介紹了關於ajax的作用解釋,讓大家更能清楚的使用ajax,現在讓我們一起來看這篇文章吧

AJAX 是一種在無需重新載入整個網頁的情況下,能夠更新部分網頁的技術。
無刷新資料讀取
用戶登陸、股票基金網
非同步、同步
AJAX = Asynchronous JavaScript and XML(非同步的 JavaScript 和 XML)。 AJAX 不是新的程式語言,而是一種使用現有標準的新方法。

AJAX 是與​​伺服器交換資料並更新部分網頁的藝術,在不重新載入整個頁面的情況下。有許多使用 AJAX 的應用程式案例:新浪微博、Google 地圖、開心網等等。 (想看更多就到PHP中文網AJAX開發手冊欄位中學習)

#傳統的開發模式:用戶的每一次操作都觸發一次返回伺服器的HTTP請求,伺服器做出處理後,返回一個html頁面給使用者。


ajax開發模式:頁面將使用者的操作透過ajax引擎與伺服器進行通信,將返回的結果給ajax引擎,然後ajax將數據插入指定位置。


寫ajax函數

#1、建立ajax物件

<span class="pln" style="color:rgb(72,72,76);"></span>

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
登入後複製

2、連接伺服器

xmlhttp.open('GET',url,true);//三個參數分別代表方法、路徑、同步或非同步(true為非同步);

3、發送請求

xmlhttp.send();

4、接收回傳值


##

xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
alert(&#39;成功:&#39;+oAjax.responseText);
}
else
{
alert(&#39;失败:&#39;+oAjax.status);
}
}
}
封装成函数
function ajax(url,
 fnSucc, fnFaild)
{
//1.创建Ajax对象
if(window.XMLHttpRequest)
{
var
 oAjax=newXMLHttpRequest();
}
else
{
var
 oAjax=newActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
//open(方法, 文件名, 异步传输)
oAjax.open(&#39;GET&#39;,
 url,true);
//3.发送请求
oAjax.send();
//4.接收返回
oAjax.onreadystatechange=function()
{
//oAjax.readyState //浏览器和服务器,进行到哪一步了
if(oAjax.readyState==4)//读取完成
{
if(oAjax.status==200)//成功
{
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
{
fnFaild(oAjax.status);
}
//alert(&#39;失败:&#39;+oAjax.status);
}
}
};
}
登入後複製
這篇文章到這就結束了(想看更多就到PHP中文網

AJAX使用手冊欄位中學習),有問題的可以在下方留言提問。

以上是ajax的作用有哪些? ajax作用的詳細介紹(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!