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

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。。。求高手解决下。。。囧rz
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>

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

当然，如果要一次封装很多，比如提交了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的相关部分。。。。。。

赞 (0)

相关推荐

  • js使用Array.prototype.sort()对数组对象排序的方法

    本文实例讲述了js使用Array.prototype.sort()对数组对象排序的方法.分享给大家供大家参考.具体分析如下: 在讲对数组对象进行排序时,我们先来简单的了解一下Array.prototype.sort().sort方法接受一个参数--Function,function会提供两个参数,分别是两个进行比较的元素,如果元素是String类型则通过Unicode code进行比较,如果是Number类型则比较值的大小.如果比较的函数中返回1则两个元素交换位置,0和-1不交换位置.先看一个例

  • Prototype使用指南之form.js

    这一部分提供了很多与表单操作有关的功能,包括以下部分,当通过$方法返回元素时,可以直接通过$(element).method()调用: Form对象:提供了操作整个表单的一些方法Form.Element对象:提供了操作某个表单元素的方法TimedObserver类:周期性表单监视器,当表单元素值改变的时候执行一个回调函数,有Form和Element两种类型EventObserver类:利用事件来监视表单元素,当表单元素值改变的时候执行一个回调函数,有Form和Element两种类型 Form对象

  • Prototype1.6 JS 官方下载地址

    http://www.prototypejs.org/download Prototype1.6官方下载 我们下载地址 Learn about what's new in version 1.6. Prototype SVN If you want the full development package (including unit tests), you can use Subversion to checkout the source code: svn co http://svn.ru

  • 深入分析js中的constructor和prototype

    深入分析js中的constructor和prototype

    我们在定义函数的时候,函数定义的时候函数本身就会默认有一个prototype的属性,而我们如果用new 运算符来生成一个对象的时候就没有prototype属性.我们来看一个例子,来说明这个 复制代码 代码如下: function a(c){ this.b = c; this.d =function(){ alert(this.b); } } var obj = new a('test'); alert(typeof obj.prototype);//undefine alert(typeof a

  • 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解

    1.typeof(param) 返回param的类型(string) 这种方法是JS中的定义的全局方法,也是编译者们最常用的方法,优点就是使用简单.好记,缺点是不能很好的判断object.null.array.regexp和自定义对象. 示例代码: 复制代码 代码如下: var str='str';var arr=['1','2'];var num=1;var bool=true;var obj={name:'test'};var nullObj=null;var undefinedObj=un

  • 为JS扩展Array.prototype.indexOf引发的问题探讨及解决

    Array没有indexOf方法,这样在一个数组中查找某个元素的索引时比较麻烦,为了调用方便,于是通过prototype原型扩展了Array.prototype.indexOf(),这样用起来就比较方便了.但是这个自定义的indexOf在对数组进行遍历的时候却出现了问题. Array没有indexOf方法,这样在一个数组中查找某个元素的索引时比较麻烦,为了调用方便,于是通过prototype原型扩展了Array.prototype.indexOf(),这样用起来就比较方便了. 复制代码 代码如下

  • 解析jQuery与其它js(Prototype)库兼容共存

    一.在运行这个函数后,可以恢复使用别名 $ ,在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用.jQuery Code: 复制代码 代码如下: jQuery.noConflict();(function($) {  $(function() {    // 使用 $ 作为 jQuery 别名的代码  });})(jQuery);// 基于其他库用 $ 作为别名的代码 二.在运行这个函数后,可以创建一个新的 jQuery 别名来替换原来的 jQuery 别名 $ 来使用.jQuer

  • js中继承的几种用法总结(apply,call,prototype)

    一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 复制代码 代码如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>  <body>  <script type="text/javascript">      function Person(na

  • 使用prototype.js 的时候应该特别注意的几个问题.

    1. String.prototype.camelize    BUG 这个方法用来返回字符串的骆驼写法.用js 控制元素的 style的时候经常使用 比如  var ss="font-color"   ss=ss.camelize()    // fontColor 通常情况下 camelize 会工作得很好,但是有一个特列,那就是浮动定位  float var ss="float"   obj.style[ss.camelize()]="right&q

  • 使用prototype.js进行异步操作

    首先下载prototype.js这个类包,然后包含在你的<html>页面中 <script src='prototype.js'></script> 创建XMLHttpRequest对象并且异步的跟踪它的进程, 然后解析出响应 然后处理它可能这是ajax的根本意义,它最具威力的地方,但你能出兼容各种不同浏览器的代码,可能会令你痛苦不堪,但幸好救苦救难的prototype.js提供Ajax.Request 类,让你摆脱这些困扰. 假如你有一个应用程序可以通过url htt

  • JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述

    所以Javascript已经成为了web开发最最基本的要求之一了. 而在现实的敏捷开发中,我们通常会选择一个JS框架来取代繁琐的Native Javascript的编写.你会发现这样会节省很多的时间,写的代码也很清晰便捷.(当然在学生时代的是有也质疑过,用框架会对原生态的 Javascript理解不深入,其实这是多虑了的.在对框架的深入的同时,对原生的js也会理解的更透彻一些.成为一个精明的开发者,两者是相依相偎的.而最好的状态就是想Qzone前端一样,完全按照自己的需求开发出一套JS,CSS框

  • Prototype使用指南之selector.js

    Selector是利用css selector来匹配选择页面元素的,所以要理解Selector首先应该对css selector有所理解,下面是css2 selector的语法,当然很多浏览器只是支持其中的一部分,Prototype 中的Selector主要支持tag选择器.class选择器和id选择器,还有属性(attribute)选择器,基本上包含我们平时所用的所有类型 The following table summarizes CSS2 selector syntax, 详细的可以看ht

  • 谈谈js中的prototype及prototype属性解释和常用方法

    谈谈js中的prototype及prototype属性解释和常用方法

    prototype是javascript中笔记难理解的一部分内容,下面通过几个关键知识点给大家讲解js中的prototype.具体内容请看下文详情. 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A. 2 javascript的方法可以分为三类: a 类方法 b 对象方法 c 原型方法 例子: function People(name) { this.name=na

  • js中prototype用法详细介绍

    prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,而且特殊的地方便在于:它是一个给类的对象添加方法的方法!这一点可能听起来会有点乱,别急,下面我便通过实例对这一特殊的方法作已下讲解: 首先,我们要先了解一下类的概念,JavaScript 本身是一种面向对象的语言,它所涉及的元素根据其属性的不同都依附于某一个特定的类.我们所常见的类包括:数组变量(Array).逻辑变量(Boolean).日期变量(Date).结构变量(Function).数值变量(Number)

  • JS 面向对象之神奇的prototype

    JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念. 1 什么是prototype JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念. 前面我们说,对象的类(Class)和对象实例(Instance)之间是一种"创建"关系,

  • Prototype使用指南之dom.js

    这部分提供了很多(写的都有点烦了)方便的操作dom的方法:包含有名的$方法.document.getElementsByClassName方法,以及Element对象.Insertion对象 以下部分一个一个的详细介绍: $(element):getElementById的封装,element可以是一个元素的id或元素本身,也可以是一个数组,这时返回一个数组,使用$方法,会自动调用Element.extend(element)方法,这样的话使元素可以直接调用Element中的方法, 例如Elem

随机推荐