ajax概念-js开发

ajax概念-js开发

AJAX 定义

 

***************************************************************

AJAX 是异步

JavaScript 和XML.

AJAX 是一种用于创建快速动态网页的技术

.

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

这意味着可以不需要刷新网页,对网页的某部分进行更新;

,

***************************************************************

XMLHttpRequest  AJAX的基础是XMLHttpRequest对象

 

所有的现代浏览器都支持 XMLHttpRequest

对象 (IE5和IE6 使用ActiveXObject)

创建XMLHttpRequest对象的语法是

var    xhr;

xhr = new XMLHttpRequest();

IE5和IE6使用ActiveXObject ;

var   xhr;

xhr = new ActiveXObject(“Microsoft.XMLHTTP”);

 

为了应付所有现代浏览器,一般都要先检查是否支持XMLHttpRequest对象

var xhr;

If(window.XMLHttpRequest)

{

xhr = new XMLHttpRequest();

}

else

{

xhr =new ActiveXObject(Microsoft XMLHTTP);

}

如需将请求发送到服务器,则使用XMLHttpRequest对象的open()和send() 方法

 

xhr.open(“method”,”url”,async);

xhr.send(s);

open

方法中规定请求的类型

链接以及是否异步处理请求

method 代表请求类型GET或者POST

ur代表文件在服务器上的位置

async :true( 异步)或者false(同步) 一般都是true

send(string)

 

将请求发送到服务器

 

string仅用于post请求 GET和POST

 

GET更简单也更快,但在以下情况下,请使用POST

1.

无法使用缓存文件

(

更新服务器上的文件或者数据库

)

2.

向服务器发送大量数据

3.

发送包含位置字符的用户输入时,POST比GET更稳定更可靠

GET请求为了避免出现得到的缓存的结果,请向URL中添加一个唯一的ID:

var xhr

 

xhr.open(“GET”,”test1.cgi?t=”+Math.random(),true);

xhr.send();

 

POST请求

如果需要像HTML表单那样POST数据,,就试用

setRequsetHeader()

来添加HTTP头,然后再send中规定希望发送的数据

var xhr

xhr.open(“POST”,”test1.cgi”,true);

xhr.setRequestHeader(“Content-type”,”

application/x-www-form-urlencoded”);

xhr.send(“fname=Bill&lname=Gates”);

setRequestHeader(header,value)

向请求添加HTTP头

header 规定的头名value规定的头的值

 

当async=true时,请规定在响应处于onreadystatechange 事件中的就绪状态时执行的函数:

如果使用async=false时,请不要使用onreadystatechange函数,

直接把代码放在send()后面即可

.

var   xhr

xhr.onreadystatechange =function()

{

if(xhr.readState ==4 && xhr.status == 200)

{

document.getElementById(“myDIV”).innerHTML=xhr.responseTtxt;

}

xhr.open(“POST”,”test1.cgi”,true);

xhr.send();

}

*******************************************************************************

服务器响应

 

如果获得来自服务器的响应,请使用XMLHttprequest对象的

responseText或responseXML属性

. responseText 或者字符串形式的响应数据

 

responseXML 获得XML形式的响应数据

responseText 属性返回字符串形式的响应,因此可以这样使用:

document.getElementById(“myDiv”).innerHTML=xhr.responseText;

onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的人物

当readyState 存有XMLHttpRequest的状态

.从0-4发生变化

0:请求未初始化

 

1 服务器连接已经建立

 

2.请求已经接收

 

3.请求处理中

 

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

200 代表OK

404 代表未找到页面

当readyStatus为4 且status状态为200的时候

.

表示响应已经就绪Onreadystatuschange 事件被触发4次,对应着readyStatus的每个变化

var xhr

xhr.onreadystatechange = function()

{

if(xhr.readStatus == 4 && xhr.status ==200)

{

document.getElementByid(“myDiv”).innerHTML=xhr.responseText;

}

}

*******************************************************************************

使用Callback函数

Callback函数是一种以参数形式传递给另一个函数的函数

如果存在多个AJAX任务,

那么应该为创建XMLHttpRequest ,对象编写一个标准的函数,并为每个AJAX任务调用该函数

.该函数调用应包含URL以及发生的onreadystatechange事件时执行的任务

*******************************************************************************

responseXML 获得XML形式响应数据

标签