Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 久久不射电影,91麻豆国产在线观看,九一国产精品视频 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          AJAX 實例
          
        
           
          
	
	
          
		
                        
          AJAX 實例
           一個簡單的AJAX實例
          創建一個簡單的XMLHttpRequest，從一個TXT文件中返回數據。
           用AJAX加載 XML 文件
          創建一個簡單的XMLHttpRequest，從一個XML文件中返回數據。
           用AJAX進行一次 HEAD 請求
          檢索資源（文件）的頭信息。
           用AJAX進行一次指定的 HEAD 請求
          檢索資源（文件）的指定頭信息。
           用AJAX從ASP 文件返回數據
          當用戶在文本框內鍵入字符時網頁如何與Web服務器進行通信
           用AJAX從數據庫返回數據
           用AJAX網頁如何獲取數據庫中的信息
           用AJAX從XML 文件返回數據
          創建一個XMLHttpRequest從XML文件中檢索數據并顯示在一個HTML表格中。
           用callback函數的AJAX實例
          用一個callback函數創建一個XMLHttpRequest，并從一個TXT文件中檢索數據。
          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
          在所有主流的網站，基本上都用到了ajax技術，通過異步請求數據已經是一個很普及的實現方式。市面上主流的web前端框架也都有自己封裝的ajax，而且都是大同小異的。也就是說，Ajax這個輪子已經是多的不能再多了，那為什么我們還要自己封裝一個Ajax呢？
          想要了解一個技術或者某個功能的實現原理，只有動手實踐才能真正的了解。就如我在csdn上第一篇博客的博文描述。探索技術的路上本應該自己造輪子，即使市面上有再多的選擇，自己動手嘗試也是必要的，第一次嘗試必然會問題眾多，但你不覺得解決他是一件很有成就感的事情嗎，這樣才能帶給你更大的進步和更深刻的領悟。
          廢話不說，先來寫一個最基礎的ajax：
          [javascript] view plain copy
          1. function ajax(a){ 
          2.  var ajax = new XMLHttpRequest(); 
          3.  ajax.onreadystatechange = function(){ 
          4.  if (ajax.readyState == 4 && ajax.status == 200) { 
          5.  a.success(JSON.stringify(ajax.responseText)) 
          6.  } 
          7.  } 
          8.  ajax.open(a.method, a.url,true) 
          9.  ajax.send(a.data) 
          10. } 
          11.  
          12. ajax({ 
          13.  method:'get', 
          14.  url:'http://127.0.0.1:8081/test', 
          15.  success:function(res){ 
          16.  console.log(res) 
          17.  } 
          18. }) 
          一個ajax出爐了，通過調用、填寫參數即可請求到服務器。先來分析一下這個ajax的結構，可以看得出來，其實很簡單，只是new了一個XMLHttpRequest對象，然后通過onreadystatechange方法來處理返回值，現在我們只是做了一個判斷，當請求成功時就調用success方法，如果請求失敗，我們還沒有寫上去，后面我們慢慢完善這個ajax的邏輯。
          然后調用ajax的open方法，open方法里有三個參數，第一個是請求方式（如：get或post），第二個是請求的url地址，第三個是一個bool值，是否要異步請求。
          最后使用send方法帶上參數發送請求即可。
          這是，我的服務器已經收到一個請求，但他報了404錯誤，也就是找不到對應的頁面或路由，這時success方法也不會被調用執行。
          那我們再來完善一下這個新生的ajax。我們只需要在onreadystatechange方法里增加一個條件，當請求不成功時調用自身的error方法：
          [javascript] view plain copy
          1. ajax.onreadystatechange = function(){ 
          2.  if (ajax.readyState == 4 && ajax.status == 200) { 
          3.  a.success(JSON.stringify(ajax.responseText)) 
          4.  }else{ 
          5.  a.error(ajax) 
          6.  } 
          7. } 
          這樣我們就可以在ajax請求的時候加上error方法，當ajax請求失敗的時候執行我們想要執行的操作?，F在我們拋除跨域請求的問題，當你發送post請求時，你會發現后臺接收不到傳過來的參數，調用如下：
          [javascript] view plain copy
          1. ajax({ 
          2.  method:'get', 
          3.  url:'http://localhost:8081/test', 
          4.  data:'a=1', 
          5.  success:function(res){ 
          6.  console.log(res) 
          7.  }, 
          8.  error:function(res){ 
          9.  console.log(res) 
          10.  } 
          11. }) 
          后端打印一下傳過來的參數，為空。
          出現這個問題的原因主要是請求頭沒有聲明，這時候我們需要初始化聲明一下請求頭，那我們加入一行代碼：
          [javascript] view plain copy
          1. ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
          設置Conten-type為application/x-www-form-urlencoded，現在后端應該是已經可以收到參數了。那我們現在的ajax調用時實在太繁瑣，有些東西我們不想填的我們應該給他設置一個默認值，不然就會報錯。
          比如error方法、method、還有是否異步的bool值等等。那我們再加入一些默認值，現在的ajax是這樣的：
          [javascript] view plain copy
          1. function ajax(a){ 
          2.  a.method = a.method || 'get'; 
          3.  a.ajax = a.ajax || true; 
          4.  a.error = a.error || function(){ 
          5.  console.warn('Ajax請求失敗'); 
          6.  }; 
          7.  var ajax = new XMLHttpRequest(); 
          8.  ajax.onreadystatechange = function(){ 
          9.  if (ajax.readyState == 4 && ajax.status == 200) { 
          10.  a.success(JSON.stringify(ajax.responseText)) 
          11.  }else{ 
          12.  a.error(ajax) 
          13.  } 
          14.  } 
          15.  ajax.open(a.method, a.url,a.ajax) 
          16.  ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
          17.  ajax.send(a.data) 
          18. } 
          現在的ajax還存在一個問題，在post請求的時候，如果我們要傳參，是需要通過字符串傳參的。那這種的書寫規則并不是很友好的：
          [javascript] view plain copy
          1. a=1&b=2 
          而一般框架的傳參都是通過json的格式來輸入的，我們也不能偏離大眾習慣搞獨立，當然我們也要保留字符串的傳參方式，只是要擴展功能。
          那我們需要加一個控制格式的參數，我們這里用dataType這個參數來控制傳參格式，默認是字符串格式傳參好了，可以選擇json格式進行傳參即可。如果是json格式傳參，我們需要把json轉化成字符串類型，代碼如下：
          [javascript] view plain copy
          1. a.dataType = a.dataType || 'string'; 
          2. var data = a.data; 
          3. if (a.dataType == 'json') { 
          4.  var nowData = ""; 
          5.  for (var i in data) { 
          6.  nowData += (nowData != ''?'&':'')+i+'='+data[i]; 
          7.  } 
          8.  data = nowData; 
          9. } 
          這樣，我們的ajax也就可以通過json格式進行傳參了?，F在的ajax完整代碼和調用方式如下：
          [javascript] view plain copy
          1. function ajax(a){ 
          2.  a.method = a.method || 'get'; 
          3.  a.ajax = a.ajax || true; 
          4.  a.dataType = a.dataType || 'string'; 
          5.  a.error = a.error || function(){ 
          6.  console.warn('Ajax請求失敗'); 
          7.  }; 
          8.  var ajax = new XMLHttpRequest(); 
          9.  ajax.onreadystatechange = function(){ 
          10.  if (ajax.readyState == 4 && ajax.status == 200) { 
          11.  a.success(JSON.stringify(ajax.responseText)) 
          12.  }else{ 
          13.  a.error(ajax) 
          14.  } 
          15.  } 
          16.  var data = a.data; 
          17.  if (a.dataType == 'json') { 
          18.  var nowData = ""; 
          19.  for (var i in data) { 
          20.  nowData += (nowData != ''?'&':'')+i+'='+data[i]; 
          21.  } 
          22.  data = nowData; 
          23.  } 
          24.  ajax.open(a.method, a.url,a.ajax) 
          25.  ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
          26.  ajax.send(data) 
          27. } 
          28. //調用Ajax示例 
          29. ajax({ 
          30.  method:'post', 
          31.  url:'http://localhost:8081/test', 
          32.  dataType:'json', 
          33.  data:{ 
          34.  a:'1', 
          35.  b:'2' 
          36.  }, 
          37.  success:function(res){ 
          38.  console.log(res) 
          39.  } 
          40. }) 
          現在這個Ajax基本上已經可以滿足業務上的所以需求，不過還有一點沒有實現，我們的Ajax不能設置請求頭？！為了一些特殊需求的情況下，我們還是要把這一功能加上的：
          [javascript] view plain copy
          1. if (a.requestHeader) { 
          2.  for (var i in a.requestHeader) { 
          3.  ajax.setRequestHeader(i,a.requestHeader[i]) 
          4.  } 
          5. } 
          現在的完整代碼入下：
          [javascript] view plain copy
          1. function ajax(a){ 
          2.  a.method = a.method || 'get'; 
          3.  a.ajax = a.ajax || true; 
          4.  a.dataType = a.dataType || 'string'; 
          5.  a.error = a.error || function(){ 
          6.  console.warn('Ajax請求失敗'); 
          7.  }; 
          8.  var ajax = new XMLHttpRequest(); 
          9.  ajax.onreadystatechange = function(){ 
          10.  if (ajax.readyState == 4 && ajax.status == 200) { 
          11.  a.success(JSON.parse(ajax.responseText)) 
          12.  }else if (ajax.readyState != 4 && ajax.status != 200){ 
          13.  a.error(ajax) 
          14.  } 
          15.  } 
          16.  var data = a.data; 
          17.  if (a.dataType == 'json') { 
          18.  var nowData = ""; 
          19.  for (var i in data) { 
          20.  nowData += (nowData != ''?'&':'')+i+'='+data[i]; 
          21.  } 
          22.  data = nowData; 
          23.  } 
          24.  ajax.open(a.method, a.url,a.ajax) 
          25.  if (a.requestHeader) { 
          26.  for (var i in a.requestHeader) { 
          27.  ajax.setRequestHeader(i,a.requestHeader[i]) 
          28.  } 
          29.  } 
          30.  ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
          31.  ajax.send(data) 
          32. } 
          完整示例代碼文件：JavaScript封裝Ajax完整示例代碼
          JAX 可用來與 XML 文件進行交互式通信。
           AJAX XML 實例
          下面的例子將演示網頁如何使用 AJAX 來讀取來自 XML 文件的信息：
           實例
          Get CD info
           實例解析 - loadXMLDoc() 函數
          當用戶點擊上面的"獲得 CD 信息"這個按鈕，就會執行 loadXMLDoc() 函數。
           loadXMLDoc() 函數創建 XMLHttpRequest 對象，添加當服務器響應就緒時執行的函數，并將請求發送到服務器。
           當服務器響應就緒時，會構建一個 HTML 表格，從 XML 文件中提取節點（元素），最后使用已經填充了 XML 數據的 HTML 表格來更新 txtCDInfo 占位符：
          function loadXMLDoc(url)
          {
          var xmlhttp;
          var txt,xx,x,i;
          if (window.XMLHttpRequest)
           {// code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp=new XMLHttpRequest();
           }
          else
           {// code for IE6, IE5
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
           }
          xmlhttp.onreadystatechange=function()
           {
           if (xmlhttp.readyState==4 && xmlhttp.status==200)
           {
           txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
           x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
           for (i=0;i<x.length;i++)
           {
           txt=txt + "<tr>";
           xx=x[i].getElementsByTagName("TITLE");
           {
           try
           {
           txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
           }
           catch (er)
           {
           txt=txt + "<td>&nbsp;</td>";
           }
           }
           xx=x[i].getElementsByTagName("ARTIST");
           {
           try
           {
           txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
           }
           catch (er)
           {
           txt=txt + "<td>&nbsp;</td>";
           }
           }
           txt=txt + "</tr>";
           }
           txt=txt + "</table>";
           document.getElementById('txtCDInfo').innerHTML=txt;
           }
           }
          xmlhttp.open("GET",url,true);
          xmlhttp.send();
          }
           AJAX 服務器頁面
          上面這個例子中使用的服務器頁面實際上是一個名為 "cd_catalog.xml" XML 文件。
           如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲综合无码一区二区痴汉|
久久亚洲色一区二区三区|
国产成人午夜精品一区二区三区|
亚洲AV无码一区二区三区性色|
无码精品前田一区二区|
亚洲男人的天堂一区二区|
海角国精产品一区一区三区糖心|
国模私拍一区二区三区|
精品久久久久久无码中文字幕一区|
无码日韩精品一区二区免费暖暖|
eeuss鲁片一区二区三区|
日韩免费一区二区三区在线播放|
一夲道无码人妻精品一区二区|
亚洲国产高清在线一区二区三区|
视频一区二区三区免费观看|
无码人妻一区二区三区精品视频|
国产suv精品一区二区6|
国产一区二区三区播放|
欧洲精品码一区二区三区免费看
|
四虎在线观看一区二区|
亚洲国产AV一区二区三区四区|
中文乱码人妻系列一区二区|
国产乱码精品一区二区三区
|
久久国产高清一区二区三区|
一区二区精品在线观看|
欧洲精品无码一区二区三区在线播放|
国产成人无码AV一区二区在线观看
|
成人免费视频一区二区三区|
国产一区二区三区在线|
中文字幕一区二区三区乱码|
无码人妻视频一区二区三区
|
国产伦精品一区二区三区精品
|
国产精品乱码一区二区三|
99精品国产高清一区二区麻豆|
亚洲熟女综合色一区二区三区|
国产精品无码一区二区三区免费|
丰满人妻一区二区三区视频|
色欲精品国产一区二区三区AV|
亚洲欧洲日韩国产一区二区三区|
国产成人av一区二区三区在线观看|
久久久国产一区二区三区|