AJAX : Asynchronous JavaScript and XML?? 異步JavaScript和XML?? (XML更多的是被JSON格式替代使用)

AJAX 只做一件事情：異步獲取數(shù)據(jù)，更為重要的是還是JS對返回的數(shù)據(jù)進行操作。

異步獲取數(shù)據(jù)極大地改善web與用戶的數(shù)據(jù)交互(如下圖左側(cè)為傳統(tǒng)web,右側(cè)為借助AJAX實現(xiàn)數(shù)據(jù)交互)

?

一. js中AJAX的原理及步驟

1. 創(chuàng)建AJAX對象；

2. 設(shè)置請求方式，請求地址，是否異步或同步請求；? (POST方式需要設(shè)置數(shù)據(jù)編碼請求頭信息)

3. 發(fā)送數(shù)據(jù)進行AJAX請求；

4. 根據(jù)服務(wù)器返回狀態(tài)碼進行處理；

1. 創(chuàng)建AJAX對象

var xhr = null; //創(chuàng)建一個AJAX對象

if(window.XMLHttpRequest){ //不能直接判斷XMLHttpRequest,如果不存在會報錯，判斷一個對象的屬性，如果不存在，也不會報錯

xhr = new XMLHttpRequest(); //標準瀏覽器

}else{

xhr= new ActiveXObject(‘Microsoft.XMLHTTP‘); //兼容IE6

}

可以封裝一個創(chuàng)建AJAX對象的函數(shù)

//第一種方式

functioncreateXhr(){var xhr = null;if(window.XMLHttpRequest){

xhr= newXMLHttpRequest();

}else{

xhr= new ActiveXObject(‘Microsoft.XMLHTTP‘);

}returnxhr;

}//第二種方式

functioncreateXhr(){var xhr = null;try{

xhr= newXMLHttpRequest();

}catch(e){

xhr= new ActiveXObject(‘Microsoft.XMLHTTP‘);

}returnxhr;

}

2. 設(shè)置請求方式，請求地址，是否異步或同步請求；

xhr.open( method, url, [async] ) ;

method: 請求方式，主要有GET和POST (POST方式需要設(shè)置數(shù)據(jù)編碼請求頭信息setRequestHeader(header,value) )

url: 請求地址;

async: 是否異步請求，默認為true,

3. 發(fā)送數(shù)據(jù)進行AJAX請求；

xhr.send(content);

GET方式與POST方式的區(qū)別

GET: 只能傳輸字符串數(shù)據(jù)， 數(shù)據(jù)名稱和數(shù)據(jù)值用等號連接，放置在url?后面，并用&進行連接；

POST: 可以傳輸文本，二進制，字符串等數(shù)據(jù)，數(shù)據(jù)名稱和數(shù)據(jù)值用等號連接，利用send()方法發(fā)送，并用&進行連接；

GET方式請求與發(fā)送

xhr.open("GET", "server.php?username=xiaopeng&age=9"); //get方式的數(shù)據(jù)放置在url？后面進行發(fā)送

xhr.send();

POST方式請求與發(fā)送

xhr.open(‘post‘,‘server.php‘); //默認異步方式，可以不寫

xhr.setRequestHeader(‘content-type‘, ‘a(chǎn)pplication/x-www-form-urlencoded‘); //POST方式需要申明發(fā)送的數(shù)據(jù)類型

xhr,send(‘username=xiaopeng&age=9‘); //傳輸?shù)臄?shù)據(jù)通過send()方法發(fā)送

4. 根據(jù)服務(wù)器返回狀態(tài)碼進行處理；

onreadystatechange ：當Ajax對象的狀態(tài)碼發(fā)生改變時所觸發(fā)的回調(diào)函數(shù)

status ：http的響應(yīng)狀態(tài)碼

statusText ：http的響應(yīng)狀態(tài)文本

reponseText ：服務(wù)器端返回的數(shù)據(jù)(字符串形式)

responseXML ：服務(wù)器端返回的數(shù)據(jù)(xml形式)

status ：http的響應(yīng)狀態(tài)碼有

0：表示對象已建立，但未初始化

1：表示對象已初始化，但未發(fā)送

2：已調(diào)用send方法進行請求

3：正在接收數(shù)據(jù)(接收到一部分)

4：接收完成

xhr.onreadystatechange = function() { //當請求狀態(tài)改變的時候，觸發(fā)事件

if (xhr.readyState===4) { //AJAX工作狀態(tài)為4時,表示請求完成

if (xhr.status===200) { //http狀態(tài)碼為200時，表示服務(wù)器工作成功

alert (xhr.responseText);

}else{

alert("發(fā)生錯誤：" +request.status);

}

}

}

小實例：注冊時檢測用戶名是否存在

//JavaScript代碼

//綁定失去焦點事件

var oUser = document.getElementById("username");

oUser.οnblur= function(){//獲取用戶名

var username =oUser.value;//生成URL

var url = ‘demo.php?username=‘ +username;//創(chuàng)建AJAX對象

var xhr =createXhr();//初始化對象

xhr.open(‘get‘,url);//設(shè)置回調(diào)函數(shù)，可以設(shè)置在send()之前

xhr.onreadystatechange = function(){//當狀態(tài)碼為4，響應(yīng)狀態(tài)碼為200時

if (xhr.readyState ==4 && xhr.status == 200) {//判斷服務(wù)器返回情況

if (xhr.responseText ==1 ) { //這里根據(jù)后臺設(shè)置接口判斷

document.getElementById("result").innerHTML = ‘該用戶名已被占用‘;

}else{

document.getElementById("result").innerHTML = ‘該用戶名可以使用‘;

}

};

}

//發(fā)送AJAX請求；

xhr.send();

}

//php代碼

//查詢用戶名是否存在

//獲取數(shù)據(jù)

$username = $_GET[‘username‘];//連接數(shù)據(jù)庫

mysql_connect(‘localhost‘,‘root‘,‘1234‘);//選擇數(shù)據(jù)庫

mysql_select_db(‘db_201404‘);//設(shè)置字符編碼

mysql_query(‘set names utf8‘);//查詢語句

$sql = "select * from admin where username=‘$username‘";$result = mysql_query($sql);//受影響行數(shù)

$count = mysql_num_rows($result);//關(guān)閉數(shù)據(jù)庫

mysql_close();if ($count>0) {echo 1; //表示存在

}else{echo 2; //表示不存在

}

實例效果：

原文：http://www.cnblogs.com/Peng2014/p/4683403.html

總結(jié)

以上是生活随笔為你收集整理的js中报错 ajax不存在,AJAX的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。