溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關(guān)Ajax有什么作用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
ajax簡介
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。Ajax不是一種新的編程語言，而是使用現(xiàn)有標準的新方法。AJAX可以在不重新加載整個頁面的情況下，與服務(wù)器交換數(shù)據(jù)。這種異步交互的方式，使用戶單擊后，不必刷新頁面也能獲取新數(shù)據(jù)。使用Ajax，用戶可以創(chuàng)建接近本地桌面應(yīng)用的直接、高可用、更豐富、更動態(tài)的Web用戶界面。
Ajax包括：
?XHTML和CSS
?使用文檔對象模型(Document Object Model)作動態(tài)顯示和交互
?使用XML和XSLT做數(shù)據(jù)交互和操作
?使用XMLHttpRequest進行異步數(shù)據(jù)接收
利用AJAX可以做：
?注冊時，輸入用戶名自動檢測用戶是否已經(jīng)存在。
?登陸時，提示用戶名密碼錯誤
?刪除數(shù)據(jù)行時，將行ID發(fā)送到后臺，后臺在數(shù)據(jù)庫中刪除，數(shù)據(jù)庫刪除成功后，在頁面DOM中將數(shù)據(jù)行也刪除。
ajax偽造
iframe就是我們常用的iframe標簽：<iframe>。iframe標簽是框架的一種形式，也比較常用到，iframe一般用來包含別的頁面，例如我們可以在我們自己的網(wǎng)站頁面加載別人網(wǎng)站或者本站其他頁面的內(nèi)容。iframe標簽的最大作用就是讓頁面變得美觀。iframe標簽的用法有很多，主要區(qū)別在于對iframe標簽定義的形式不同，例如定義iframe的長寬高。
因此，iframe標簽具有局部加載內(nèi)容的特性，所以可以使用其來偽造Ajax請求。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>偽造AJAX</title>
</head>
<body>
<div>
<p>請輸入要加載的地址：<span id="currentTime"></span></p>
<p>
<input id="url" type="text" />
<input type="button" value="提交" onclick="LoadPage();">
</p>
</div>
<div>
<h4>加載頁面位置：</h4>
<iframe id="iframePosition" ></iframe>
</div>
<script type="text/javascript">
window.onload= function(){
var myDate = new Date();
document.getElementById('currentTime').innerText = myDate.getTime();
};
function LoadPage(){
var targetUrl = document.getElementById('url').value;
document.getElementById("iframePosition").src = targetUrl;
}
</script>
</body>
</html>原理是這樣的，設(shè)置一個提交按鈕，再設(shè)置一個輸入框，當我們輸入一個網(wǎng)址的時候，在當前的頁面加載輸入網(wǎng)址的頁面信息，呈現(xiàn)在iframe框里，這樣就能做到不刷新URL來提交不同的信息。
原生ajax
Ajax的核心是XMLHttpRequest對象(XHR)。XHR為向服務(wù)器發(fā)送請求和解析服務(wù)器響應(yīng)提供了接口。能夠以異步方式從服務(wù)器獲取新數(shù)據(jù)。
一、XMLHttpRequest對象
Ajax的核心是XMLHttpRequest對象(XHR)。XHR為向服務(wù)器發(fā)送請求和解析服務(wù)器響應(yīng)提供了接口。能夠以異步方式從服務(wù)器獲取新數(shù)據(jù)。
XHR的主要方法有：
1. void open(String method,String url,Boolen async) 用于創(chuàng)建請求 參數(shù)： method： 請求方式（字符串類型），如：POST、GET、DELETE... url： 要請求的地址（字符串類型） async： 是否異步（布爾類型） 2. void send(String body) 用于發(fā)送請求 參數(shù)： body： 要發(fā)送的數(shù)據(jù)（字符串類型） 3. void setRequestHeader(String header,String value) 用于設(shè)置請求頭 參數(shù)： header： 請求頭的key（字符串類型） vlaue： 請求頭的value（字符串類型） 4. String getAllResponseHeaders() 獲取所有響應(yīng)頭 返回值： 響應(yīng)頭數(shù)據(jù)（字符串類型） 5. String getResponseHeader(String header) 獲取響應(yīng)頭中指定header的值 參數(shù)： header： 響應(yīng)頭的key（字符串類型） 返回值： 響應(yīng)頭中指定的header對應(yīng)的值 6. void abort() 終止請求
XHR的主要屬性有：
1. Number readyState 狀態(tài)值（整數(shù)），可以確定請求/響應(yīng)過程的當前活動階段 ?0：未初始化。未調(diào)用open()方法 ?1：啟動。已經(jīng)調(diào)用open()方法，未調(diào)用send()方法 ?2：發(fā)送。已經(jīng)調(diào)用send()方法，未接收到響應(yīng) ?3：接收。已經(jīng)接收到部分數(shù)據(jù) ?4：完成。已經(jīng)接收到全部數(shù)據(jù)，可以在客戶端使用 2. Function onreadystatechange 當readyState的值改變時自動觸發(fā)執(zhí)行其對應(yīng)的函數(shù)（回調(diào)函數(shù)） 3. String responseText 作為響應(yīng)主體被返回的文本（字符串類型） 4. XmlDocument responseXML 服務(wù)器返回的數(shù)據(jù)（Xml對象） 5. Number states 狀態(tài)碼（整數(shù)），如：200、404... 6. String statesText 狀態(tài)文本（字符串），如：OK、NotFound...
二、get請求
GET用于向服務(wù)器查詢某些信息：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>XMLHttpRequest - Ajax請求</h2>
<input type="button" onclick="XmlGetRequest();" value="Get發(fā)送請求" />
<script src="/statics/jquery-1.12.4.js"></script>
<script type="text/javascript">
function GetXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
function XmlGetRequest(){
var xhr = GetXHR();
// 定義回調(diào)函數(shù)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，執(zhí)行以下操作
var data = xhr.responseText;
console.log(data);
}
};
// 指定連接方式和地址----文件方式
xhr.open('get', "/test/", true);
// 發(fā)送請求
xhr.send();
}
</script>
</body>
</html>三、post請求
POST請求用于向服務(wù)器發(fā)送應(yīng)該被保存的數(shù)據(jù)。POST請求的主體可以包含非常多的數(shù)據(jù)，而且格式不限。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>POST</title>
</head>
<body>
<h2>XMLHttpRequest - Ajax請求</h2>
<input type="button" onclick="XmlPostRequest();" value="Post發(fā)送請求" />
<script src="/statics/jquery-1.12.4.js"></script>
<script type="text/javascript">
function GetXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
function XmlPostRequest(){
var xhr = GetXHR();
// 定義回調(diào)函數(shù)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，執(zhí)行以下操作
var data = xhr.responseText;
console.log(data);
}
};
// 指定連接方式和地址----文件方式
xhr.open('POST', "/test/", true);
// 設(shè)置請求頭
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
// 發(fā)送請求
xhr.send('n1=1;n2=2;');
}
</script>
</body>
</html>jquery ajax
jQuery 提供多個與 AJAX 有關(guān)的方法。
通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務(wù)器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。
?jQuery 不是生產(chǎn)者，而是大自然搬運工。
?jQuery Ajax本質(zhì) XMLHttpRequest 或 ActiveXObject
注：2.+版本不再支持IE9以下的瀏覽器
1. jQuery.get(...) 所有參數(shù)： url: 待載入頁面的URL地址 data: 待發(fā)送 Key/value 參數(shù)。 success: 載入成功時回調(diào)函數(shù)。 dataType: 返回內(nèi)容格式，xml, json, script, text, html 2.jQuery.post(...) 所有參數(shù)： url: 待載入頁面的URL地址 data: 待發(fā)送 Key/value 參數(shù) success: 載入成功時回調(diào)函數(shù) dataType: 返回內(nèi)容格式，xml, json, script, text, html 3.jQuery.getJSON(...) 所有參數(shù)： url: 待載入頁面的URL地址 data: 待發(fā)送 Key/value 參數(shù)。 success: 載入成功時回調(diào)函數(shù)。 4.jQuery.getScript(...) 所有參數(shù)： url: 待載入頁面的URL地址 data: 待發(fā)送 Key/value 參數(shù)。 success: 載入成功時回調(diào)函數(shù)。 5.jQuery.ajax(...) 部分參數(shù)： url：請求地址 type：請求方式，GET、POST（1.9.0之后用method） headers：請求頭 data：要發(fā)送的數(shù)據(jù) contentType：即將發(fā)送信息至服務(wù)器的內(nèi)容編碼類型(默認: "application/x-www-form-urlencoded; charset=UTF-8") async：是否異步 timeout：設(shè)置請求超時時間（毫秒） beforeSend：發(fā)送請求前執(zhí)行的函數(shù)(全局) complete：完成之后執(zhí)行的回調(diào)函數(shù)(全局) success：成功之后執(zhí)行的回調(diào)函數(shù)(全局) error：失敗之后執(zhí)行的回調(diào)函數(shù)(全局) accepts：通過請求頭發(fā)送給服務(wù)器，告訴服務(wù)器當前客戶端課接受的數(shù)據(jù)類型 dataType：將服務(wù)器端返回的數(shù)據(jù)轉(zhuǎn)換成指定類型 "xml": 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成xml格式 "text": 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式 "html": 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式，在插入DOM中時，如果包含JavaScript標簽，則會嘗試去執(zhí)行。 "script": 嘗試將返回值當作JavaScript去執(zhí)行，然后再將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式 "json": 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成相應(yīng)的JavaScript對象 "jsonp": JSONP 格式使用 JSONP 形式調(diào)用函數(shù)時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)
寫一個最簡單的例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<input type="button" onclick="XmlSendRequest();" value='Ajax請求' />
</p>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function JXmlSendRequest(){
$.ajax({
url: "http://c2.com:8000/test/", // 訪問url地址
type: 'GET', // get方式提交
dataType: 'text', // 數(shù)據(jù)類型
success: function(data, statusText, xmlHttpRequest){ // 成功后返回的結(jié)果
console.log(data);
}
})
}
</script>
</body>
</html>跨域ajax
由于瀏覽器存在同源策略機制，同源策略阻止從一個源加載的文檔或腳本獲取或設(shè)置另一個源加載的文檔的屬性。所以ajax本身是不可以跨域的，通過產(chǎn)生一個script標簽來實現(xiàn)跨域。因為script標簽的src屬性是沒有跨域的限制的。
瀏覽器同源策略并不是對所有的請求均制約：
?制約： XmlHttpRequest
?不制約： img、iframe、script等具有src屬性的標簽
注：自己模擬跨域，需要現(xiàn)在自己電腦的host文件里面添加兩條域名，我這里添加的是zhangyanlin.com和aylin.com這兩個域名
一、JSONP實現(xiàn)跨域請求
JSONP是一個非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過javascript callback的形式實現(xiàn)跨域訪問。jsonp只能通過get方式進行跨域請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="Ajax" onclick="DoAjax();"/>
<input type="button" value="JsonpAjax" onclick="JsonpAjax();"/>
<script src="/statics/jquery-1.12.4.js"></script>
<script src="http://aylin.com:8002/statics/jquery.cookie.js"></script>
<script>
function func(arg) {
console.log(arg); // 輸出結(jié)果就是python代碼給傳過來的列表[11,22,33,]
}
function DoAjax() {
$.ajax({
url: 'http://alex.com:8002/index',
type: 'POST',
data: {'k1': 'v1'},
success: function (arg) {
console.log(arg);
}
});
}
function JsonpAjax() {
// var tag = document.createElement('script');
// tag.src = "http://alex.com:8002/index";
// document.head.appendChild(tag);
// document.head.removeChild(tag);
$.ajax({
url: "http://aylin.com:8002/index",
dataType: 'jsonp',
jsonpCallBack: 'func' // 對端給返回函數(shù)名，函數(shù)接收的參數(shù)是內(nèi)容
})
}
</script>
</body>
</html>aylin.com域名這邊可以給定義函數(shù)
# 采用pythontornado框架來進行的
class IndexHandler(tornado.web.RequestHandler):
def get(self):
self.write('func([11,22,33]);')
def post(self, *args, **kwargs):
self.write('t2.post')在這里jsonp就采用script標簽的src來進行跨域請求的
二、CORS
上面那種方法說到瀏覽器的同源策略導致ajax無法進行跨域傳輸，那么這種方法就可以突破瀏覽器限制來進行傳輸。當數(shù)據(jù)發(fā)送給對方域名的時候，對方已經(jīng)收到，但是在返回的時候被瀏覽器給阻擋，我們可以寫一串類似于身份證的字符串，通過瀏覽器的預檢，從而達到數(shù)據(jù)的傳輸。
這方面分為簡單請求和非簡單請求
條件： 1、請求方式：HEAD、GET、POST 2、請求頭信息： Accept Accept-Language Content-Language Last-Event-ID Content-Type 對應(yīng)的值是以下三個中的任意一個 application/x-www-form-urlencoded multipart/form-data text/plain 注意：同時滿足以上兩個條件時，則是簡單請求，否則為復雜請求
簡單請求只一次請求，而復雜請求是兩次請求，在發(fā)送數(shù)據(jù)之前會先發(fā)一次請求用于做“預檢”，只有“預檢”通過后才再發(fā)送一次請求用于數(shù)據(jù)傳輸。
基于cors實現(xiàn)AJAX請求:
1、支持跨域，簡單請求
服務(wù)器設(shè)置響應(yīng)頭：Access-Control-Allow-Origin = '域名' 或 '*'
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<input type="submit" onclick="XmlSendRequest();" />
</p>
<p>
<input type="submit" onclick="JqSendRequest();" />
</p>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function XmlSendRequest(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
var result = xhr.responseText;
console.log(result);
}
};
xhr.open('GET', "http://c2.com:8000/test/", true);
xhr.send();
}
function JqSendRequest(){
$.ajax({
url: "http://c2.com:8000/test/",
type: 'GET',
dataType: 'text',
success: function(data, statusText, xmlHttpRequest){
console.log(data);
}
})
}
</script>
</body>
</html>class MainHandler(tornado.web.RequestHandler):
def get(self):
self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
self.write('{"status": true, "data": "seven"}')2、支持跨域，復雜請求
由于復雜請求時，首先會發(fā)送“預檢”請求，如果“預檢”成功，則發(fā)送真實數(shù)據(jù)。
?“預檢”請求時，允許請求方式則需服務(wù)器設(shè)置響應(yīng)頭：Access-Control-Request-Method
?“預檢”請求時，允許請求頭則需服務(wù)器設(shè)置響應(yīng)頭：Access-Control-Request-Headers
?“預檢”緩存時間，服務(wù)器設(shè)置響應(yīng)頭：Access-Control-Max-Age
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<input type="submit" onclick="XmlSendRequest();" />
</p>
<p>
<input type="submit" onclick="JqSendRequest();" />
</p>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function XmlSendRequest(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
var result = xhr.responseText;
console.log(result);
}
};
xhr.open('PUT', "http://aylin.com:8000/test/", true);
xhr.setRequestHeader('k1', 'v1');
xhr.send();
}
function JqSendRequest(){
$.ajax({
url: "http://aylin.com:8000/test/",
type: 'PUT',
dataType: 'text',
headers: {'k1': 'v1'},
success: function(data, statusText, xmlHttpRequest){
console.log(data);
}
})
}
</script>
</body>
</html>class MainHandler(tornado.web.RequestHandler):
def put(self):
self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
self.write('{"status": true, "data": "seven"}')
def options(self, *args, **kwargs):
self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
self.set_header('Access-Control-Allow-Headers', "k1,k2")
self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
self.set_header('Access-Control-Max-Age', 10)3、跨域傳輸cookie
在跨域請求中，默認情況下，HTTP Authentication信息，Cookie頭以及用戶的SSL證書無論在預檢請求中或是在實際請求都是不會被發(fā)送。
如果想要發(fā)送：
?瀏覽器端：XMLHttpRequest的withCredentials為true
?服務(wù)器端：Access-Control-Allow-Credentials為true
?注意：服務(wù)器端響應(yīng)的 Access-Control-Allow-Origin 不能是通配符 *
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<input type="submit" onclick="XmlSendRequest();" />
</p>
<p>
<input type="submit" onclick="JqSendRequest();" />
</p>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function XmlSendRequest(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
var result = xhr.responseText;
console.log(result);
}
};
xhr.withCredentials = true;
xhr.open('PUT', "http://aylin.com:8000/test/", true);
xhr.setRequestHeader('k1', 'v1');
xhr.send();
}
function JqSendRequest(){
$.ajax({
url: "http://aylin.com:8000/test/",
type: 'PUT',
dataType: 'text',
headers: {'k1': 'v1'},
xhrFields:{withCredentials: true},
success: function(data, statusText, xmlHttpRequest){
console.log(data);
}
})
}
</script>
</body>
</html>class MainHandler(tornado.web.RequestHandler):
def put(self):
self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
self.set_header('Access-Control-Allow-Credentials', "true")
self.set_header('xxoo', "seven")
self.set_header('zhangyanlinhenshuai', "feichangshuai")
self.set_header('Access-Control-Expose-Headers', "shuai,shuaishuai")
self.set_cookie('kkkkk', 'vvvvv');
self.write('{"status": true, "data": "seven"}')
def options(self, *args, **kwargs):
self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
self.set_header('Access-Control-Allow-Headers', "k1,k2")
self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
self.set_header('Access-Control-Max-Age', 10)關(guān)于“Ajax有什么作用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼