AJAX

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

一.AJAX XHR

XMLHttpRequest对象用于在后台与服务器交换数据，就这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1.创建XMLHttpRequest对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象，在ie5和ie6不支持XMLHttpRequest对象，但是支持ActiveX 对象。故要引用下面代码：

var ob;
if(window.XMLHttpRequest)//判断浏览器是否支持XMLHttpRequest
{
     ob=new XMLHttpRequest();
}
else
{
     ob=new ActiveXObject("Microsoft.XMLHTTP");
}

2.向服务器发送请求GET POST

向服务器发送请求需要用到XMLHttpRequest对象的open()和send()方法。

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

post和get的区别：（来自百度知道）

1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
建议：
1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

var ob;
if(window.XMLHttpRequest)//判断是否支持XMLHttpRequest
{
     ob=new XMLHttpRequest();
}
else
{
     ob=new ActiveXObject("Microsoft.XMLHTTP");
}

A.GET请求

ob.open("GET","demo_get.asp",true);
ob.send();//有可能请求到缓存
ob.open("GET,"demo_get.asp"+"&_dc="+new Date().getTime(),true);
ob.send();//避免请求到缓存，每次提交都用不同的时间
ob.open("GET","demo_get.asp?fname=Bill&lname=Gates",true);//用GET发送信息

ob.send();

B.POST请求

ob.open("POST",true);
ob.send();//用post进行请求
ob.open("POST",true);
ob..setRequestHeader("Content-type","application/x-www-form-urlencoded");//添加HTTP头
ob.send("Hello");//传送数据

是否异步：

不异步：当发送请求时需要等待服务器的响应后才执行其他的脚本，如果服务器响应时间较慢，会引起程序停止或挂起。

异步：在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

3.服务器响应

responseText 获得字符串的响应

responseXML 获得XML形式的响应数据

var text=ob.responseText;;

var xml=ob.responseXML;//XML响应的内容需要做处理

4.onreadystatechange事件

请求被服务器接受到，我们需要做一些基于响应的任务,当readystate改变时触发onreadystatechange事件

属性

onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

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

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

当readystate=4 and status = 200 就是服务器已经响应

ob.onreadystatechange=function()

{

var obj=responseText;//服务器响应的内容

}

相关推荐