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 --
Javascript与Ajax的更多相关文章
- 最新JavaScript、Ajax典藏级学习资料下载分类汇总 (2011年12月21日更新)
其他网站开发相关资料 超强HTML和xhtml,CSS精品学习资料下载汇总 最新htm ...
- 初识JavaScript,Ajax,jQuery,并比较三者关系
一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...
- JavaScript实现Ajax小结
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<TCP的三次握手和四次挥手> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临 ...
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- javascript版Ajax请求
什么是Ajax请求,Ajax也就是“Asynchronous JavaScript and XML”(异步JavaScript和XML),无刷新数据读取.能减少流量的消耗,也提高了浏览的流畅性,给用户 ...
- javascript进阶——Ajax
统的Web 页面和应用中,用户每点击页面上的某个部分,浏览器就会向服务器发出一个请求,等待服务器做出响应,然后返回一个完整新网页,但在大多数情况下用户不得不忍受页面闪烁和长时间的等待.随着Web技术的 ...
- Javascript and AJAX with Yii(在yii 中使用 javascript 和ajax)
英文原文:http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii /*** http://www.yiiframework. ...
- javascript实现ajax
什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...
- JavaScript和ajax 跨域的案例
今天突然想看下JavaScript和ajax 跨域问题,然后百度看了一下,写一个demo出来 <!DOCTYPE html> <html xmlns="http://www ...
随机推荐
- svn跳过某个目录
svn up --set-depth exclude dir2 http://stackoverflow.com/questions/1439176/svn-can-you-remove-direct ...
- Iaas概述
IAAS :设施即服务,为开发者提供存储,计算,网络等资源,整体架构如下图: 整体分为三个部分: 1.Iaas云的管理部分:对整个云有超级用户管理权限,可以查看监控整个云中的资源,租户信息,并进行管理 ...
- 新建虚拟目录使用UNC共享文件夹(即:虚拟目录使用UNC共享文件夹)的方法 -摘自网络
新建虚拟目录使用UNC共享文件夹(即:虚拟目录使用UNC共享文件夹)的方法1.UNC路径:\\192.168.1.2\test\,假设连接该UNC路径的用户名为:web,密码为:123 2.在原web ...
- 1分钟内检查Linux服务器性能的10条命令
如果你的Linux服务器突然负载暴增,告警短信快发爆你的手机,如何在最短时间内找出Linux性能问题所在?Netflix性能工程团队的Brendan Gregg写下了这篇博文,来看他们是怎样通过十条命 ...
- (转)Http协议经典详解
转自:http://blog.csdn.net/gueter/archive/2007/03/08/1524447.aspx Author :Jeffrey 引言 HTTP 是一个属于应用层的面向对象 ...
- HTML 5的革新:结构之美
HTML 5是什么,无须我在这里赘述了.对于HTML 5的革新,按我的理解,可以总结为语义明确的标签体系.化繁为简的富媒体支持.神奇的本地数据存储技术.不需要插件的富动画(canvas).强大的API ...
- 发布ASP.NET网站时的设置
在ASP.NET网站开发完成之后,一般都要进行发布,然后再使用. 点击“目标位置”后的按钮可以选择将网站发布到的位置,有“本地.本机IIS.FTP站点.远程网站站点”四个选项. 另外,发布网站时还有四 ...
- 关于三目运算符与if语句的效率与洛谷P2704题解
题目描述 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用“H” 表示),也可能是平原(用“P”表示),如下图.在每一格平原地形上最 ...
- MVC基本学习
asp.net MVC ViewData详解 http://www.cnblogs.com/gaopin/archive/2012/11/13/2767515.html Asp.net MVC中的Vi ...
- Oracle-11g-R2(11.2.0.3.x)RAC Oracle Grid & Database 零宕机方式升级 PSU(自动模式)
升级环境: 1.源库版本: Grid Infrastructure:11.2.0.3.13 Database:11.2.0.3.13 2.目标库版本: Grid Infrastructure:11.2 ...