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 相关文章推荐
JavaScript prototype属性使用说明
May 13 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
js的三种继承方式详解
Jan 21 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
Bootstrap table使用方法总结
May 10 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
vue v-model的用法解析
Oct 19 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
面试常见的js算法题
2017/03/23 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
python中sys.argv参数用法实例分析
2015/05/20 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
python应用文件读取与登录注册功能
2019/09/23 Python
pytorch中的inference使用实例
2020/02/20 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
大学生求职信例文
2014/06/29 职场文书
入党现实表现材料
2014/12/23 职场文书
观看建国大业观后感
2015/06/01 职场文书
网吧员工管理制度
2015/08/05 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android