7_ajax

什么是Ajax?

异步的javascript和xml,要以实现网页的无刷新的更新。

Ajax特点

在Web上通过Javascript,使用XmlHttpRequest异步的请求，实现无刷新的Web界面

Ajax的请求流程

1.来自客户端的异步请求，通过ajax enginee发送请求到服务端
2.服务端接收到请求，并处理请求，在服务端处理请求的过程中，客户端可以继续用户的活动
3.服务端处理完之后，会将需要的数据以xml或其它格式的数据发送到客户端
4.客户端获取到服务端发回的数据后，可以进行客户端的数据渲染操作。

与传统Web开发的比较

使用原生态的js实现ajax

1.在客户端确定请求的时机（即监听客户端的事件）
2.创建xmlHttpRequest请求对象（ajax enginee中的核心对象，现在主流浏览器都内置了该对象）
3.通过xmlHttpRequest对象调用Open()方法设置参数，第一个参数是请求的方式，第二个请求的服务端URL，第三个参数表示是否是异步，true是异步，false是同步
4.通过xmlHttpRequest对象调用Send()方法发送请求
5.监听xmlHttpRequest对象的onreadychanged事件，在事件处理程序中判断xmlHttpRequest.readystate==4xmlHttpRequest.status==200,通过xmlHttpRequest.responseText属性获得服务端发回的文本。

比如：

//创建xmlhttprequest异步请求对象
                var xmlhttp;
                try
                {
                    xmlhttp=new XMLHttpRequest();//IE7+,firefox,Chrome,Safari,Opera
                }
                catch(Error)
                {
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE7-
                }

                //组装请求的服务端路径
                var path = "WebForm2.aspx?username=" + userName + "&pwd=" + pwd;
                //4.参数设置
                //第一个参数：请求的方式 ，可以是get或post
                //第二个参数：请求的服务器端路径
                //第三个参数：是否是异步请求，true:异步请求，false:同步请求
                xmlhttp.open("get", path, true);

                //通过xmlhttprequest向服务端发送请求
                xmlhttp.send();


                //服务端什么时候处理好，客户端并不知道，所以要去监听xmlhttprequest的onreadystatechange的事件
                xmlhttp.onreadystatechange = function () {

                    if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
                        var result=xmlhttp.responseText;//responseText:获得服务端返回给客户端的文本
                        if (result == "1")
                            window.location.href = "main.aspx";
                        else if (result == "0")
                            alert("用户名或密码错误，登录失败");

                    }
                }

使用jquery中的ajax方法实现ajax

type:请求的类型
data:发送的数据，是以key/value发送
success:成功时的回调函数
error:失败时的回调函数
dataType:服务端发回的数据类型

使用ajax请求服务器端返回的数据的类型

返回字符串

返回HTML标签

返回Json字符串，后台需要按照json格式传给前端

返回xml类型的字符串

html(hyper text markup language超文本标记语言)和xml(Extensible Markup Lanaguage可扩展标记语言)的区别
1.html的标签是定义好的，而xml的标签是自定义
2.html的标签是用来呈现数据，而xml用来保存数据

前端解析Xml字符串

                        //data这时候相当于文档对象
                        //解析xml文档，使用DOM技术解析
                        //<classes>
                        //    <class>
                        //      <cno>1</cno>
                        //      <cname>java一班</cname>
                        //     </class>
                        //    <class>
                        //      <cno>2</cno>
                        //      <cname>java二班</cname>
                        //     </class>
                        //</classes>
                      
                        var classes = data.getElementsByTagName("classes");//搜索标签为classes的元素集合，
                        var myClass = classes[0];//获得第一个classes元素节点

                        //遍历classes节点的子节点集合
                        for(var i=0;i<myClass.childNodes.length;i++){
                            
                            var c = myClass.childNodes[i];   //每一个class节点

                            var cno = c.getElementsByTagName("cno")[0].innerHTML;  //班级编号
                            var cname = c.getElementsByTagName("cname")[0].innerHTML;//班级名称

                            var opt = new Option(cname, cno);
                            $("#drpClass")[0].options.add(opt);