ajax的使用

1,第一种用法:

1. js原生的ajax:

   1. get方式:

      1. //步骤一:创建异步对象
         var ajax = new XMLHttpRequest();
         //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
         ajax.open('get','getStar.php?starName='+name);
         //步骤三:发送请求
         ajax.send();
         //步骤四:注册事件 onreadystatechange 状态改变就会调用
         ajax.onreadystatechange = function () {
            if (ajax.readyState==4 &&ajax.status==200) {
             //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
         　　　　console.log(ajax.responseText);//输入相应的内容
           　　}
         }

   2. post方式:

      1. //创建异步对象  
         var xhr = new XMLHttpRequest();
         //设置请求的类型及url
         //post请求一定要添加请求头才行不然会报错
         xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          xhr.open('post', '02.post.php' );
         //发送请求
         xhr.send('name=fox&age=18');
         xhr.onreadystatechange = function () {
             // 这步为判断服务器是否正确响应
           if (xhr.readyState == 4 && xhr.status == 200) {
             console.log(xhr.responseText);
           } 
         };

   3. 方便使用将ajax封装为方法进行使用

      1. function ajax_method(url,data,method,success) {
             // 异步对象
             var ajax = new XMLHttpRequest();
         
             // get 跟post  需要分别写不同的代码
             if (method=='get') {
                 // get请求
                 if (data) {
                     // 如果有值
                     url+='?';
                     url+=data;
                 }else{
         
                 }
                 // 设置 方法 以及 url
                 ajax.open(method,url);
         
                 // send即可
                 ajax.send();
             }else{
                 // post请求
                 // post请求 url 是不需要改变
                 ajax.open(method,url);
         
                 // 需要设置请求报文
                 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
         
                 // 判断data send发送数据
                 if (data) {
                     // 如果有值 从send发送
                     ajax.send(data);
                 }else{
                     // 木有值 直接发送即可
                     ajax.send();
                 }
             }
         
             // 注册事件
             ajax.onreadystatechange = function () {
                 // 在事件中 获取数据 并修改界面显示
                 if (ajax.readyState==4&&ajax.status==200) {
                     // console.log(ajax.responseText);
         
                     // 将 数据 让 外面可以使用
                     // return ajax.responseText;
         
                     // 当 onreadystatechange 调用时 说明 数据回来了
                     // ajax.responseText;
         
                     // 如果说 外面可以传入一个 function 作为参数 success
                     success(ajax.responseText);
                 }
             }
         
         }

2. jquery使用ajax:

   1. 直接使用ajax:

      1. $.ajax({ 
         url:服务器地址, 
         请求方式：get|post, 
         data:请求数据, 
         dataType:预期返回的数据类型, 
         success:function(result){ 
         }, 
         error:function(){ 
         } 
         });

   2. 指定get方式:

      1. $.get(
          
         服务器地址,
          
         请求数据,
          
         function(){
          
         }
          
         );

   3. 指定post方式:

      1. $.post(
          
         服务器地址,
          
         请求数据,
          
         function(){
          
         }
          
         );

   4. 前三种的简化:

      1. $(selector).load(
          
         服务器地址,
          
         请求数据
          
         )

3. 简单的分类具体的使用后期补充: