javascript 进阶篇3 Ajax 、JSON、 Prototype介绍


Posted in Javascript onMarch 14, 2012

Ajax
这个词听了不少,但是其实并没有真的接触过,于是在这里稍微了解一下。
Ajax技术的创新之处在于,改善了传统的“请求-等待-响应-刷新-返回数据”模式,在信息返回之前,用户可以继续自己的操作,当前页面不会因为请求而刷新。这样大大的提高了交互性。
Ajax其实并不是一个技术,而是由许多技术组成的。最大的特色之一就是可以异步传输,实现多线程服务。
Ajax的异步传输,依靠的是js中的XMLHttpRequst对象,于是我们从它入手。
XMLHttpRequest是XMLHttp组建的一个抽象对象,用于数据交互。在IE中,XMLHttpRequest作为一个ActiveX控件,在FF Opera中作为一个js的内置对象。
创建XMLHttpRequest对象的封装代码:

<script type="text/javascript"> 
var xmlHttp=false; 
var headType=""; 
function createXmlRequest(){ 
if(window.ActiveObject){ // IE 
try{ 
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
}catch(e){ 
try{ 
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}catch(e){ 
window.alert("create XML Request failed "+e); 
} 
} 
}else if(window.XMLHttpRequest){ // FF 
xmlHttp=new XMLHttpRequest(); 
} 
if(!xmlHttp){ 
window.alert("create XML Request failed"); 
} 
} 
</script>

ReadyState属性:
0=未初始化 1=初始化 2=发送数据 3=数据传送中 4=完成
responseText 属性:
1、2=responseText是个空字符串 3=正在接收 4=接收完成
responseXML属性:
执行过send()后,如果返回正确的xml格式数据,可以使用XMLHttpRequest接收返回的数据。responseXML可以把返回信息格式化为XML Document对象,类型为text/xml 如果不包含则返回null。
status属性:
属性send()后,可以属性status接收读取事物状态,只有ReadyState为3、4时可以使用这个属性,否则读取status时将会发生错误。常见的有以下几个:
100=客户必须继续发出请求 200=交易成功 400=错误请求 403=请求不允许 404=没有发现文件,查询或URL 500=服务器内部错误 502=服务器暂不可用 505=服务器不支持或拒绝请求头中指定的HTTP版本。
statusText属性:
send()方法后,通过statusText读取事务状态,statusText返回当前HTTP请求的状态行,只有当readyState为3 4时才可以使用这个属性,否则发生错误。
onreadystatechange事件:
这个事件属性值发生变化时所要执行的操作。
abort()方法:
停止一个XMLHttpRequest对象对HTTP的请求,把该对象恢复到初始状态。
open()方法:
创建一个新的HTTP请求,并指定方法,URL及验证信息等,语法是: xmlHttp.open(method,url,mode,user,psd);
method表示请求方法,有post, get, put等,忽略大小写。url是目的地址,mode是不二类型参数,指定请求是否为异步方式,默认为true。
调用open()方法后,readyState属性设置为1.
send()办法:
xmlHttp.send(content);content是要发送的内容,没有可以忽略。
setRequestHeader()方法:
setRequestHeader(header, value)设定单个HTTP头信息,当readyState为1时,可以在open()后调用此方法,否则将返回一个异常,如果已存在则原来的将覆盖。value用样是一个字符串型数据,表示头名称的值。
getResponseHeader()方法:
通过读取首部信息,可以读取到content-type(内容类型), content-length(内容长度), last-modify(最后一次修改)日期等,根据具体网站不同。
getAllResponseHeaders()方法:
获得全部的首部信息。
接下来举个例子,就是获取头信息的:
<html> 
<head> 
<title>Ajax test</title> 
<script type="text/javascript"> 
var xmlHttp=false; 
var headType=""; 
function createXmlRequest(){ 
if(window.ActiveObject){ // IE 
try{ 
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
}catch(e){ 
try{ 
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}catch(e){ 
window.alert("create XML Request failed "+e); 
} 
} 
}else if(window.XMLHttpRequest){ // FF 
xmlHttp=new XMLHttpRequest(); 
} 
if(!xmlHttp){ 
window.alert("create XML Request failed"); 
} 
} 
function HeadRequst(request){ 
createXmlRequest(); 
headType=request; 
xmlHttp.onreadystatechange=getHeadInfo; //注册回调函数不用括号。 
xmlHttp.open("HEAD","http://www.baidu.com/",false); 
xmlHttp.send(null); 
} 
function getHeadInfo(){ 
var span=document.getElementById("state"); 
if(xmlHttp.readyState==4){ 
if(headType=="All") 
span.innerHTML=xmlHttp.getAllResponseHeaders(); 
else{ 
span.innerHTML=headType+": "+xmlHttp.getResponseHeader(headType); 
} 
} 
} 
</script> 
</head> 
<body> 
<center> 
<input type="button" onclick="HeadRequst('Content-Type')" value="Content-type"><br><br> 
<input type="button" onclick="HeadRequst('Date')" value="Date"><br><br> 
<input type="button" onclick="HeadRequst('Connection')" value="Connection"><br><br> 
<input type="button" onclick="HeadRequst('All')" value="All headers"><br> 
<br><br><br> 
<span id="state"></span><br> 
</center> 
<body> 
</html>

这个例子在IE下工作很顺利,在FF下死活出不来,MS原因是FF不支持ActiveX。。。求高手解决下。。。??z
JSON
JSON的全称是:javascript object notation 对象标志。它是一种轻量级的基于文本并且和语言无关的数据交换格式。和XML类似,是一种文本组织格式,具体是这样的,比如我们有一组数据,用xml的话:
<user>
<name>Dumpling</name> <gender>Famle</gender><age>22<age>
<user>
那么如果用JSON的格式,就是:
"user":[{"name":"Dumpling", "gender":"Famle", "age":22}]
优点就是它可以简化获取的数据的解析和存储等工作。
如果上面的例子再写复杂一点,就可以看到JSON的具体格式了,我们在JS中声明的时候,就可以这么写:
var users={ 
"users":[ 
{"name":"Dumpling", "gender":"Famle", "age":22}, 
{"name":"Sanday", "gender":"Famle", "age":20}, 
{"name":"Shine", "gender":"Famle", "age":18} 
]};

使用JSON封装数据,用到的是JSON.stringify(obj)的方法。obj自己封装一个类就可以。
不需要我们自己来写字符串,只要给值,然后用函数封装就可以了。来个简单的例子:
<html> 
<head> 
<title>testing</title> 
<script language="javascript"> 
function user(name,age,gender){ 
this.userName=name; 
this.userAge=age; 
this.userGender=gender; 
} 
function submidForm(){ 
var subForm=document.jsonForm; 
var userTable=document.getElementById("users"); 
var newRow=userTable.insertRow(-1);// insert one row at the end of table 
newRow.insertCell(0).innerHTML=subForm.name.value; 
newRow.insertCell(1).innerHTML=subForm.gender.value; 
newRow.insertCell(2).innerHTML=subForm.age.value; 
var newuser=new user(subForm.name.value,subForm.age.value,subForm.gender.value); 
var jsonStr=JSON.stringify(newuser); 
alert(jsonStr); 
subForm.name.value=""; 
subForm.age.value=""; 
} 
</script> 
</head> 
<body> 
<center> 
<form method="POST" action="#" name=jsonForm> 
<table border="1" id="newuser"> 
<tr> 
<td>Name: </td><td><input type="text" name="name"></td> 
<td>Gender: </td> 
<td><select name="gender"> 
<option value="Famle">Famle</option> 
<option value="Male">Male</option> 
</select> 
</td> 
<td>Age: </td><td><input type="text" name="age"></td> 
</tr> 
<tr> 
<td colspan="6" align="center"> 
<input type="button" id="submit" value="Submit" onclick="submidForm()"></input></td> 
</tr> 
</table> 
</form> 
<table id="users" border="1" width="450"> 
<tr><td>Name</td><td>Gender</td><td>Age</td> 
</table> 
</center> 
</body> 
</html>

害怕太长我就遮起来了,反正结果是这样子滴:

javascript 进阶篇3 Ajax 、JSON、 Prototype介绍

 

当然,如果要一次封装很多,比如提交了5 6个用户然后一次封装成JSON格式,可以把这几个放到一个Arry里,然后把arry作为stringify的参数就可以,自己试一下吧~我就不上代码了~

在JS中对JSON解析和赋值

这一块就算是json的中心了,对他的解析其实很简单的,比如还是之前的例子,

var usersJson={ 
"users":[ 
{"name":"Dumpling", "gender":"Famle", "age":22}, 
{"name":"Sanday", "gender":"Famle", "age":20}, 
{"name":"Shine", "gender":"Famle", "age":18} 
], 
"objects":[ 
{"name":"food","price":55} 
] 
};

那么我要得到sanday这个值,就可以这么写:var username=uersJson.users[1].name; 会了这一个,别的也没问题了吧~
如果要修改数据,那么就是直接赋值,比如我要修改那个食物的价格 userJson.objects[0].price=43;
至于判断输入是否合法之类的,我就懒得写了,费时间。
JSON就到这里,接下来最后一部分了。
Prototype框架
先上一下prototype的网站:http://www.prototypejs.org/
它其实就是对JS做了大量的拓展,大体由通用方法与模板两部分构成的。通用方法比如说$() $$() $A()等,模板则是对JS内部类进行拓展,并提供对Ajax的各种应用的支持模板。具体大家可以上给出的网站看看。举俩例子,再多请到API页面查看:http://api.prototypejs.org/ (是啊 我很懒的?(???)?)
$()方法:获取元素对象,类似于getElementById方法,并且可以接受多个参数,返回一个数组。
$$()方法:获取指定元素数组,类似与getElementByTagName()方法,根据标签名获取对象。
Ajax对象:刚才我们也说过了,因为浏览器不同,我们需要写大量的判断代码,于是prototype就给我们代劳了,Ajax.Request对象封装了创建XMLHttpRequest对象的代码,以及各种处理服务器返回信息的常用方法,所以还是很好用的。想要深入学习的话,请继续参考上面的API链接 (= =!)
form对象:因为真的很常用,于是form也是prototype重点关注的对象,这部分 很重要,于是可以参考API的相关部分。。。。。。
Javascript 相关文章推荐
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
小程序实现筛子抽奖
May 26 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 #Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 #Javascript
javascript 基础篇4 window对象,DOM
Mar 14 #Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 #Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 #Javascript
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 #Javascript
JSON.stringify 语法实例讲解
Mar 14 #Javascript
You might like
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
php批量修改表结构实例
2017/05/24 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
js实现消息滚动效果
2017/01/18 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
Gap工厂店:Gap Factory
2017/11/02 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
高校学生干部的自我评价分享
2013/11/04 职场文书
员工培训心得体会
2013/12/30 职场文书
签约仪式策划方案
2014/06/02 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
小学教育见习总结
2015/06/23 职场文书
Java的Object类的九种方法
2022/04/13 Java/Android