javascript 进阶篇3 Ajax 、JSON、 Prototype
2012-03-13 18:43
513 查看
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()方法:
获得全部的首部信息。
接下来举个例子,就是获取头信息的:
View Code
<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>
害怕太长我就遮起来了,反正结果是这样子滴:
当然,如果要一次封装很多,比如提交了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 进阶篇3 Ajax 、JSON、 Prototype介绍
- web开发-javascript编程prototype、this、ajax、json、结构体和数组-学习笔记十四
- javascript之AJAX(二)json
- 做过的一个SSH+prototype.js+json=Ajax的例子
- [Javascript,JSON] JQuery处理json与ajax返回JSON实例
- Jquery JavaScript解析Ajax返回的json数据(转)
- 收藏网站制作常用经典ajax.prototype.javascript实例打包下载
- JavaScript使用Ajax传送JSON数据
- JavaScript、jQuery、Ajax以及json间的关系
- JavaScript、jQuery、Ajax以及json间的关系
- Ajax - JavaScript之通过prototype属性建立面向对象的JavaScript
- IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
- 收藏网站制作常用经典ajax.prototype.javascript实例打包下载
- Javascript数组常用方法[包含MS AJAX.NET的prototype扩展方法]示例
- 收藏网站制作常用经典ajax.prototype.javascript 第二辑!!打包下载!
- javascript中创建对象,并序列化为json,通过$.ajax的提交json数据到后台方法,取值为null的问题
- 【JavaScript】jQuery+ajax传递json数组(局部响应处理)
- css+javascript+jquery+prototype+ajax+html5+iis+apache
- Javascript数组常用方法[包含MS AJAX.NET的prototype扩展方法]示例