JQuery基础~Ajax异步加载

最新推荐文章于 2023-08-02 13:42:13 发布

cpongo11

最新推荐文章于 2023-08-02 13:42:13 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

企鹅我认为v

本文链接：https://blog.youkuaiyun.com/cpongo11/article/details/99745712

本文介绍了Ajax的基本使用方法，包括原生Ajax的实现步骤，并展示了如何通过jQuery进行Ajax请求的两层封装，简化调用过程，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

            Ajax的发展：

   //原生ajax
   function find(){
      var username=document.getElementById("username1").value;
      //1 识别浏览器内核
      var xhr=null;
      //ActiveXObject  IE6 IE6 的内核
      if(window.ActiveXObject){
         xhr=new ActiveXObject("Microsoft.XMLHTTP");
      }else if(window.XMLHttpRequest){
         xhr=new XMLHttpRequest();
      }
      //2 打开一个连接
      xhr.open("post", "find", true);
      //3 设置一个回调函数（检测响应的状态）
      xhr.onreadystatechange=function(){
         if(xhr.readyState==4&&xhr.status==200){
            var data=xhr.responseText;
            alert(data);
         }
      };
      //4 设置请求头的格式
      xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      //5 发送数据
      xhr.send("name="+username);
   };

   //第一层封装的ajax   $.ajax( { url: , type: , data: { } , success: , error, dataType:  } ); 
   //参数顺序和个数不固定！最简单的情况下，$.ajax()可以不带任何参数直接使用。
   $(function(){
      $("#username2").blur(function(){
         var username=$(this).val();//$("[name='username2']").val();
         $.ajax({
            url : "find",
            type : "post",
            data : {
               name : username
            },
            success : function(data){
               alert(data);
            },
            error : function(){
               alert("error");
            },
            dataType : "text"
         });
      });
   });

   //第二层封装的ajax   $.post( url , { data } , success , dataType );
   $(function(){
      $("#username3").blur(function(){
         var username=$(this).val();
         $.post(
            "find",
            {"name":username,},
            function(data){
               alert(data);
            },
            dataType:"text"
         );
      });
   });