一.AJAX概念
Asynchronous Javascript And XML(異步JavaScript和XML)
AJAX并不是一種語言,而是一種創建交互網頁應用的網頁開發技術
AJAX是Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest 等技術的組合
1.使用XHTML+CSS來標準化呈現;
2.使用XML和XSLT進行數據交換及相關操作;
3.使用XMLHttpRequest對象與Web服務器進行異步數據通信;
4.使用Javascript操作Document Object Model(網絡文檔對象模型)進行動態顯示及交互;
5.使用JavaScript綁定和處理所有數據
什么是 XML?
XML 指可擴展標記語言（EXtensible Markup Language）
XML 是一種標記語言，很類似 HTML
XML 的設計宗旨是傳輸數據，而非顯示數據
XML 標簽沒有被預定義。您需要自行定義標簽。
XML 被設計為具有自我描述性。
XML 是 W3C 的推薦標準
什么是 XSLT？
XSLT 指 XSL 轉換（XSL Transformations）[1]
XSLT 是 XSL 中最重要的部分
XSLT 可將一種 XML 文檔轉換為另外一種 XML 文檔
XSLT 使用 XPath 在 XML 文檔中進行導航
XSLT 是一個 W3C 標準
AJAX核心對象是XMLHttpRequest
二.AJAX工作原理
用戶操作流程：
用戶瀏覽器->JavaScript實例化XmlHttpRequest對象->AJAX引擎->http請求->web服務器->后臺業務系統
系統返回流程：
后臺業務系統->后臺服務器->web服務器->HTML,XML,JSON數據->AJAX引擎->HTML+CSS(Wel瀏覽器)->用戶瀏覽器
三.AJAX優缺點:
AJAX異步處理優點:
減輕服務器的負擔,AJAX一般只從服務器獲取只需要的數據
無刷新頁面更新,減少用戶等待的時間
更好的客戶體驗,可以將一些服務器的工作轉移到客戶端來完成,節約網絡資源,提高用戶體驗
無平臺限制
促進顯示與數據想分離
AJAX異步處理的缺點:
頁面中存在大量JS,給搜索引擎帶來困難
AJAX干掉了Back和History功能,即對瀏覽器機制的破壞
存在跨域問題
只能傳輸及接收utf-8編碼數據
1.AJAX實現步驟
window.open(URL,name,features,replace)
URL:一個可選的字符串，聲明了要在新窗口中顯示的文檔的 URL。如果省略了這個參數
或者它的值是空字符串，那么新窗口就不會顯示任何文檔
name:一個可選的字符串，該字符串是一個由逗號分隔的特征列表，其中包括數字、字母和下劃線，
該字符聲明了新窗口的名稱。這個名稱可以用作標記 <a> 和 <form> 的屬性 target 的值。
如果該參數指定了一個已經存在的窗口，那么 open() 方法就不再創建一個新窗口，
而只是返回對指定窗口的引用。在這種情況下，features 將被忽略
features:一個可選的字符串，聲明了新窗口要顯示的標準瀏覽器的特征。如果省略該參數，
新窗口將具有所有標準特征。在窗口特征這個表格中，我們對該字符串的格式進行了詳細的說明
replace:
一個可選的布爾值。規定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創建一個新條目，
還是替換瀏覽歷史中的當前條目。支持下面的值：
true - URL 替換瀏覽歷史中的當前條目。
false - URL 在瀏覽歷史中創建新的條目
send()send()用于向一個已經連接的socket發送數據，如果無錯誤，返回值為所發送數據的總數，
否則返回SOCKET_ERROR。[1] send也是一個英文單詞。
responseText屬性：
服務器進程返回數據的文本版本
服務器進程返回數據的兼容DOM的XML文檔對象 status 服務器返回的狀態碼, 如:404 = "文件末找到".
你向ajax后臺的程序發送xmlhttp請求的時候, 后臺程序接到請求會進 行處理,處理結束后,可以返回一串數據給前臺,
這個就是responseText.
一般在后臺程序C#中是Response.Write("字符串") php中使用的是echo...就是一個輸出字符串
因為要輸出一個字符串但有時候得到的是一個數組，但是要把他串行化，用PHP中的json技術把這個數組轉換成
一個字符串輸出給前端，而前端respText屬性能接收住這個字符串，然后通過JS中的json技術把這個字符串
再次轉換成JS認識的對象來進行操作(json數據傳輸類型基本上哪種語言都認識可以用于各種語言的傳輸與轉換)
初始化XMLHttpRequest對象
if (window.XMLHttpRequest) {// Mozilla, Safari, ...
var http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 5 ,6
var http_request = new ActiveXObject("Microsoft.XMLHTTP");
}XMLHttpRequest發出HTTP請求
http_request.open("GET|POST","test.php?GET方式傳值",true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //僅POST請求時需要設置
//用于向一個已經連接的socket發送數據
//如果是POST傳輸方式要把值寫在send()函數里
http_request.send(向一個已連接的套接口發送數據);
XMLHttpRequest取得響應數據并顯示
http_request.onreadystatechange=function(){
if(http_request.readyState==4 && http_request.status==200){
$("p").text(http_request.responseText)
}
}例:
//GET方式
參數1：代表是以get還是post方式發送請求 參數2：發送請求給哪個url 參數3：true代表異步請求，false代表同步請求
http_request.open("GET","test.php?user_name="+username.val(),true);
http_request.send();發送POST請求
var username=$("input[name='user_name']");參數1：代表是以get還是post方式發送請求 參數2：發送請求給哪個url 參數3：true代表異步請求，false代表同步請求
http_request.open("POST","test.php",true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");如果是POST傳輸方式要把值寫在send()函數里
http_request.send({username:username});
四.JSON
Javascript Object Notation,是一種輕量級的數據交換格式
JSON每種語言都認識他所以用他進行各種語言的數據的轉換
JSON支持多種語言
格式
{key:value,key:value,.....} 對象格式
[{key:value,key:value,.....},{key:value,key:value,.....},......] 數組格式
PHP處理：
$json=json_encode($array) //對變量進行Json編碼
$array=json_decode($json) //對Json數據進行解碼轉換成PHP變量
JavaScript處理：
eval('('+json+')') //將某個字符串按照JS代碼來執行
例：
eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
JSON.parse(json) //對傳過來的json字符串進行解碼，變成JS認識的對象
JSON.stringify(obj) //將JS中的值編譯成json字符串
五.jQuery中AJAX應用1
.不要忘寫
$.ajax({
//你要傳的php文件的路徑
url:"test1.php", ('服務器url地址')
//以get方式傳輸拼接字符串
data:"user_name="+$('input[name="user_name"]').val(),('名=值&名=值&.....',)
//以什么方式傳輸
type:'get',('post|get')
//傳輸返回的數據類型
dataType:'json', ('xml|html|text|json|script')
//展示 數據的方式
success:function(res){
$('h1').text('用戶名為：'+res.user_name);
},
//錯誤信息
error:function(xhr){
},
timeout:2000,
async:true,
cache:false
})六.jQuery中AJAX應用2
$.get()
$.get('服務器url地址'，"json格式或字符串格式"，function(res){
//處理返回的數據
}), "xml|html|json|text|script")例：
//'服務器url地址'，"json格式或字符串格式"
$.get("test1.php",{user_name:$("input[name='user_name']").val()},function(data){
//如果后臺發過來的值跟這里的值相等讓他執行下面代碼
if(data.status=='ok'){
alert("登陸成功");
location.href="http://www.wl.com";
}else{
alert("登陸失敗");
}
//"xml|html|json|text|script"類型
},'json')
七.jQuery中AJAX應用3
serialize() 序列表表格內容為字符串，串行化數據 用于 Ajax 請求
$.post()
$.post('服務器url地址'，"json格式或字符串格式"，function(res){
//處理返回的數據
}), "xml|html|json|text|script")例：
//'服務器url地址'，"json格式或字符串格式" 用post方式提交要用form表單包起來
// 然后用serialize()來拿里面所有有值
$.post("test1.php",$('form').serialize(),function(res){
//如果后臺發過來的值跟這里的值相等讓他執行下面代碼
if(res.status=='ok'){
alert("登陸成功");
location.href="http://www.wl.com";
}else{
alert("登陸失敗");
}
//"xml|html|json|text|script"類型
},'json')php中接收處理輸出
try{
$pdo=new PDO("mysql:host=127.0.0.1;port=3306;dbname=數據庫名",'數據庫賬號','數據庫密碼');
$pdo->exec("set names utf8");
$sen=$pdo->query("select * from yh_admin where user_name='{$user_name}' limit 1");
if($sen->rowCount()>0){
// $arr=$sen->fetch(PDO::FETCH_ASSOC);
//echo json_encode($arr);
//echo 'yes';
$arr['status']='ok';
}else{
echo 'no';
}
//切記用json數據類型傳輸
echo json_encode($arr);
}catch (PDOException $e){
echo $e->getMessage();
}聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
