ajax入门简介

  • ajax的实现原理

  1. ajax的定义是 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。它可以在不刷新页面的情况下提交请求与服务器进行交互动作。
  2. ajax的主要对象就是通过XmlHttpRequest这个对象与服务器进行异步请求。随后通过获得的数据进行相应的操作,例如:通过javascript修改页面数据、样式。
  3. XmlHttpRequest有多个属性,了解这些属性才能知道原理。
    1. onreadystatechange  每次状态改变所触发事件的事件处理程序。
    2. responseText     从服务器进程返回数据的字符串形式。

    3. responseXML    从服务器进程返回的DOM兼容的文档数据对象。

    4. status           从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)

    5. status Text       伴随状态码的字符串信息

    6. readyState       对象状态值 

  •  例子如下所示

    //1.创建ajax引擎对象
    var xmlHttp = new XMLHttpRequest();
    //2.绑定监听----监听服务器返回的数据
    xmlHttp.onreadystatechange = function(){
         if(xmlHttp.readyState==4&xmlHttp.status==200){           //确定引擎对象的两个参数的值为正常
              var res_str = xmlHttp.responseText;          //5.接收数据,设定返回的是字符串类型
              /*具体的操作*/
         }
    }
    //3.绑定发送地址及相关方法
    xmlHttp.open("GET","/WEB20/ajax",true);           //true为是否异步
    //4.发送到服务器端
    xmlHttp.send();

    //jquery封装的ajax
    其中ajax较为常用的有3种,分别是
    jQuery.post(url, [data], [callback], [type]);
    //示例
    $.post(
         "web22/ajax",          //地址绝对不能缺少
         {"name":"lisi"},        //发送给服务器的数据,键值对格式
         function(data){
              //operation--data
              data为服务器返回的数据
         },
         "json"         //规定返回的数据按照json格式解析
    );
     
    示例
    $.ajax({
                url:"/WEB22/ajaxServlet2",       //地址,ajax用于跨域请求时,需要用到jsonp技术
                async:true,          //是否异步
                type:"POST",          //提交方式
                data:{"name":"lucy","age":18},     //发送的数据
                success:function(data){          //成功响应时用的方法
                    alert(data.name);
                },
                error:function(){             //请求失败所用的方法
                    alert("请求失败");
                },
                dataType:"json"          //返回的数据解析的格式
            });
     
posted @ 2019-05-24 23:06  半生瓜丶  阅读(123)  评论(0编辑  收藏  举报