ajax詳細介紹
a.什麼是Ajax
Asynchronous JavaScript and XML（異步JavaScript和XML)
節省用戶操做，時間，提升用戶體驗，減小數據請求
傳輸獲取數據
b.使用Ajax：
使用ajax獲取某一文本文件的內容
c.Ajax過程詳解：
建立對象XMLHttpRequest()
Date()對象
ActiveXObject(‘Microsoft.XMLHTTP’)
1.例：
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
//打開瀏覽器
var xhr = new XMLHttpRequest();
//在地址欄輸入地址
xhr.open('get','1.txt',true);
//提交
xhr.send();
//等待服務器返回內容
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
alert( xhr.responseText );
}
}
}
}
</script>
<body>
<input type="button" value="按鈕" id="btn" />
</body>
2.異常
<script>
//alert(a);
try {
//代碼嘗試執行這個塊中的內容,若是有錯誤，則會執行catch{}， 而且傳入錯誤信息參數
//alert(a);
//new throw();
//throw new Error('錯了錯了');
} catch (e) {
alert(e);
}
alert('到這裏了');
</script>
3.異步同步
①<script src="jquery.js"></script>
<script>
//$(function(){}) //阻塞 -> 同步
//阻塞：當前面一件事沒作完的狀況下，阻塞後面代碼的執行
/*setTimeout(function() {
alert(1); //非阻塞 - 異步
}, 2000); //非阻塞：先彈出2,2s後再彈出1
alert(2);*/
4.請求狀態監控
onreadystatechange事件
readyState屬性：請求狀態
0 （初始化）尚未調用open()方法
1 （載入）已調用send()方法，正在發送請求
2 （載入完成）send()方法完成，已收到所有響應內容
3 （解析）正在解析響應內容
4 （完成）響應內容解析完成，能夠在客戶端調用了
status屬性：服務器(請求資源)的狀態
返回的內容
responseText：返回以文本形式存放的內容
responseXML：返回XML形式的內容
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
（一）//打開瀏覽器
/*
1.建立一個ajax對象
ie6如下new ActiveXObject('Microsoft.XMLHTTP')
*/
var xhr = null;
/*if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}*/
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
（二）//在地址欄輸入地址
/*
open方法
三個參數含義：
1.打開方式 Form-method
2.地址 Form-action
3.是否異步
異步(true):非阻塞--> 前面的代碼不會影響後面代碼的執行
同步(false):阻塞--> 前面的代碼會影響後面代碼的執行
同步與異步區別：同步：當後續的代碼須要用到前面東西的時候，能夠用到同步，
同步模式用的較少，由於能夠經過事件回調的形式進行處理
異步：通常狀況下，均使用異步，由於不可能爲了完成ajax動做，
而把後續代碼所有阻止掉
*/ //打開方式：get;地址：1.txt;是否異步：異步-->xhr.open('get','1.txt',true);
xhr.open('get','1.txt',true);
(三)//提交 發送請求
//Send方法
發送數據請求，至關於Form的submit
//alert(1);
xhr.send();
//alert(1)
//alert( xhr.responseText );
（四）//等待服務器返回內容
/*
readyState : ajax工做狀態
responseText（屬性） : ajax請求返回的內容就被存放到這個屬性下面
on readystate change : 當狀態值readyState改變的時候觸發
status : 服務器狀態（碼），http狀態碼
*/
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) { //當狀態值爲4時，把內容取出來
//容錯？？處理：判斷服務器是否成功 2開頭的表示成功
if ( xhr.status == 200 ) {//當狀態值OK的時候 執行
alert( xhr.responseText );//把內容取出來
} else {//若是爲其餘的狀態 作一下錯誤處理，xhr.status：表示錯誤信息
alert('出錯了,Err：' + xhr.status);
}
}
}
}
</script>
</head>
<body>
<input type="button" value="按鈕" id="btn" />
</body>
</script>
傳遞、請求過程當中的問題：
xhr.open('post','2.post.php',true);
//post方式，數據放在send()裏面做爲參數傳遞
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明發送的數據類型
//post沒有緩存問題
//無需編碼
xhr.send('username=劉偉&age=30');
獲取內容之後應注意的問題：
4.1，表單
表單：數據的提交,向服務器提交數據，好比：提交用戶信息
action : 數據提交的地址，默認是當前頁面
method : 數據提交的方式，默認是get方式
1.get--經過url地址傳輸
把數據名稱和數據值用=鏈接，若是有多個的話，那麼他會把多個數據組合用&進行鏈接，而後把數據放到url?後面傳到指定頁面
傳輸的數據量：有限制，url長度限制的緣由，咱們不要經過get方式傳遞過多的數據
傳遞的數據類型：僅爲字符串
2.post--經過瀏覽器內部傳輸
傳輸的數據量：理論上無限制
傳遞的數據類型：可多種
enctype : 提交的數據格式，默認application/x-www-form-urlencoded
①<body>
<form action="1.get.php" enctype="application/x-www-form-urlencoded">
<input type="text" name="username" />
<input type="text" name="age" />
<input type="submit" value="提交" />
</form>
</body>
4.2，後端數據接收
先後臺鍵名和傳輸方式必須一致
數據傳輸方式
數據獲取方式
①後端數據接收--get-$_GET方式 （.php 文件）
經過URL傳遞給該腳本的變量的數組
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$username = $_GET['username'];
$age = $_GET['age'];
echo "你的名字：{$username}，年齡：{$age}";
②<form action="1.post.php" method="post">
<input type="text" name="username" />
<input type="text" name="age" />
<input type="submit" value="提交" />
</form>
②後端數據接收--post-$_POST 方式 （.php 文件）
經過HTTP POST方法（表單）傳遞給該腳本的變量的數組
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
//$_REQUEST----get post 均可以
$username = $_POST['username'];
$age = $_POST['age'];
echo "你的名字：{$username}，年齡：{$age}";
5.json
<script src="JSON.js"></script>
<script>
/*
JSON :
JSON.js文件中有兩種方法：
stringify : 能夠把一個對象轉成對應字符串
parse : 能夠把字符串轉成對應對象
*/
//alert(JSON)
//stringify : 能夠把一個對象轉成對應字符串
var arr = [1,2,3];
var j = {left:100};
/*alert( JSON.stringify(arr) );*/
/*alert( JSON.stringify(j) );*/
//parse : 能夠把字符串轉成對應對象
var s1 = '[100,200,300]';
var a1 = JSON.parse(s1);
//alert(a1[0])
var s2 = '{"left":100}';
var a2 = JSON.parse(s2);
alert(a2.left)
</script>
6.ajax就是拿數據，從接口上取數據，把取到的數據根據不一樣特性，進行處理
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
//alert( xhr.responseText );
var data = JSON.parse( xhr.responseText );//轉換
var oUl = document.getElementById('ul1');//獲取
var html = '';//建立HTML
//循環當前的數組
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;//添加後放到oUl.innerHTML裏
} else {
alert('出錯了,Err：' + xhr.status);
}
//從接口上取數據，把取到的數據根據不一樣特性，進行處理
//ajax就是拿數據
}
}
6.get方式兩個問題
/*
1.緩存 在url？後面鏈接一個隨機數，時間戳
2.亂碼 編碼encodeURI
*/ //動態文件
原：xhr.open('get','1.txt',true);
改：xhr.open('get','2.get.php?username='+encodeURI('劉偉')+'&age=30&' + new Date().getTime(),true);
-->: + new Date().getTime() 表示後面鏈接一個隨機數，時間戳，可使數據實時更新
-->: '2.get.php?username='+encodeURI('劉偉')+'&age=30&' 將亂碼進行URL編碼，表示將漢字轉爲字符串輸出
7.post方式四個問題
1.數據放在那？
2.發送的數據類型？
xhr.open('post','2.post.php',true);
//post方式，數據放在send()裏面做爲參數傳遞 setRequestHeader表示設置請求頭，告訴後端發送過去的文檔類型是什麼
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明發送的數據類型
3.post沒有緩存問題
4.無需編碼
xhr.send('username=劉偉&age=30');//數據放在send()裏面做爲參數傳遞
8.完整案例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
/*
xhr.open('get','2.get.php?username='+encodeURI('劉偉')+'&age=30&' + new Date().getTime(),true);
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert('出錯了,Err：' + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="按鈕" id="btn" />
</body>
</html>
php
- 1. Ajax詳細介紹
- 2. 最全的ajax詳細介紹，ajax全
- 3. _MSC_VER詳細介紹 _MSC_VER詳細介紹
- 4. Jquery中AJAX參數詳細介紹
- 5. ANR詳細介紹
- 6. dubbo詳細介紹
- 7. 詳細介紹springData
- 8. redis 詳細介紹
- 9. DUBBO 詳細介紹
- 10. IPv6 詳細介紹
- 更多相關文章...
- • AJAX 簡介 - PHP教程
- • AJAX 簡介 - ASP 教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Ajax詳細介紹
- 2. 最全的ajax詳細介紹，ajax全
- 3. _MSC_VER詳細介紹 _MSC_VER詳細介紹
- 4. Jquery中AJAX參數詳細介紹
- 5. ANR詳細介紹
- 6. dubbo詳細介紹
- 7. 詳細介紹springData
- 8. redis 詳細介紹
- 9. DUBBO 詳細介紹
- 10. IPv6 詳細介紹