首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 进阶篇3 Ajax 、JSON、 Prototype介绍

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 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
日志(1) plus.io(1) 条码(1) html5+(1) 磁盘管理(1) Get(1) 虚拟机(3) Post(1) 二维码(2) 目录管理(1)
You might like
php学习 字符串课件
2008/06/15 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
JS中操作JSON总结
2020/12/06 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
js实现简单掷骰子小游戏
2019/10/24 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）
2020/03/17 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
python连接mysql实例分享
2016/10/09 Python
基于Django用户认证系统详解
2018/02/21 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
德国原装品牌香水、化妆品和手表网站：BRASTY.DE
2016/10/16 全球购物
真正的英国宝藏：Mappin & Webb
2019/05/05 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
承诺书范本
2015/01/21 职场文书
童年读书笔记
2015/06/26 职场文书
js实现上传图片到服务器
2021/04/11 Javascript