標籤：
不使用jquery來處理ajax請求該怎麼做？
首先要明確html中的某些資料需要從服務端獲得，也就是用戶端向服務端請求（request）資料，服務端就響應（response）這個請求，把用戶端要的資料給它。服務端返回的資料格式多樣，即可以是字串，也可以是數字，也可以是對象。用戶端接到這些資料後按自己的需要處理後顯示在Html頁面上。這個處理工作就交給Javascript來做。
Javascript處理Ajax非同步請求要注意三點：
1、建立一個新的XMLHttpRequest對象;
2、建立一個擷取資料的函數;
3、建立一個回呼函數;
我們的目標是在文字框內輸入名字傳遞給服務端，經過計算後在當前頁面顯示從服務端送回的資料。
<!DOCTYPE html><html> <body> <a href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/">Ajax study</a> </br> Enter your name: <input type="text" id="name" onChange="getInfo();" /> </br> Show Ajax return data: <span id="getInfo"></span> <script type="text/javascript"> // javascript Ajax // 建立新的請求對象 var request =new XMLHttpRequest(); // 擷取資料 function getInfo(){ var name=document.getElementById(‘name‘).value; var url="/get_info/"+escape(name); // 開啟請求 request.open("GET",url, true); // 指定回呼函數 request.onreadystatechange=updatePage; // 發送請求（發送的內容為null表示通過Get請求） request.send(null); } // 回呼函數（伺服器向網頁發起調用） function updatePage(){ if(request.readyState==4){ if(request.status==200){ // 讀取響應文本 var response=request.responseText; // 可以處理返回的文本。若是json字串則可轉為對象以便處理。 // 轉換為json對象的方式多種： var jsonObj=eval(‘(‘+response+‘)‘); // 或者： var jsonobj=JSON.parse(response); // 把資料返回給頁面 document.getElementById(‘getInfo‘).innerHTML=jsonobj.name; alert(‘You enter is : ‘+ jsonobj.name); } else if(request.status==404) alert(‘request url does not exist.‘); else alert(‘error:status code is :‘ + request.status) } } </script> </body></html>
這裡的
var response=request.responseText;
返回的就是一個字串：
"{\n "age": 2,\n "name": "Hello world "\n}"
服務端代碼：
# 這個顯示 info.html 頁面
@app.route(‘/info‘)def xxx(): return render_template(‘info.html‘)
# 這個是要執行的動作(必須要有個路由，html頁面裡的js需要這個url。函數名字隨便起。）
@app.route(‘/get_info/<name>‘)def x (name): ls ={‘name‘:name, ‘age‘:2} return jsonify(ls)
-- End --
Javascript與Ajax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
