1.什么是Ajax开发模式?
对于每个用户的行为,在传统的Web应用模式中,将生成一次HTTP请求,而在Ajax应用开发模式中,将变成对Ajax引擎的一次JavaScript调用。在Ajax应用开发模式中通过JavaScript实现在不刷新整个页面的情况下,对部分数据进行更新,从而降低了网络流量,给用户带来更好的体验。
2.Ajax使用的技术有哪些?
1)XMLHttpRequest对象(最为核心的技术),下面介绍其常用方法:
open("method","URL");//其中method用于请求的类型,一般为GET或POST。URL为请求地址
send(content); //conteent为指定发送的数据,可以是DOM对象的实例,输入流或者字符串。没有参数可以为null
setRequestHeader("header","value"); //用于为请求的HTTP头设置值。必须在调用open()方法后才能使用
abort(); //abort()方法用于停止或放弃当前异步请求
getResponseHeader(); //用于以字符串形式返回指定的HTTP头信息。
getAllResponseHeaders(); //用于以字符串形式返回完整的HTTP头信息
下面介绍XMLHttpRequest对象常用属性:
onreadystatechange // 用于指定状态改变时所触发的事件处理器
readyState // 用于获取请求的状态
responseText // 用于获取服务器的响应,表示为字符串
responseXML // 属性用于获取服务器的响应,表示为XML
status // status属性用于返回服务器的HTTP的状态码
statusText //用于返回HTTP状态码对应的文本,如OK或Not Found
2)XML技术
3)JavaScript技术
4)CSS技术
5)DOM技术
3.如何初始化XMLHttpRequest对象?
- if (window.XMLHttpRequest)
- {
- http_request = new XMLHttpRequest();
- }
- else if (window.ActiveXObject)
- {
- try
- {
- http_request = new ActiveXObject("Msxml2.XMLHTTP");
- }
- catch (e)
- {
- try
- {
- http_request = new ActiveXObject("Microsoft.XMLHTTP");
- }
- catch (e)
- {
- }
- }
- }
4.Ajax的重构(封装处理):
首先为什么要重构呢?因为XMLHttpRequest对象的实例在处理事件完后就会被销毁,如果不进行封装处理每次都要写一大段相同的代码,进行封装处理后下次直接调用重构函数就好,减少了大量冗余的代码。增加了可维护性。
Ajax重构大致可以分为以下3三个步骤。
一 创建一个单独的JS文件,名称为AjaxRequest.js,并且在该文件中编写重构Ajax 所需的代码
具体代码如下:
- var net = new Object();
-
- net.AjaxRequest = function(url,onload,onerror,method,params)
- {
- this.req = null;
- this.onload = onload;
- this.onerror =(onerror)?onerror:this.defaultError;
- this.loadDate(url,method,params);
- }
-
- net.AjaxRequest.prototype.loadDate = function(url,method,params)
- {
- if(!method)
- {
- method =“GET”;
- }
- if(window.XMLHttpRequest)
- {
- this.req = new XMLHttpRequest();
- }
- else if(window.ActiveXObject)
- {
- try
- {
- this.req = new ActiveXObject(“Microsoft.XMLHTTP”);
- }
- catch(e)
- {
- try
- {
- this.req = new ActiveXObject(“Msxml2.XMLHTTP”);
- }
- catch(e)
- {
- }
- }
- }
- if(this.req)
- {
- try
- {
- var loader = this;
- this.req.onreadystatechange = function()
- {
- net.AjaxRequest.onReadyState.call(loader);
- }
- this.req.open(method,url,true);
- if(method ==“POST”)
- {
- this.req.setRequestHeader(“Content-Type”,“application / x-www-form-urlencoded”);
- this.req.setRequestHeader(“x-requested-with”,“ajax”);
- }
- this.req.send(params);
- }
- catch(err)
- {
- this.onerror.call(this);
- }
- }
- }
-
-
- net.AjaxRequest.onReadyState = function()
- {
- var req = this.req;
- var ready = req.readyState;
- if(ready == 4)
- {
- if(req.status == 200)
- {
- this.onload.call(this);
- }
- else
- {
- this.onerror.call(this);
- }
- }
- }
-
- net.AjaxRequest.prototype.defaultError = function()
- {
- alert(“ 错误数据\ n \ n 回调状态:”+ this.req.readyState +“\ n 状态:”+ this.req.status);
- }
二 在需要应用Ajax 的页面中应用以下的语句包括步骤一中创建的JS 文件
<script language =“javascript”src =“AjaxRequest.js”> </ script>
三 在应用Ajax 的页面中编写错误处理的方法,实例化Ajax 对象的方法和回调函数
具体代码如下:
- <script language =“javascript”>
- / ****************** 错误处理的方法*************************** *********** /
- function onerror()
- {
- alert(“ 您的操作有误!”);
- }
- / ****************** 实例化Ajax 对象的方法*********************** ****** /
- function getInfo()
- {
- var loader = new net.AjaxRequest(“getInfo.jsp?nocache =”+ new Date().getTime(),deal_getInfo,onerror,“GET”);
- }
- / ************************ 回调函数*********************** *************** /
- function deal_getInfo()
- {
- document.getElementById(“showInfo”).innerHTML = this.req.responseText;
- }
- </ script>