AJAX学习二

传统Ajax编程的步骤(不使用框架)

参考：传送门

由于传统web应用时每次总是全部页面加载的缺点(用传统的js可以部分的加载),使得2005年后ajax(异步传输技术)技术大行其道,在程序上除了减少与服务器交互的数据量,但对用户的体验方面是大大的舒服了.虽然在程序设计时,对与程序员的代码工作量增加了,但对于客户的使用方面却得到了很大的提升.下面说一下,用js而非什么其他的ajax框架的步骤与实现代码: 主要是1-5这五个步骤是重点.

0.写客户端的提交页面:一般用表单(按钮)或链接来写开始页面.   

1. 创建XMLHttpRequest对象:这一步写起来虽然麻烦,但都是千篇一律,所以直接复制粘贴就是,里面代码中注意浏览器的兼容问题的考虑.

 var XHR=null;    var XHRcreate=function()    {      if (window.XMLHttpRequest) {        //针对FireFox，Mozillar，Opera，Safari，IE7，IE8        XHR = new XMLHttpRequest();        //针对某些特定版本的mozillar浏览器的BUG进行修正        if (XHR.overrideMimeType) {            XHR.overrideMimeType("text/xml");        }    } else if (window.ActiveXObject) {         //针对IE6，IE5.5，IE5        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];        for (var i = 0; i < activexName.length; i++) {            try{                //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建                XHR = new ActiveXObject(activexName[i]);                break;            } catch(e){            }        }    }    }    XHRcreate();//

2.注册回调函数:

 注意回调函数后面不要接()就是,否则返回的是callback()的返回值.

<pre name="code" class="html"> XHR.onreadystatechange = callback;

3.设置连接信息:这里分两种情况:一是get方式发送;二是以post方式发送,就要麻烦一些,要设置请求头

(1)get方式:

  XHR.open("GET","login_verify.jsp?name="+ userName,true); 

(2)post方式:

XHR.open("POST","ajax_test.html",true);
XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");
4.发送数据:

(1)get方式:
    XHR.send(null);

(2)post方式:
   XHR.send("name=" + userName);

5.接收响应数据:(在回调函数里面):

这是最复杂的地方,响应的方式有两种:一种是text方式,一种是xml方式,因为xml方式处理比较麻烦,而且实际中也比较少.这里就只说text方式:

function callback() {    //判断对象的状态是交互完成    if (XHR.readyState == 4) {        //判断http的交互是否成功        if (XHR.status == 200) {            var responseText = XHR.responseText;            //通过dom的方式找到div标签所对应的元素节点(为了简便,这里客户端的程序未写了)            var divNode = document.getElementById("result");            divNode.innerHTML = responseText;        } else {            alert("出错了！！！");        }    }

 6.写服务器端的响应:

用jsp或servlet都可以,一般是用out.println("返回给客户的的内容");的语句来返回给客户内容.