Ajax技术,什么是Ajax

作者:admin 时间:2013-06-22 00:43:51

AJAX 技术



一、什么是 AJAX ?

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript And XML)。

AJAX 是一种用于创建快速动态网页的技术(局部刷新,整个网页无刷新技术)。

通过在浏览器的后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下,对网页的局部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。


缺点:

1. 安全问题(相比之下容易出现安全问题)/所以Ajax常用于查看(信息提取)。

2. 不利于搜索引擎抓取数据。(网站前台部分数据使用Ajax,后台会大量使用)

3. 对服务器的请求次加大。


二、Ajax的执行过程(示例1.hml/1.php;2.html/2.php)

http协议:请求(HttpRequest)、响应(HttpResponse)

var xmlhttp;


1. 创建请求对象

if (window.XMLHttpRequest){

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}else{

// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}


2. 设置回调函数(监听)

xmlhttp.onreadystatechange=函数名;

xmlhttp.onreadystatechange=function(){

函数体。。。

}


3. 初始化:

xmlhttp.open("GET","gethint.php?q="+str,true); //异步以get方式发送到gethint.php


4. 发送:

xmlhttp.send();


XMLHttpRequest 对象的三个重要的属性:


1.onreadystatechange:(回调函数)

存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

2.readyState:

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成,且响应已就绪

3. status:

200: "OK"

404: 未找到页面


三、Ajax的POST提交(示例3.hml/3.php)


前两步和GET方式一样

第3步:

xmlhttp.open("POST",document.forms[formNumber].action,true);

xmlhttp.setRequestHeader("cache-control","no-cache");

*xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlhttp.setRequestHeader("contentType","text/html;charset=utf-8");

xmlhttp.setRequestHeader("RequestType","ajax");

第4步:

var data="name=zhangsan&id=20";

data=encodeURI(data);

xmlhttp.send(data);


四、Ajax接收批量数据(4.html/4.php)


Ajax的交换数据可以使用:字串、XML、Json

1.Json的数据格式:

在php服务器端:

json_encode() 编码(将数据转成json格式)

json_decode() 解码(将json格式转回原数据)

例如:

<?php

$stu = array("name"=>"zhangsan","age"=>20,"sex"=>"m");

echo json_encode($stu);//编码(将数据转成json格式)

//输出{"name":"zhangsan","age":20,"sex":"m"}

?>

2. JavaScript对Json的数据处理

var list = [10,20,30,40]; //定义一个数组

alert(list); //10,20,30,40

alert(list[1]);//20

//定义一个json的数据(其实就是一个对象,具体原型如下)

var list = {"name":"zhangsan","age":20,"sex":"m"};

//遍历输出对象list中的属性值

for(var i in list){

alert(i+":"+list[i]); //遍历输出每个值

}


其实上面的list是一个对象,里面的每个值都是他的属性,具体原型如下:

------------------------------------------------------------------------------

//定义一个类stu

function stu(){

//定义属性

this.name="zhangsan";

this.age=20;

this.sex="m";

//定义方法

this.fun=function(){

return 'hello';

}

//将本对象返回

return this;

}

//将实例化stu为一个对象s

var s = new stu();

//s.fun(); //调用方法

//遍历对象s中的属性

for(var i in s){

alert(i+":"+s[i]); //遍历输出每个值

}

分享到:

<< 上一篇:网页打印清除页眉页脚,错位 (2013-09-02 17:23)

>> 下一篇:Jsonp:avascript与动态程序的跨域交互 (2013-06-20 22:05)