Ajax基礎2

什么是服務器

? ? ? ? ? ?網頁瀏覽過程的分析

? ? ? ? ? ?如何配置自己的服務器程序（AMP）

什么是Ajax

? ? ? ? ? ?無刷新數據讀取

? ? ? ? ? ?異步，同步

Ajax基礎(2)

? ? ? ? ? ?使用Ajax

? ? ? ? ? ? ? ? 基礎請求顯示txt的文件

? ? ? ? ? ? ? ? 字符集編碼

? ? ? ? ? ? ? ? 緩存，阻止緩存

? ? ? ? ? ?動態數據，請求js或（json）文件

? ? ? ? ? ? ? eval的使用

? ? ? ? ? ? ? DOM創建元素

? ? ? ? ? 局部刷新，請求并顯示部分網頁文件

Ajax原理

http請求方法

function ajax(url, fnSucc, fnFaild)
{//1.創建Ajax對象var oAjax=null;if(window.XMLHttpRequest){oAjax=new XMLHttpRequest();}else{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)    //成功
            {fnSucc(oAjax.responseText);}else{if(fnFaild)fnFaild(oAjax.status);}}};
}

簡單ajax

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{var oBtn=document.getElementById('btn1');oBtn.onclick=function (){ajax('data.txt', function (str){//str->'[1,2,3,4]'//alert(str);var arr=eval(str);alert(arr[3]);});};
};
</script>
</head><body>
請求服務器上的文件，這個文件放了一個數組<br />

請求文件放置數組里面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{var oUl=document.getElementById('ul1');var aBtn=document.getElementsByTagName('a');var i=0;for(i=0;i<aBtn.length;i++){aBtn[i].index=i;aBtn[i].onclick=function (){ajax('page'+(this.index+1)+'.txt', function (str){var aData=eval(str);oUl.innerHTML='';for(i=0;i<aData.length;i++){var oLi=document.createElement('li');oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';oUl.appendChild(oLi);}});};}
};
</script>
</head><body>
<ul id="ul1">
</ul>
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
</body>
</html>

ajax和json的使用

? ? ? ? ? ? ? ? ? ? ? ?GET---用于獲取數據（瀏覽帖子）；

? ? ? ? ? ? ? ? ? ? ? ?POST--用于上傳數據（如用戶注冊）

? ? ? ? ? ? ? ? ? ? ? ? GET，POST的區別

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?get是在url的傳數據，安全性，容量，

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 緩存

?本節重點

什么是Ajax，同步和異步的區別

http請求方法中，get和post方式用什么區別

轉載于:https://www.cnblogs.com/hack-ing/p/5595145.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/256953.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/256953.shtml
英文地址，請注明出處：http://en.pswp.cn/news/256953.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！