Ajax请求后台数据(JS原生和jQuery)

什么是Ajax:AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

                    AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

一、JS原生

   1、创建XMLHttpRequest对象

        var Ajax = new XMLHttpRequest();

    2、向服务器发送请求

          Ajax.open("GET","ajax_info.txt",true);   // 规定请求的类型、URL 以及是否异步处理请求。

          Ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //当请求类型是post时添加,get请求无需添加。

          Ajax.send();   //将请求发送到服务器。

   3、服务器响应以及onreadystatechange事件

          Ajax.onreadystatechange = function(){       //

                 if (Ajax.readyState==4 && Ajax.status==200) {    //每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。200:OK;

                         console.log(JSON.parse(ajax.responseText));

               }

         }

下面是 XMLHttpRequest 对象的三个重要的属性:

Ajax请求后台数据(JS原生和jQuery)_第1张图片
XMLHttpRequest 对象


二、jQuery方法

   1、首先在HTML头部引入jQuery

          从http://jquery.com/download/下载 jQuery 库

          从 CDN 中载入 jQuery, 如:

     

   2、调用$Ajax方法

         $.ajax({

               type:'POST', //方式

               url:'upload.php', //请求路径

               asycn:true, //是否异步

               success:function(data){

                      console.log(data);

              }

       })

你可能感兴趣的:(Ajax请求后台数据(JS原生和jQuery))