Javascript与Ajax
不使用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 --
