不使用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 --
时间： 2024-12-21 20:49:42