關於使用原生JavaScript發送異步請求給服務端。
准備工作：
代碼編寫工具用的是sublime 服務端使用的是wamp搭的一個本地Apache服務器，主要用來返回數據 方便測試
步驟：
瀏覽器端
html標簽綁定事件發送ajax請求---->
五步操作：1 創建異步對象XMLHttpRequest;
2 設置method url
3 發送請求給服務端
4 注冊事件
5 在事件中獲取服務端返回的數據，進行操作。
服務器端
1 獲取請求數據
2 返回結果給瀏覽器
下面來一個小demo1做一個簡單的請求操作 點擊按鈕發送請求給服務器端，返回圖片地址，渲染div的背景圖
nobibi 上代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 .div1{ 5 width: 200px; 6 height: 200px; 7 border: 1px solid red; 8 margin: 20px auto; 9 } 10 .div2{ 11 width: 300px; 12 height: 100px; 13 border: 1px solid red; 14 margin: 20px auto; 15 } 16 body{ 17 text-align: center; 18 } 19 </style> 20 <head> 21 <meta charset="utf-8"> 22 </head> 23 <body> 24 <div class='div1'></div> 25 <div class='div2'></div> 26 <input type="button" value="baby" class='starBtn'> 27 <input type="button" value="hxm" class='starBtn'> 28 <input type="button" value="lh" class='starBtn'> 29 </body> 30 </html> 31 <script> 32 //獲取按鈕list 33 var btnList = document.querySelectorAll('.starBtn'); 34 //循環綁定點擊事件 35 for (var i = 0; i < btnList.length; i++) { 36 btnList[i].onclick = function(){ 37 //新建異步處理對象 38 var ajax = new XMLHttpRequest(); 39 //設置請求類型為post,請求的頁面為server1.php 40 ajax.open('post','server1.php'); 41 //因為是post請求所以必須加上setRequestHeader(get請求可以忽略) 42 ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 43 //請求所帶的參數 name=this.value 44 ajax.send('name='+this.value); 45 //綁定onreadystatechange事件 46 ajax.onreadystatechange=function(){ 47 //判斷如果請求的狀態是否成功 48 if (ajax.readyState==4&&ajax.status==200) { 49 //根據返回值ajax.responseText操作dom元素更改div的背景圖片 50 document.querySelector('.div1').style.background = 'url('+ajax.responseText+') no-repeat center/cover'; 51 document.querySelector('.div2').innerHTML = ajax.responseText 52 }; 53 } 54 } 55 }; 56 57 </script>
瀏覽器端代碼結束。
下面是服務端代碼，服務端是用php寫的簡單幾句
<?php //獲取post請求的數據 $key = $_POST['name']; //關系數組 $starArr = array( 'baby'=>'images/baby.jpg', 'hxm'=>'images/hxm.jpg', 'lh'=>'images/lh.jpg' ); $value = $starArr[$key]; //返回圖片地址 echo $value; ?>
至此 一個簡單的使用原生JavaScript寫的異步請求 完成。