當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

与后台交互方法一 ——Ajax

發(fā)布時間：2023/11/27 生活经验 35 豆豆

生活随笔收集整理的這篇文章主要介紹了与后台交互方法一 ——Ajax 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、Ajax：為無刷新讀取服務(wù)器端數(shù)據(jù)，常用在用戶注冊、在線聊天室等。

使用Ajax讀取數(shù)據(jù)時有以下幾點需要注意：

1.字符集編碼前后臺要一致，否則前臺顯示的數(shù)據(jù)為亂碼。

2.使用隨機數(shù)或時間清除緩存、阻止緩存，防止服務(wù)器端文件內(nèi)容變化時，瀏覽器端沒有及時更新。

3. Ajax讀取的所有數(shù)據(jù)都是字符串，所以請求JSON文件時用eval解析。

4.Ajax讀取的數(shù)據(jù)與擴展名無關(guān)。

5..用DOM創(chuàng)建元素

二、HTTP請求兩種不同的方法：

Get方法一般用于獲取數(shù)據(jù)，如瀏覽帖子。Get是在url里傳數(shù)據(jù)：安全性低，容量小等。

Post方法一般用于上傳數(shù)據(jù)，如用戶注冊。

三、創(chuàng)建Ajax對象：

高版本Ajax對象：XMLHttpRequest();

低版本(IE6-8)Ajax對象：ActiveXObject(“Microsoft.XMLHTTP”);

四、連接服務(wù)器方法：

Open(方法，文件名，異步傳輸)

五、請求狀態(tài)監(jiān)控：

Onreadystatechange事件

readyState屬性：請求狀態(tài)

0：未初始化，剛創(chuàng)建出來

1：發(fā)送，已調(diào)用send()方法，正在發(fā)送請求

2: 載入完成，shend()方法完成，已收到全部響應(yīng)內(nèi)容

3：解析，正在解析響應(yīng)內(nèi)容

4：完成，響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了。

返回值為：responseText;

六、具體實現(xiàn)方式如下：

<html>
?	<head>
?	<meta charset="utf-8">
?	<meta name="author" content="" />
?	<meta name="copyright" content="" />
?	<title></title>
?	<style>
?	?
?	</style>
?	<script src="ajax.js"></script>
?	<script>
?	window.οnlοad=function ()
?	{
?	var oBtn=document.getElementById('btn1');
?	?
?	oBtn.οnclick=function ()
?	{
?	ajax('arr.txt', function (str){
?	var arr=eval(str);
?	?
?	alert(arr[0]);
?	?
?	?
?	//alert(str+12);
?	//alert(arr.length);
?	?
?	//alert(arr[0]);
?	});
?	};
?	};
?	</script>
?	</head>
?	?
?	<body>
?	<input type="button" value="aaa" id="btn1" />
?	</body>
?	</html>

Ajax.js

function ajax(url, fnSucc, fnFaild)

{

?????? //1.創(chuàng)建Ajax對象

?????? if(window.XMLHttpRequest)

?????? {

?????? ?????? var oAjax=new XMLHttpRequest();

?????? }

?????? else

?????? {

?????? ?????? var oAjax=new ActiveXObject("Microsoft.XMLHTTP");

?????? }

??????

?????? //2.連接服務(wù)器（打開和服務(wù)器的連接）

?????? oAjax.open('GET', url, true);

??????

?????? //3.發(fā)送

?????? oAjax.send();

??????

?????? //4.接收

?????? oAjax.onreadystatechange=function ()

?????? {

?????? ?????? if(oAjax.readyState==4)

?????? ?????? {

?????? ?????? ?????? if(oAjax.status==200)

?????? ?????? ?????? {

?????? ?????? ?????? ?????? //alert('成功了：'+oAjax.responseText);

?????? ?????? ?????? ?????? fnSucc(oAjax.responseText);

?????? ?????? ?????? }

?????? ?????? ?????? else

?????? ?????? ?????? {

?????? ?????? ?????? ?????? //alert('失敗了');

?????? ?????? ?????? ?????? if(fnFaild)

?????? ?????? ?????? ?????? {

?????? ?????? ?????? ?????? ?????? fnFaild();

?????? ?????? ?????? ?????? }

?????? ?????? ?????? }

?????? ?????? }

?????? };

}

Arr.txt

[2013,9,9]

轉(zhuǎn)載于:https://www.cnblogs.com/ygl-web/p/3309188.html

總結(jié)

以上是生活随笔為你收集整理的与后台交互方法一 ——Ajax的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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