js实现ajax的步骤

开发步骤:

第一步:

创建ajax异步对象

第二步:

准备发送异步请求,例如:ajax.open(method,url);

第三步:如果是POST请求，一定要设置请求头，即

ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

第四步:

真正发送请求体的数据到服务器,例如:ajax.send();

第五步:

AJAX不断监听服务器响应的状态变化，例如ajax.onreadystatechange()，后面接个匿名函数

状态数据如下:

 ajax.readyState==0：表示AJAX异步对象已创建好，但还没有调用open()方法

 

ajax.readyState==1：表示AJAX异步对象已调用open()方法，但还没有调用send()方法

ajax.readyState==2：表示AJAX异步对象已调用send()方法，但请求还没有到达服务器端

ajax.readyState==3：表示服务端已接收到AJAX异步对象的请求，正在处理响应中。。。

ajax.readyState==【4】：表示AJAX异步对象已经完完全全接收到了服务器的响应信息，但接收到的数据不一定都正确

第六步:

在无名函数中判断是否接收到完整数据，即ajax.status=200，然后获取AJAX数据，按照DOM规则，用JS操作web页面

AJAX适合用在什么地方

      AJAX【适合】不用来传递大量数据，而只用来【传递少量数据】，在用户的【体验】上，【更加人性化】

      AJAX是一个和服务器无关的技术，即服务器可使用：JavaEE，.NET，PHP，。。。这些技术都可

      AJAX只管向服务器发送请求，同时只管接收服务器的HTML或XML或JSON载体响应

      服务端不能使用转发或重定向到web页面，因为这样会起浏览器全面刷新

       即只能以流的方式响应给浏览器

数据载体:

（1）HTML

（A）优点：服务端响应的是普通html字符串，无需JS解析，配合innerHTML属性效率高

（B） 缺点：如果需要更新WEB页面中的很多处地方，HTML不太方便，同时innerHTML属性不是DOM的标准，不能操作XML

 注意：innerHTML在xml中不能使用，用firstChild.nodeValue替代

 （C）适合：小量数据载体，且只更新在web页面中的一个地方

 

   （2）XML

（A）优点：是种通用的普通字符串格式，任何技术都能解析，标签名可以任意，使用DOM标准规则能够解析XML的任何部分

（B）缺点：XML文件格式相当严格，出错后，responseXML属性返回NULL，如果XML文件过长，导致解析效率低下

（C）适合：大量具有层次数据载体    

 

   （3）JSON