當(dāng)前位置：
首頁(yè) >
AJAX-简单示例
發(fā)布時(shí)間：2025/3/21
55
豆豆
一個(gè)簡(jiǎn)單的AJAX示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>AJAX</title><script>function getXMLHttpRequest() {try {try{return new ActiveXObject("Microsoft.XMLHTTP");}catch(e){return new ActiveXObject("Msxml2.XMLHTTP");}} catch(e) {return new XMLHttpRequest();}}function responseAjax(){if(myRequest.readyState ==4){if(myRequest.status == 200){alert("The server said:"+myRequest.responseText);}else{alert("error:"+myRequest.statusText);}}}var myRequest = getXMLHttpRequest();function callAjax(){var lastname = 'Numb';var url="http://123.206.17.200/hello.php";myRequest.open('GET',url)myRequest.onreadystatechange = responseAjax;myRequest.send()}</script> </head> <body><button id="btn" onclick="callAjax()">按鈕</button> </body> </html>頁(yè)面很簡(jiǎn)單,只有一個(gè)button,添加了一個(gè)onclick事件,有三個(gè)函數(shù),分別是
getXMLHttpRequest():針對(duì)不同瀏覽器,獲取XMLHttpRequest實(shí)例
responseAjax():回調(diào)函數(shù),當(dāng)瀏覽器請(qǐng)求完成后執(zhí)行,返回服務(wù)器返回的數(shù)據(jù),responseText
callAjax():發(fā)送服務(wù)器請(qǐng)求,open()和send()方法
假設(shè)服務(wù)器用如下的一個(gè)簡(jiǎn)單PHP文件:
如果XMLHttpRequest成功調(diào)用了這個(gè)文件,responseText屬性就會(huì)發(fā)哦韓字符串”Hello Ajax caller”,如下圖
注意:要訪問(wèn)的必須是同域下文件,同源策略規(guī)定，瀏覽器的ajax只能訪問(wèn)跟它的HTML頁(yè)面同源（相同域名或IP）的資源。
什么事跨域訪問(wèn):在A網(wǎng)站中，我們希望使用Ajax來(lái)獲得B網(wǎng)站中的特定內(nèi)容。如果A網(wǎng)站與B網(wǎng)站不在同一個(gè)域中，那么就出現(xiàn)了跨域訪問(wèn)問(wèn)題。你可以理解為兩個(gè)域名之間不能跨過(guò)域名來(lái)發(fā)送請(qǐng)求或者請(qǐng)求數(shù)據(jù)，否則就是不安全的。
跨域訪問(wèn)可用CORS,以后更新
總結(jié)
- 上一篇： 微信小程序开发-入门基础
- 下一篇： AJAX-prototype.js实现A