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的相关部分。。。。。。

时间： 2024-11-02 23:20:41

javascript 进阶篇3 Ajax 、JSON、 Prototype介绍_基础知识的相关文章

javascript编码的几个方法详细介绍_基础知识

escape定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 参数 描述 string 必需.要被转义或编码的字符串.   返回值 已编码的 string 的副本.其中某些字符被替换成了十六进制的转义序列. 说明 该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / .其他所有的字符都会被转义序列替换. 提示和注释 提示:可以使用 unescape() 对 escape() 编码的

JavaScript中几个重要的属性(this、constructor、prototype)介绍_基础知识

this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向. 先看一个在全局作用范围内使用this的例子: 复制代码 代码如下: <script type=> console.log( === window); console.log(window.alert === .alert); cons

JavaScript语言核心数据类型和变量使用介绍_基础知识

任何的编程语言都有自己的语言核心,和众多编程语言一样,JavaScript也有自己语言的核心.语言的核心部分一般被称之为JavaScript最为基础的部分.正所谓万事开头难,学习JavaScript也是一个道理,也有句古话说得好,好的开始是成功的一半.了解并学好JavaScript的语言核心部分是JavaScript学习道路上非常良好的开始. 下面是一段代码,主要介绍了JavaScript的数据类型和变量: 复制代码 代码如下: //在script标签中,所有//后面的内容都称之为注释 //注释

Javascript学习笔记8 用JSON做原型_基础知识

代码如下: 复制代码 代码如下: <script type="text/javascript"> var People = { name: "kym", age: 21, SayHello: function () { alert("Hello,My name is " + this.name + ".I am " + this.age); } } alert(People.name); People.SayHel

JavaScript的strict模式与with关键字介绍_基础知识

2009年12月,ECMAScript发布了ECMAScript 5,这距离上一个版本的ECMAScript 3标准发布已经整整十年了,其间JavaScript虽然大行于web编程,ECMAScript 4却最终因为利益相关的各大厂商和组织在此语言的复杂性(即是否增加大量特性以扩展ECMAScript的功能)上的分歧而夭折,使得ECMAScript新标准的制订大大落后于编程的实践.ECMAScript 5在目标上没有那么雄心勃勃,除去新增了对JSON的支持和反射的更全面的控制,一项重要改进就是引

JavaScript 高级篇之函数 （四）_基础知识

1.函数的创建 由于前面已经用了很多的函数,我就不在这里多分享了. 2.嵌套函数 复制代码 代码如下: function china() { function people()//嵌套函数,只有china用它 { document.write("我的心愿是当杜甫,最近网上他的漫画,他活的好潇洒"); } people(); } 3.函数的直接量 Javascript允许函数用直接量来定义,说白了就是一个表达式,(匿名函数).细节:匿名函数以后会用,要明白! 复制代码 代码如下: fun

JavaScript中的运算符种类及其规则介绍_基础知识

JavaScript中的运算符有很多,主要分为算术运算符,等同全同运算符,比较运算符,字符串运算符,逻辑运算符,赋值运算符等.这些运算符都有一些属于自己的运算规则,下面就为大家介绍一下JavaScript中的运算符. 一.JavaScript运算符的种类 1.算术运算符:+ . - .* . / . % . -(一元取反) . ++ . -- 2.等同全同运算符:== . ===. !== . !=== 3.比较运算符:< . > . <= . >= 4.字符串运算符:< .

JavaScript中的分号插入机制详细介绍_基础知识

仅在}之前.一个或多个换行之后和程序输入的结尾被插入 也就是说你只能在一行.一个代码块和一段程序结束的地方省略分号. 也就是说你可以写如下代码 复制代码 代码如下: function square(x) {     var n = +x     return n * n } 但是却不可以写的像下面代码一样,这样就报错了哦 复制代码 代码如下: function area(r) {    r = +r    return Math.PI*r*r }//error 仅在随后的输入标记不能解析时插入

JavaScript进阶教程(第四课第一部分)_基础知识

在以前的课程中我们学习了对文本和字符串的各种操作今天我们专注于两种不同的数据类型图象和对象.学完这一课你将知道如何      使用JavaScript来加速图象交换.      创建你自己的对象来使脚本易于理解.      使用关联数组来快速存取脚本中的每一个对象.     使用JavaScript做图象变换的一个主要问题是它直到需要换图时才去告诉浏览器下载那张图象.如果你有一张大的图象想在鼠标滑过一副图象时调出来浏览器得临时下载这张图这可能会花一定时间从而使滑动效果大打折扣.     如果你的