Ajax基础（详讲+案例）

来源：互联网发布：php购物网站编辑：程序博客网时间：2024/06/11 01:19

。（一）初步认识ajax：中文又称作“啊甲思”，英语是：asynchronous javascript and xml （翻译为 js跟xml的异步），其实底层还是js。其中最大最大最大的特点就是页面的不刷新
1. AJAX=HMTL+CSS+JS+DOM+XHR 等多种技术的一个总和
2. 传统的一个web是一个请求—>等待响应—>请求—->等待响应的过程。这叫做同步
3. 现代Web应用是以请求->请求->请求->响应->响应->响应->…,叫异步请求/操作
可以列举几个ajax使用的例子加深印象：
1. 传统的注册表单时，验证用户名是否唯一。需要点击注册之后才会到数据库验证。而使用ajax时，可在文本框失去焦点的时候就去数据库验证。更符合现在web需求
2. 无刷新的分页。
3. 百度搜索框输入文本时，未提交就有提示的效果。看下面插图…..等等应用
总结来说：也就是，当你需要局部请求服务器而不是全局请求服务器的时候，就可以考虑一下ajax

这里写图片描述

（二）ajax的使用
这里我特别个人推荐是：看手册学习。截个图
这里写图片描述
1：创建ajax

//包括IE7以上版本的浏览器var xhr = new XMLHttpRequest();//IE(6/7/8)方式 ，这里大小写不敏感var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);  //最原始方式var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);    //升级var xhr = new ActiveXObject(“Msxml2.XMLHTTP.3.0”);  //升级var xhr = new ActiveXObject(“Msxml2.XMLHTTP.5.0”);  //升级var xhr = new ActiveXObject(“Msxml2.XMLHTTP.6.0”);  //最高版本方式//因此个人是这样创建的    function createXHR(){            var xhr = null;            try{                xhr = new ActiveXObject("microsoft.xmlhttp");            }catch(e){                try{                    xhr = new XMLHttpRequest();                }catch(e){                    window.alert("你的浏览器太差");                }            }            return xhr;        }

2：开发步骤

创建一个 ajax对象。方法在上面

利用open方法准备发送一个请求。xhr.open(“get/post(请求方式)”，”请求的网址路径”，false/true同步或者异步)

利用send方法确实发送了这个请求。如果是get请求的话，那么xhr.send(null),如果是post请求的话，xhr.send(“参数”)

接受返回的信息。利用状态监听。虽然这里是第四步骤，但是习惯把这个写在第二布的位置

（三）直接上案例咯
1：动态返回时间 java代码哦

<body>        <input type="button" value="ajax体验，请点击我"/>      <hr/>    <div>        <!-- 显示结果 -->    </div>    <script type="text/javascript">        var inputElement = document.getElementsByTagName("input")[0];        inputElement.onclick=function(){            //创建AJAX引擎对象            var xhr = createXHR();            //为AJAX引擎对象设置状态改变事件[0-4共5个]            xhr.onreadystatechange = function(){                //如果请求和响应已经完成                if(xhr.readyState==4){                    //响应是否正确                    if(xhr.status==200){                        //取得AJAX引擎的响应结果                        var msg = xhr.responseText;                        //查询<div>标签                        var divElement = document.getElementsByTagName("div")[0];                        //将内容写入<div>标签内                        divElement.innerHTML = msg;                    }                }            }            //准备发送异步请求到服务端            xhr.open("get","/ajax/AjaxServlet");            //真正发送异步请求            xhr.send(null);        }        //根据不同浏览器创建AJAX引擎对象        function createXHR(){            var xhr = null;            //如果是IE            if(window.ActiveXObject){                xhr = new ActiveXObject("microsoft.xmlhttp");            //如果非IE            }else{                xhr = new XMLHttpRequest();            }            return xhr;        }    </script>AjaxServlet    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        System.out.println("AjaxServlet::doGet()");        String msg = new Date().toLocaleString();        response.setContentType("text/html;charset=UTF-8");        response.getWriter().write(msg);    }

2://Get方式 + 动态检查用户名是否合法

Get方式说明：
①在url地址后边以请求字符串(传递的get参数信息)形式传递数据。
② 对中文、=、&等特殊符号处理
=、&符号在浏览器里边会与请求字符串的关键符号有混淆，避免歧义产生需要对其进行编码.
在php里边可以函数函数 urlencode()/urldecode()对特殊符号进行编码、反编码处理
(url_encode()可以把中文转变为浏览器可以识别的信息。转变之后的信息具体为%号后接两个十六进制数)
在javascript里边可以通过encodeURIComponent ()对特殊符号等信息进行编码。

这里写图片描述
特别注意一点是：这里采用的以字符串的形式接受返回的数据，说以msg = xhr.responseText。下面的post就是以xml的方式返回

<body>    输入用户名：<input type="text"/>光标移出后，立即查检结果    <hr/>    <div>        <!-- 显示结果 -->    </div>    <script type="text/javascript">        document.getElementsByTagName("input")[0].onblur=function(){            //取得用户输入的用户名            var username = this.value;            //对中文编码            username = encodeURI(username);            //创建AJAX引警对象            var xhr = createXHR();            //设置函数监听            xhr.onreadystatechange = function(){                if(xhr.readyState==4){                    if(xhr.status==200){                        var msg = xhr.responseText;                        var divElement = document.getElementsByTagName("div")[0];                        divElement.innerHTML = "<img src='"+msg+"'/>";                    }                }                           }            //准备以GET方式发送请求            xhr.open("get","/ajax/GetServlet?time="+new Date().getTime()+"&username="+username);            //真正发送请求            xhr.send(null);             }        function createXHR(){            var xhr = null;            try{                xhr = new ActiveXObject("microsoft.xmlhttp");            }catch(e){                try{                    xhr = new XMLHttpRequest();                }catch(e){                    window.alert("你的浏览器太差");                }            }            return xhr;        }    </script>  </body>GetServlet、public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        System.out.println("GetServlet::doGet()");        String username = request.getParameter("username");        byte[] buf = username.getBytes("ISO8859-1");        username = new String(buf,"UTF-8");        String msg = null;        if(username.equals("赵君")){            //msg = "<font color='red'>该用户已存在</font>";            msg = "images/MsgError.gif";        }else{            //msg = "<font color='green'>可以注册</font>";            msg = "images/MsgSent.gif";        }        response.setContentType("text/html;charset=UTF-8");        response.getWriter().write(msg);    }

3:Post方式 + 动态检查用户名是否合法

Post方式说明
① 给服务器传递数据需要调用send(请求字符串数据)方法
② 调用方法setRequestHeader()把传递的数据组织为xml格式(模仿form表单给服务器传递数据)
③ 传递的中文信息无需编码，特殊符号像 &、=等需要编码
④ 该方式请求的同时也可以传递get参数信息，同样使用$_GET接收该信息
5.对于POST请求，一定要设置请求头，代码如下：
xhr.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
在open()之后，在send()之前这里采用的以xml的形式接受返回的数据
特别注意一点是：，说以msg = xhr.responseXml。上面的get以text方式返回。也就是responseTest。。好好体会一下接下来接收数据的方式不一样

<body>    输入用户名：<input type="text"/>单击检查按钮后，立即查检结果    <input type="button" value="检查"/>    <hr/>    <div>        <!-- 显示结果 -->    </div>    <script type="text/javascript">        document.getElementsByTagName("input")[1].onclick=function(){            //取得用户输入的用户名            var username = document.getElementsByTagName("input")[0].value;            //对中文编码            username = encodeURI(username);            //创建AJAX引警对象            var xhr = createXHR();            //设置函数监听            xhr.onreadystatechange = function(){                if(xhr.readyState==4){                    if(xhr.status==200){                        //以字符串形式接收                        //var msg = xhr.responseText;                        //以XML形式接收                        var xmlDocument = xhr.responseXML;                        var resElement = xmlDocument.getElementsByTagName("res")[0];                        var msg = resElement.firstChild.nodeValue;                                  var divElement = document.getElementsByTagName("div")[0];                        divElement.innerHTML = "<img src='"+msg+"'/>";                    }                }            }            //准备以POST方式发送请求            xhr.open("post","/ajax/PostServlet?time="+new Date().getTime());            //设置请求头，只有是POST方式下，才设置该请求头            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");            //真正发送请求            xhr.send("username="+username);        }        function createXHR(){            var xhr = null;            try{                xhr = new ActiveXObject("microsoft.xmlhttp");            }catch(e){                try{                    xhr = new XMLHttpRequest();                }catch(e){                    window.alert("你的浏览器太差");                }            }            return xhr;        }    </script>  </body>  PostServlet  public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        System.out.println("PostServlet::doPost()");        request.setCharacterEncoding("UTF-8");        String username = request.getParameter("username");        System.out.println("用户名：" + username);        String msg = null;        if(username.equals("赵君")){            msg = "images/MsgError.gif";        }else{            msg = "images/MsgSent.gif";        }        response.setContentType("text/xml;charset=UTF-8");        PrintWriter pw = response.getWriter();        pw.write("<root>");            pw.write("<res>");                pw.write(msg);            pw.write("</res>");        pw.write("</root>");    }

（四）get方式 + post方式总结

两者的不同
① 给服务器传递数据量，get最多是2k
post原则没有限制，php.ini对其限制为8M
② 安全方面，post传递数据较安全
③ 传递数据的形式不一样
get方式在url地址后边以请求字符串形式传递参数
http://网址/index.php?name=tom&age=23&addr=beijing
蓝色部分就是请求字符串，就是一些“名-值”对，中间使用&符号连接。
post方式是把form表单的数据给请求出来以xml形式传递给服务器

（五）AJAX的缺点：
a)浏览器支持不统一
b)无页面刷时，所以浏览器的”前进”和”后退”按钮失效
c)一些浏媒体支持不完善

（由上面两个例子看出，如果是xml返回格式的话，不仅仅说在response中写xml麻烦，而且还有在接受数据解析xml也麻烦。后面介绍用json格式返回数据）。下一篇介绍经典的多级菜单联动的源码

0 0