濮阳杆衣贸易有限公司

主頁(yè) > 知識(shí)庫(kù) > ajax原理總結(jié)附簡(jiǎn)單實(shí)例及其優(yōu)點(diǎn)

ajax原理總結(jié)附簡(jiǎn)單實(shí)例及其優(yōu)點(diǎn)

熱門標(biāo)簽:青海醫(yī)療智能外呼系統(tǒng)怎么樣 徐州電銷卡外呼系統(tǒng)供應(yīng)商 目標(biāo)三維地圖標(biāo)注 上海浦東百度地圖標(biāo)注中心注冊(cè) 百靈鳥 科智聯(lián)智能電銷機(jī)器人 襄陽(yáng)外呼系統(tǒng)接口 老虎郵局地圖標(biāo)注點(diǎn) 外呼系統(tǒng)獲取客戶手機(jī)號(hào)
在工作中用了Ajax N多次了,也看過一些相關(guān)方面的書籍,也算是認(rèn)識(shí)了它,但是一直沒有認(rèn)真總結(jié)和整理過相關(guān)的東東,失??!

近有閑情,將之總結(jié)如下:

【名稱】

Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的縮寫。
詳情請(qǐng)移步Ajax: A New Approach to Web Applications

【原理】

簡(jiǎn)單一些,就是通過使用XmlHttpRequest對(duì)象向服務(wù)器發(fā)送異步請(qǐng)求,獲取返回的數(shù)據(jù),并使用Javascript和DOM操作頁(yè)面內(nèi)的元素,從而達(dá)到改變頁(yè)面內(nèi)容的目的。
其中XmlHttpRequest對(duì)象是關(guān)鍵,因?yàn)樗С之惒秸?qǐng)求。XMLHttpRequest是完全用來(lái)向服務(wù)器發(fā)出一個(gè)請(qǐng)求的。它所包含的方法和屬性如下所示:
方法:
abort() 導(dǎo)致當(dāng)前正在請(qǐng)求被取消
getAllResponseHeaders() 返回一個(gè)字符串,包含氖 響應(yīng)標(biāo)頭的名稱和值
getResponseHeader(name) 返回指定的響應(yīng)標(biāo)頭的值
open(method, url, async, username, password) 設(shè)置請(qǐng)求的方法和目標(biāo)URL。請(qǐng)求可以聲明為同步的(可選),也可以給需要基于窗口誰(shuí)的請(qǐng)求而提供用戶名和口令(可選)
send(content) 發(fā)起帶有指定內(nèi)容(可選)的請(qǐng)求
setRequestHeader(name, value) 利用指定的名稱和值,設(shè)置一個(gè)請(qǐng)求標(biāo)頭
屬性:
onreadystatechange 指派在請(qǐng)求的狀態(tài)發(fā)生變化時(shí)所使用的事件處理程序
readyState 一個(gè)整數(shù)值,指示請(qǐng)求的狀態(tài)如下:
0—-未初始化
1—-正在加載
2—-已加載
3—-交互
4—–完成
responseText 在響應(yīng)里所返回的內(nèi)容
responseXML 如果內(nèi)容是XML,就根據(jù)內(nèi)容而創(chuàng)建XML DOM
status 從服務(wù)器所返回的響應(yīng)狀態(tài)碼。例如:200表示成功,404表示未找到,參考HTTP規(guī)范
statusText 響應(yīng)所返回的狀態(tài)文本消息
對(duì)于此對(duì)象其它介紹請(qǐng)移步:XMLHttpRequest概述

【所包含的技術(shù)】

· 基于XHTML和CSS標(biāo)準(zhǔn)的表示;
· 使用Document Object Model進(jìn)行動(dòng)態(tài)顯示和交互;
· 使用XMLHttpRequest與服務(wù)器進(jìn)行異步通信;
· 使用JavaScript綁定一切;
· 使用XML和XSLT;交換和操作數(shù)據(jù)。
以上的技術(shù)都是一些廣泛使用了的技術(shù),都屬于比較舊的技術(shù),ajax是這幾種技術(shù)的結(jié)合體。

【簡(jiǎn)單實(shí)例】
復(fù)制代碼 代碼如下:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
html>
head>
title>/title>
meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
script type="text/javascript">
function ajax() {
var xmlHttp;
// 依據(jù)對(duì)象判斷,而不是依據(jù)瀏覽器
if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();//mozilla瀏覽器
}else if(window.ActiveXObject){
try{
xmlHttp=new ActiveXObject("Msxmlx2.XMLHTTP"); //IE老版本
}catch(e){}
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本
}catch(e){}

if(!xmlHttp){
window.alert("不能創(chuàng)建XMLHttpRequest對(duì)象實(shí)列");
return false;
}
}

if (!xmlHttp) {
alert("創(chuàng)建XMLHttpRequest對(duì)象失??!");
return false;
}

xmlHttp.open('POST', 'index.php?get_a=2get_b=3', false);
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=UTF-8;');
xmlHttp.send("post_a=1post_b=2");
xmlHttp.onreadystatechange = function() {
alert(xmlHttp.readyState);
}
if(xmlHttp.readyState == 4){ //判斷對(duì)象狀態(tài)
var content_obj = document.getElementById("content");
content_obj.innerHTML = "正在處理數(shù)據(jù)...";
if(xmlHttp.status == 200){ //信息已經(jīng)成功返回,開始處理信息
var returnStr = xmlHttp.responseText;
content_obj.innerHTML = returnStr;
}else{ //頁(yè)面不正常
content_obj.innerHTML = "您所請(qǐng)求的頁(yè)面存在異常!";
}
}
}
/script>
/head>
body>
input type="button" value="ajax" onclick="ajax();" />
div id="content">ajax內(nèi)容顯示區(qū)/div>
/body>
/html>

切記:當(dāng)發(fā)起一個(gè)POST請(qǐng)求時(shí),需要對(duì)報(bào)頭 Content-type(內(nèi)容類型)進(jìn)行設(shè)置。這樣,服務(wù)器就知道如何來(lái)處理上傳的內(nèi)容。如果要模擬通過HTTP協(xié)議的POST方式來(lái)發(fā)送表單,則應(yīng)將內(nèi)容類型設(shè)置為application/x-www-form-urlencoded。

【優(yōu)點(diǎn)】

頁(yè)面無(wú)刷新,用戶體驗(yàn)好;
異步,不打斷用戶操作,響應(yīng)速度快;
“按需取數(shù)據(jù)”,減少冗余請(qǐng)求,減輕服務(wù)器負(fù)擔(dān);
基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù),無(wú)需額外的插件;
可以使數(shù)據(jù)和表現(xiàn)分離;
【存在的問題】
一些設(shè)備還不支持
開發(fā)成本提高
使back按鈕失效,用戶操作后無(wú)法返回;
對(duì)流媒體支持沒有flash之流好;
對(duì)搜索引擎不友好
破壞程序的異常機(jī)制
存在一些安全問題,暴露了一些程序接口和數(shù)據(jù)邏輯
您可能感興趣的文章:
  • ajax中文亂碼的各種解決辦法總結(jié)
  • ajax問題總結(jié) 比較全
  • Ajax與JSON的一些學(xué)習(xí)總結(jié)
  • ajax請(qǐng)求get與post的區(qū)別總結(jié)
  • ajax 入門基礎(chǔ)之 XMLHttpRequest對(duì)象總結(jié)
  • 關(guān)于ajax對(duì)象一些常用屬性、事件和方法大小寫比較常見的問題總結(jié)
  • 總結(jié)AJAX相關(guān)JS代碼片段和瀏覽器模型
  • 關(guān)于Ajax技術(shù)原理的3點(diǎn)總結(jié)
  • 使用ajax異步提交表單的幾種方法總結(jié)
  • 初學(xué)者必看的Ajax總結(jié)篇

標(biāo)簽:股票 辛集 佛山 荊州 紅河 揭陽(yáng) 咸寧 商洛

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《ajax原理總結(jié)附簡(jiǎn)單實(shí)例及其優(yōu)點(diǎn)》,本文關(guān)鍵詞  ajax,原理,總結(jié),附,簡(jiǎn)單,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《ajax原理總結(jié)附簡(jiǎn)單實(shí)例及其優(yōu)點(diǎn)》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于ajax原理總結(jié)附簡(jiǎn)單實(shí)例及其優(yōu)點(diǎn)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    龙川县| 兴和县| 绥德县| 河间市| 福州市| 广汉市| 道孚县| 镇雄县| 会同县| 济阳县| 收藏| 贵阳市| 普宁市| 浮梁县| 天津市| 修文县| 肇庆市| 新河县| 巩留县| 怀化市| 江华| 阿瓦提县| 诸暨市| 宁乡县| 微博| 武邑县| 阳泉市| 江源县| 万荣县| 武义县| 华坪县| 朝阳区| 上虞市| 新宁县| 万载县| 乌海市| 石嘴山市| 平安县| 五河县| 清远市| 镇江市|