javascript 进阶篇 Ajax 、JSON、 Prototype

作者:无名 - java -

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>

 

<ps:这个例子在IE下工作很顺利,在FF下死活出不来,MS原因是FF不支持ActiveX>

 

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>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <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(&quot;users&quot;);
			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=&quot;&quot;;
			subForm.age.value=&quot;&quot;;            
		}
</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()" />
				</td>
			</tr>
        </table>
		</form>
		<table id="users" border="1" width="450">
        <tr>
          <td>Name</td>
          <td>Gender</td>
          <td>Age</td>
        </tr>
		</table>
    </center>
	</body>
</html>

 

 

 

 

 

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

javascript 进阶篇 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的相关部分。。。。。。

 

转自:http://www.cnblogs.com/jiaozihardworking/archive/2012/03/13/2384024.html

IT人知识库 原文链接:http://www.itpeo.net/12806/3487423.html





标签 进阶
rfedfre

Hibernate简单例子

Hibernate是一个比较流行的持久层框架,它对JDBC进行轻量级的封装,Hibernate可以在应用EJB的J2EE... ...

rfedfre

shell脚本兼容linux/unix与windows/cygwin的基础(注意处理好CR, LF, CR/LF 回车 换行的问题)

shell脚本兼容linux/unix与windows/cygwin的基础 :统一文本格式为:unix文本格式,即... ...

rfedfre

HTTP 的GET和POST区别

#idempotent, meaning that multiple identical requests should... ...

rfedfre

OpenVas Plugins 编写及实现方法

OpenVas plugins 编写规则 1. Description   id: 分配给公司的id,也做为plug... ...

jedis 2.0.0 for maven usage

<dependency>    <groupId>redis.cl... ...

jdk7 on ubuntu

  ? NetBeans IDE 7.0 Be... ...

[zz]主流浏览器内核概览

浏览器最核心的部分是渲染引擎(Rendering Engine),我们一般习惯称之为“浏览器内核”,其负责解析网页... ...

svn eclipse插件中文变英文

如何把Eclipse中安装的SVN中文插件转变为英文 <!-- url:share/Sh... ...

Sybase Adaptive Server 管理手册

Sybase安装及系统管理 一.关于设备: RAWDevice(裸分区)VSFilesystemDevice ... ...

rfedfre

订餐系统总结(三)策略模式应用于处罚方案管理

需求介绍: 某学校实现网上订餐后,到食堂刷卡就餐。可是为了督促大家要先在网上订餐后再去食堂就餐(食堂可以实现按实... ...

rfedfre

gedit-file-search汉化插件包

Gedit是Ubuntu下非常优秀的一个文本编辑器,不仅仅是一个普通的文本编辑器,通过插件的扩展还能支持更多的功能,插件... ...

【PPT推荐】关于PhoneGap的12件事

  注: 本PPT来自Adobe董龙飞在HTML5 Open Party上的演讲,主题为关于Phone... ...

WebApp最佳实践策略篇之审视移动场景的独特性

  移动场景的相关问题一直困扰着我。在2009年一月,我写过一篇“On the Go” Myth 的文章。许... ...

rfedfre

GOOGLE FONT API使用教程

尽管互联网上新的技术和项目层出不穷,但是在过去的一段时间里我们却缺乏丰富而漂亮的互联网字体。虽然传统的字体选择也非常多,... ...

rfedfre

Facebook创始人简介

Facebook创始人简介  创始人: Mark Zuckerberg 马克·扎克伯格 公司: FaceBook 脸谱网... ...

Ubuntu下使用Goagent无法连接google的问题

想要在Ubuntu下在chrome中使用goagent代理,网上很多教怎么设置的,这里不再赘述。在Windows下按照常... ...

rfedfre

6.数组和Hash表

当显示多条结果时,存储在变量中非常智能,变量类型会自动转换为一个数组。 在下面的例子中,使用GetType()可以看到... ...

js document.getElementByID("aa")的位置

我们在做项目时,经常会碰到要用js函数去获取点击radio的值,里面可能少不了要用到 document.getElem... ...

[转]在Java中使用协程(Coroutine)

[转自:http://www.blogjava.net/BlueDavy/archive/2010/01/28/3111... ...

rfedfre

消费者心理

百科名片    消费者心理 ... ...