`
winkingfish
  • 浏览: 1354 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

javascript 进阶篇 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>

 

<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>

 

 

 

 

 

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

当然,如果要一次封装很多,比如提交了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

分享到:
评论

相关推荐

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

    javascript 进阶篇3 Ajax 、JSON、 Prototype介绍,学习js的朋友可以参考下

    Ajax基础教程(扫描版)

    5.7.1 通过prototype属性建立面向对象的javascript 142 5.7.2 私有属性和使用javascript的信息隐藏 146 5.7.3 javascript中基于类的继承 148 5.7.4 汇合 149 5.8 小结 152 第6章 使用jsunit测试javascript代码 ...

    Professional Ajax

    Professional Ajax 2nd edition is written for Web application developers looking to enhance the usability of their web sites and web applications and intermediate JavaScript developers looking to ...

    基于J2EE的Ajax宝典

    除了Ajax的这些基础知识外,本书还详细介绍了Ajax的5个相关框架:Prototype.js,Dojo,DWR,JSON-RPC-Java和AjaxTags。.. 本书介绍的不是单纯的Ajax技巧,而是侧重于介绍Ajax技术与J2EE技术的融合,让Ajax技术融入...

    JavaScript完全自学宝典 源代码

    示例描述:学习JSON并介绍Ajax与JSON。 20.1.html 使用JSON封装数据。 20.2.html 使用JSON值的数组封装数据。 json2.js JSON的.js库文件。 testJson.war 使用JSON与服务器传递...

    Aptana IDE 下载(官网版本)

    如今Aptana Studio 1.0支持如下几大方面的开发功能:1、AJAX开发环境 HTML/JavaScript/CSS编辑器 prototype/dojo等常见AJAX类库集成和提示 JSON编辑器 2、Adobe AIR开发环境 3、Apple iPhone开发环境 4、Ruby on ...

    JavaScript详解(第2版)

     第18章 Ajax(及JSON)简介   18.1 为什么要用Ajax   18.2 为什么最后才提到Ajax   18.3 建立Ajax通信的步骤   18.3.1 步骤1:创建XMLHttp-Request对象   18.3.2 步骤2:初始化对象   18.3.3 向...

    AJAX 源码范例

    10/10.4.4.html 动态滤镜范例 10/10.4.5.html 使用JavaScript控制CSS滤镜范例 &lt;br&gt;第11章 11/json.cs 用于实现json的服务器端代码 &lt;br&gt;第12章 12/ajax.aspx 总线模型的页面文件 12/...

    No-Reload-Prototype:完整的 AJAX javascript 框架

    完整的 AJAX javascript 框架 先决条件 jQuery Ractive.js 使用示例 服务器/sample.json { " hello " : " world " } 模板/home.html {{hello}} 应用程序.js ( function ( $ , NR ) { // configure json ...

    基于J2EE的Ajax宝典.docx

    内容涵盖丰富,除介绍 Ajax 的各种相关知识(如 JavaScript,DOM 和 XML)之外,还详细介绍了 5 个目前流行的 Ajax框架:Prototype.js,Dojo,DWR,JSON-RPC-Java 和 AjaxTags,并通过实际示例讲述了如何使用这 5 ...

    ajax 三种实现方法实例代码

    ajax即异步的javascript and xml, 本文章向码农们介绍ajax的三种实现方法(prototype实现,jquery实现,XMLHttpRequest实现) 本文主要是比较三种实现Ajax的方式,为以后的学习开个头。 准备: 1、 prototype.js 2...

    讲解JavaScript的面向对象的编程

    本人在带学生使用EXT框架时,我发现学生阅读Ext的sample代码有问题,特别是对JavaScript的面向对象编程的书写方式不熟悉,于是,写了四个sample来说明它现代JS编程的对类的定义方式、类继承的方式,以及怎样发展到...

    龙博AJAX框架 4.0.zip

    龙博AJAX框架是跨浏览器的JavaScript开放源代码框架集,是构建富web应用的利器. 龙博AJAX框架 4.0 主要更新如下: 主要更改是Ajax,相应的后台和DataBinder,可以直接绑定JSON/XML/SOAP远程服务,由于与以前不...

    Aptana.Studio.Professional.v1.2.7.024774.Incl.KeyMaker.and.Patch-DVT.part01.rar

    Aptana是一个基于Eclipse的集成...× prototype/dojo等常见AJAX类库集成和提示 × JSON编辑器 2、Adobe AIR开发环境 3、Apple iPhone开发环境 4、Ruby on Rails开发环境 5、PHP开发环境 6、JavaScript调试器

    Aptana_Studio_3.1.2(第3个包,共3个包)

     ● × prototype/dojo等常见AJAX类库集成和提示  ● × JSON编辑器  ● 2、Adobe AIR开发环境  ● 3、Apple iPhone开发环境  ● 4、Ruby on Rails开发环境  ● 5、PHP开发环境  ● 6、JavaScript调试器  ...

    Aptana_Studio_3.1.2(此为第2个包,共3个包)

     ● × prototype/dojo等常见AJAX类库集成和提示  ● × JSON编辑器  ● 2、Adobe AIR开发环境  ● 3、Apple iPhone开发环境  ● 4、Ruby on Rails开发环境  ● 5、PHP开发环境  ● 6、JavaScript调试器  ...

    Aptana_Studio_3.1.2(此为第1个包,共3个包)

     ● × prototype/dojo等常见AJAX类库集成和提示  ● × JSON编辑器  ● 2、Adobe AIR开发环境  ● 3、Apple iPhone开发环境  ● 4、Ruby on Rails开发环境  ● 5、PHP开发环境  ● 6、JavaScript调试器  ...

    AJAX资料(基础或中级水平的请看,对高手的帮助不大)

    压缩包内文档名如下: Core JavaScript 1.5 Guide ...jQuery、JSON超强组合 JSONG Private Members in JavaScript prototype手册 深入理解JavaScript闭包 悟透javascript(很好) 详解Javascript 中的this指针

    ajax讲解PPT - bang网站下

    Prototype 能够方便跨浏览器进行AJAX调用。 $(‘comments’).addClassName(‘active’).show() 得到ID 为‘comments’的页面元素, 增加一个class名称为active,并且显示它 (假设先前是隐藏的). 这是原来javascript不...

Global site tag (gtag.js) - Google Analytics