Javascript与Ajax

时间:2022-04-30 02:43:13

  不使用jquery来处理ajax请求该怎么做?
  首先要明确html中的某些数据需要从服务端获得,也就是客户端向服务端请求(request)数据,服务端就响应(response)这个请求,把客户端要的数据给它。服务端返回的数据格式多样,即可以是字符串,也可以是数字,也可以是对象。客户端接到这些数据后按自己的需要处理后显示在Html页面上。这个处理工作就交给Javascript来做。
    Javascript处理Ajax异步请求要注意三点:
  1、创建一个新的XMLHttpRequest对象;
  2、创建一个获取数据的函数;
  3、创建一个回调函数;

  我们的目标是在文本框内输入名字传递给服务端,经过计算后在当前页面显示从服务端送回的数据。

Javascript与Ajax

Javascript与Ajax

<!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 --