當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

与后台交互方法一 ——Ajax

發布時間：2023/11/27 生活经验 34 豆豆

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

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

使用Ajax讀取數據時有以下幾點需要注意：

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

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

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

4.Ajax讀取的數據與擴展名無關。

5..用DOM創建元素

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

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

Post方法一般用于上傳數據，如用戶注冊。

三、創建Ajax對象：

高版本Ajax對象：XMLHttpRequest();

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

四、連接服務器方法：

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

五、請求狀態監控：

Onreadystatechange事件

readyState屬性：請求狀態

0：未初始化，剛創建出來

1：發送，已調用send()方法，正在發送請求

2: 載入完成，shend()方法完成，已收到全部響應內容

3：解析，正在解析響應內容

4：完成，響應內容解析完成，可以在客戶端調用了。

返回值為：responseText;

六、具體實現方式如下：

<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.創建Ajax對象

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

?????? {

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

?????? }

?????? else

?????? {

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

?????? }

??????

?????? //2.連接服務器（打開和服務器的連接）

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

??????

?????? //3.發送

?????? 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]

轉載于:https://www.cnblogs.com/ygl-web/p/3309188.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。