Ajax基础（详讲+案例）

最新推荐文章于 2023-04-12 23:37:53 发布

xiaozhegaa

最新推荐文章于 2023-04-12 23:37:53 发布

阅读量2.3k

点赞数 4

分类专栏： ajax 文章标签： ajax xml css

本文链接：https://blog.csdn.net/xiaozhegaa/article/details/64132269

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

。（一）初步认识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格式返回数据）。下一篇介绍经典的多级菜单联动的源码

xiaozhegaa

关注

4
点赞
踩
32

收藏

觉得还不错? 一键收藏
2
评论
Ajax基础（详讲+案例）

。（一）初步认识ajax：中文又称作“啊甲思”，英语是：asynchronous javascript and xml （翻译为 js跟xml的异步），其实底层还是js。其中最大最大最大的特点就是页面的不刷新 1. AJAX=HMTL+CSS+JS+DOM+XHR 等多种技术的一个总和 2. 传统的一个web是一个请求—>等待响应—>请求—->等待响应的过程。这叫做同步
复制链接

扫一扫