AJAX简单整理

AJAX简介

1、AJAX工作原理：当一个事件发生时，浏览器会创建一个XMLHttpRequest对象，并发送一个HttpRequest给服务器，服务器接收到这个HttpRequest请求后就会进行处理，

处理完成后服务器会创建一个响应程序，并将响应结果返回给浏览器，浏览器接收到响应结果后通过使用JavaScript进行加工处理，最后浏览器更新网页内容。

2、AJAX联合使用的元素

XMLHttpRequest对象：异步的与服务器交换数据

JavaScript/DOM：用于信息显示/交互

CSS：给数据定义样式

XML：作为转换数据的格式

3、创建XMLHttpRequest

IE5、IE6：varxmlhttp=newActiveXObject("Microsoft.XMLHTTP");

其他浏览器：varxmlhttp=newXMLHttpRequest();

实例：

varxmlhttp;

if(window.XMLHttpRequest){

xmlhttp=newXMLHttpRequest();//现代浏览器IE7+、Firefox、Chrome、Safari以及Opera

}eles{

xmlhttp=newActiveXObject("Microsoft.xmlhttp");//IE5、IE6

}

4、XMLHttpRequest对象的方法：open(),send()

xmlhttp.open(method，URL，async)

method：请求的类型；GET或POST

url：文件在服务器上的位置

async：true（异步）或false（同步）

xmlhttp.send(String):将请求发送到服务器,String仅用于POST请求。

注：XMLHttpRequest对象如果要用于AJAX的话，其open()方法的async参数必须设置为true

5、POST和GET的区别

（1）POST一般是需要更新数据时才会用到，而GET一般是获取或查询数据的时候用。

（2）GET请求的数据会附在URL（如login.action?a=1&b=2）之后；POST把提交的数据则放置在是HTTP包的包体中。

（3）GET方式提交的数据最多只能是1024字节，POST提交数据没有大小限制

（4）在ASP中，服务端获取GET请求参数用Request.QueryString，获取POST请求参数用Request.Form。传一个test.jsp?name=hyddd&password=hyddd，用request.getQueryString()得到的是：name=hyddd&password=hyddd。

（5）POST的安全性要比GET的安全性高

（6）Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求，在FORM（表单）中，Method默认为"GET"。

6、Async

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

xmlhttp.onreadystatechange=function()

{

if(xmlhttp.readyState==4&&xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

您使用async=false时，请不要编写onreadystatechange函数-把代码放到send()语句后面即可

xmlhttp.open("GET","ajax_info.txt",false);

xmlhttp.send();

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

注：如果使用async=false,JavaScript会等到服务器响应就绪才继续执行，如果服务器繁忙货缓慢，引用程序就会挂起或停止

7、responseText、responseXML

如果来自服务器的响应并非XML，请使用responseText属性，responseText属性返回字符串形式的响应。

如果来自服务器的响应是XML，而且需要作为XML对象进行解析。

实例：

xmlDoc=xmlhttp.responseXML;

txt="";

x=xmlDoc.getElementsByTagName("ARTIST");

for(i=0;i<x.length;i++)

{

txt=txt+x[i].childNodes[0].nodeValue+"<br>";

}

document.getElementById("myDiv").innerHTML=txt;

<CATALOG>

<CD>

<ARTIST>BobDylan</ARTIST>

</CD>

<CD>

<ARTIST>BobDylan</ARTIST>

</CD>

<CD>

<ARTIST>BobDylan</ARTIST>

</CD>

<CD>

<ARTIST>BobDylan</ARTIST>

</CD><CD>

<ARTIST>BobDylan</ARTIST>

</CD>

<CD>

<ARTIST>BobDylan</ARTIST>

</CD>

</CATALOG>

8、XMLHttpRequest对象的三个重要的属性

当请求被发送到服务器时，我们需要执行一些基于响应的任务,每当readyState改变时，就会触发onreadystatechange事件,readyState属性存有XMLHttpRequest的状态信息。

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

readyState：存有XMLHttpRequest的状态。从0到4发生变化。0:请求未初始化；1:服务器连接已建立；2:请求已接收；3:请求处理中；4:请求已完成，且响应已就绪。

status：200:"OK"；404:未找到页面

实例：

当readyState等于4且状态为200时，表示响应已就绪

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4&&xmlhttp.status==200){

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}