关于Ajax:它不是某种编程语言,而是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页面。有很多使用Ajax的应用程序案例:新浪微博、Goole地图等等;
即有同步和异步的2个不同的操作:前者是一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;
而异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回系统会通知进程进行处理,这样可以提高效率。
异步的实现:1.运用HTML与CSS来实现页面,表达信息。2.运用XMLHttpRequest和Web服务器进行数据的异步交换;3.运用JavaScript操作DOM,实现动态局部刷新;
XMLHttpRequest对象:用于在后台与服务器交换数据,具体的可以在W3C的手册查看。所以现代浏览器(IE7+、Firefox、Chrome、Safari等等)均内建XMLHttpRequest对象。
创建XMLHttpRequest对象的语法:
var xhr= new XMLHttpRequest();
老版本的Interet Explorer(IE5和IE6)使用ActiveXObject对象:
Var xhr= new ActiveXObject(“Microsoft.XMLHTTP”);
为了应对所有的现代浏览器,包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象,如果支持,则创建XMLHttpRequest对象。如果不支持,则创建ActiveXObject;代码如下:
var xhr;
if(window.XMLHttpReequest){
Xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
}
向服务器发送请求,我们使用XMLHttpRequest对象的open()和send()方法:open(method,url,asyns) 规定请求的类型、URL 以及是否异步处理请求。参数说明:method:请求的类型;GET或POST;url:文件在服务器上的位置。 Async:true(异步)或false(同步)Asynchronous send(string):将请求发送到服务器;
如果需要像HTML表单那样POST数据,请使用setRequesHeader()来添加HTTP头然后在send()方法中规定您希望发送的数据;如下:
xhr.open(“POST,/jQueryAjax/postPersonInfor”,true);
xhr.setRequesHeader(“Content-type”,“application/x-www-form-urlencoded”);
xhr.send(data)://data表单中需要提交的数据(字符串)
setRequestHeder语法:
setRequestHeader(header,value):向请求添加HTTP头。Header:规定头的名称;value:头的值;
然后是AJAX 服务器的响应,使用XMLHttpRequest对象的 responseTex或responseXML属性获取来自服务器的响应;responseText:获得字符串形式的响应数据。responseXML:获得XML 形式的响应数据。
关于AJAX onreadystatechange事件,在XMLHttpRequest对象中,readyState属性存有XMLHttpRequest的状态信息,每当readyState改变时,就会触发onreadystatechange事件。
下面是XMLHttpRequest对象的三个重要属性:onreadystatechage:存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
ReadyState:存有XMLHttpRequest的状态,从0到4发送变化。0:请求未初始化;1:服务器连接已建立;2.请求已接收;3:请求处理中;4:请求已完成,且响应已就绪;
Status:200:“OK” 404:未找到页面
在onredystatechange事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当readyState等于4且status为200时,表示响应已就绪:代码如下:
Xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
var txt = xhr.responseText;
console.log(txt);
}
最后,关于JSON的简介:Javascript对象表示法(JavaScript Object Notation)存储和交换文本信息的语法:1.JSON是轻量级的文本数据交换格式;2.JSON独立于语言和平台;3.JSON具有自我描述性,更容易理解;类似于xml,比XML更小、更快、更易解析(XML:指可扩展标记语言。XML被设计用来传输和存储数据。)
语法是JavaScript对象表示语法的子集:1.数据在名称/值对中(数据在键值对中);2.数据有逗号分隔;3.花括号保存对象({});4.方括号保存数值([])
JSON值可以是:数字(整数或浮点数)、字符串(双引号中)、布尔值(true或false)、数值(在方括号中)、对象(在花括号中)、null;
Json对象与JS对象有2个地方不一样;1.没有声明变量(JSON中没有变量的概念);2.末尾没有分号(因为这不是Javascript语句,所以不需要分号);
在JSON中,可以采用同样的语法表示一个数组。[23,“hello”,true];同样注意:JSON数组中没有变量和分号。
把数组和对象结合起来,可以构成更加复杂的数据集合,例如:json数组和对象结合的数据集合
{
“employees”:[
{“firstName”:“Bill”,“lastName”:“Gates”},
{“firstName”:“George”,“lastName”:“Bush”},
{ “firstName”:“Thomas”,“lastName”:“Carter”}
]
}
将JavaScript对象转化json对象
JSON对象有两个方法:1.stringify():将JS对象序列化为JSON 字符串;2.parse()[pɑ:z]:将Json字符串解析为原生的JS值;
var str = JSON.stringify(obj);//将JS对象序列化转化为JSON字符串
console.log(str);
console.log(typeof str);//string类型
var jsonstr = ‘{“employess”:[{“firstName”:“Bill”,“lastName”:“Gates”},{“firstName”:“George”,“lastName”:“Bush”},{“firstName”:“Thomas”,“lastName”:“Carter”}]}’;
var obj1 = JSON.parse(jsonstr);//将JSON字符串解析为原生的JS对象
console.log(obj1);
//注意:虽然obj与obj1具有相同的属性,但他们是两个独立的、没有任何关系的对象;