Ajax，原生和jQuery中的Ajax

lijiuchangxin

于 2018-06-14 17:56:18 发布

阅读量259

点赞数

分类专栏： web前端文章标签： ajax jQuery web前端

本文链接：https://blog.youkuaiyun.com/lijiuchangxin/article/details/80696359

版权

web前端专栏收录该内容

5 篇文章

订阅专栏

一、get请求与post请求

get请求，请求的数据会附加URL之后，以？分割URL和传输数据，post请求会把请求的数据放置在HTTP请求包的包体中

get请求传递数据的大小会受到限制；post请求发送的数据理论上没有大小限制

get请求不安全，post请求安全

二、Ajax简介

Ajax全称：asynchronous JavaScript and xml （异步JavaScript和xml）

通过Ajax技术可以通过与后台爱服务器进行少量的数据交换，从而实现网页的异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部刷新

三、JavaScript实现Ajax

1.获取ajax对象：

            
var xhr=null;
 
         if(window.XMLHttpRequest){ 
        
             xhr=new XMLHttpRequest(); 
        
         }else{ 
        
             xhr=new ActiveXObject("Micorsoft.XMLHTTP") 
        
         }

2.使用Ajax对象调用open("请求方式","请求路径",是否为异步)

3.绑定状态改变事件

            
xhr.onreadystatechange=function(){
 
             if(xhr.readyState==4){ 
        
                 if(xhr.status==200){ 
        
                     //交互成功时执行的代码 
        
                     var txt=xhr.responseText; 
        
                 } 
        
             } 
        
         };

4.发送请求

            
xhr.send(参数)
 
         ​ 
        
         注意：若为post提交，则必须设置请求头消息 
        
         setRequestHeader("content-type","application/x-www-form-urlencoded"); 
        
         ​ 
        
         采用application/x-www-form-urlencoded的post数据和url中传参只是形式不同，本质都是传递参数

四jQuery实现Ajax

1.使用一个HTTP GET 请求从服务器加载数据$.get(url [,data] [,success])

            
<!DOCTYPE html>
 
         <html lang="en"> 
        
         <head> 
        
             <meta charset="UTF-8"> 
        
             <title>Document</title> 
        
             <script type="text/javascript" src="../jquery-3.1.1.js"></script> 
        
             <script type="text/javascript"> 
        
                 $(function(){ 
        
                     $("#btn").click(function(){ 
        
                         $.get("http://wthrcdn.etouch.cn/weather_mini?city=西安",function(data){ 
        
                             var obj=JSON.parse(data); 
        
                             var high=obj["data"]["yesterday"]["high"]; 
        
                             $("#mydiv").html("<h3>昨日最高温度是："+high+"</h3>"); 
        
                         }); 
        
                     }); 
        
                 }); 
        
             </script> 
        
         </head> 
        
         <body> 
        
             <input type="button" value="jQuery的ajax请求" id="btn"> 
        
             <div id="mydiv"></div> 
        
         </body> 
        
         </html>

2.使用一个HTTP POST 请求从服务器加载数据$.post(url [,data] [,success])

            
<!DOCTYPE html>
 
         <html lang="en"> 
        
         <head>qqwwqqwqwqwwq 
        
             <meta charset="UTF-8"> 
        
             <title>jQuery实现Ajax之post请求</title> 
        
             <script type="text/javascript" src="../jquery-3.1.1.js"></script> 
        
             <script type="text/javascript"> 
        
                 $(function(){ 
        
                     $("#btn").click(function(){ 
        
                         // post提交，跨域请求会被禁止（因为“同源策略”） 
        
                         $.post("http://wthrcdn.etouch.cn/weather_mini", 
        
                             {"city","西安"}, 
        
                             function(data){ 
        
                                 $("#mydiv").html(data); 
        
                                 var obj=JSON.parse(data); 
        
                                 var high=obj["data"]["yesterday"]["high"]; 
        
                                 $("#mydiv").html("<h3>昨日最高温度是："+high+"</h3>"); 
        
                         }); 
        
                     }); 
        
                 }); 
        
             </script> 
        
         </head> 
        
         <body> 
        
             <input type="button" value="jQuery的get请求" id="btn"> 
        
             <div id="mydiv"></div> 
        
         </body> 
        
         </html>

3.执行一个异步的HTTP（Ajax）的请求$.ajax([settings])

eg:ajax底层方法（post请求，使用datatpye>>>jsonp）

            
<!DOCTYPE html>
 
         <html lang="en"> 
        
         <head> 
        
             <meta charset="UTF-8"> 
        
             <title>jQuery实现Ajax之底层方法</title> 
        
             <script type="text/javascript" src="../jquery-3.1.1.js"></script> 
        
             <script type="text/javascript"> 
        
                 $(function(){ 
        
                     $("#btn").click(function(){ 
        
                         $.ajax({ 
        
                             url:"http://wthrcdn.etouch.cn/weather_mini",//请求地址 
        
                             data:{"city":"西安"}, //传递给服务器的数据 
        
                             type:"post", //请求类型 
        
                             dataType:"jsonp",  // 期望服务器返回的数据类型 
        
                             //  jsonp专门解决post提交的跨域问题 
        
                             beforeSend:function(){  // 发送之前的回调函数 
        
                                 alert("准备发送啦。。。。。") 
        
                             }, 
        
                             success:function(data){ 
        
                                 alert(data); 
        
                             $("#mydiv").html(data["data"]["yesterday"]["high"]) 
        
                             }, 
        
                             error:function(jqXHR,textStatus,textStatus){ 
        
                                 alert(textStatus); 
        
                             }, 
        
                             complete:function(){ 
        
                                 alert("completel了") 
        
                             } 
        
                         }); 
        
                     }); 
        
                 }); 
        
             </script> 
        
         </head> 
        
         <body> 
        
             <input type="button" value="jQuery的ajax请求" id="btn"> 
        
             <div id="mydiv"></div> 
        
         </body> 
        
         </html>

eg:ajax方法datatpye （get请求>>>>>datatpye是json）

            
<!DOCTYPE html>
 
         <html lang="en"> 
        
         <head> 
        
             <meta charset="UTF-8"> 
        
             <title>dataType</title> 
        
             <script type="text/javascript" src="../jquery-3.1.1.js"></script> 
        
             <script type="text/javascript"> 
        
                 $(function(){ 
        
                     $("#btn").click(function(){ 
        
                         $.ajax({ 
        
                             url:"http://wthrcdn.etouch.cn/weather_mini?city=西安",//请求地址 
        
                             // data:{"city":"西安"}, //传递给服务器的数据 
        
                             type:"get", //请求类型 
        
                             dataType:"json",  // 期望服务器返回的数据类型 
        
                             //  jsonp专门解决post提交的跨域问题 
        
                             beforeSend:function(){  // 发送之前的回调函数 
        
                                 alert("准备发送啦。。。。。") 
        
                             }, 
        
                             success:function(data){ 
        
                                  var array = data["data"]["forecast"]; 
        
                                   var result=""; 
        
                                     for(var index in array){ 
        
                                       result+=array[index]["date"]+"<br/>";  // 拼接数组里的日期 
        
                                       result+=array[index]["high"]+"<br/>"; 
        
                                       result+=array[index]["low"]+"<br/>"; 
        
                                       result+=array[index]["type"]+"<br/>"; 
        
                                       result+="<hr/>"; 
        
                                     } 
        
                                 $("#mydiv").html(result) 
        
                             }, 
        
                             error:function(jqXHR,textStatus,textStatus){ 
        
                                 alert(textStatus); 
        
                             }, 
        
                             complete:function(){ 
        
                                 alert("completel了") 
        
                             } 
        
                         }); 
        
                     }); 
        
                 }); 
        
             </script> 
        
         </head> 
        
         <body> 
        
             <input type="button" value="jQuery的ajax请求" id="btn"> 
        
             <div id="mydiv"></div> 
        
         </body> 
        
         </html>

原生ajax

            
<!DOCTYPE html>
 
         <html lang="en"> 
        
         <head> 
        
           <meta charset="UTF-8"> 
        
           <title>JavaScript实现Ajax</title> 
        
           <script type="text/javascript"> 
        
                // 该函数用来创建Ajax对象 
        
                function getXHR(){ 
        
                 var xhr; 
        
                     if(window.XMLHttpRequest){   // 如果当前浏览器支持XMLHttpRequest对象 
        
                         xhr=new XMLHttpRequest(); 
        
                     }else{ 
        
                       xhr=new ActiveXObject("Microsoft.XMLHTTP");  // 支持早期IE浏览器版本 
        
                     } 
        
                     return xhr; 
        
                } 
        
         ​ 
        
                  function showWeather(city){ 
        
                      var xhr=getXHR();   // 获取Ajax对象 
        
                     // 打开连接：第一个参数：请求方式;第二个参数：请求地址；第三个参数：是否异步 
        
                      xhr.open("get","http://wthrcdn.etouch.cn/weather_mini?city="+city,true); 
        
                      xhr.onreadystatechange=function(){ 
        
                           if(xhr.readyState==4){   // 与服务器交互完毕 
        
                                if(xhr.status==200){   // 状态码为200，说明正常 
        
                                   var txt=xhr.responseText;   // 接收响应文本 
        
                                     // 将JSON字符串转换为JavaScript对象 
        
                                   var weather_obj=JSON.parse(txt);    
        
                                   var array = weather_obj["data"]["forecast"]; 
        
                                   var result=""; 
        
                                     for(var index in array){ 
        
                                       result+=array[index]["date"]+"<br/>";  // 拼接数组里的日期 
        
                                       result+=array[index]["high"]+"<br/>"; 
        
                                       result+=array[index]["low"]+"<br/>"; 
        
                                       result+=array[index]["type"]+"<br/>"; 
        
                                       result+="<hr/>"; 
        
                                     } 
        
                                     document.getElementById("mydiv").innerHTML=result; 
        
                                } 
        
                           } 
        
                      }; 
        
                      xhr.send(null);   // 发送请求 
        
         ​ 
        
                  } 
        
           </script> 
        
         </head> 
        
         <body> 
        
             <input type="button" value="获取天气信息" onclick="showWeather('西安')"/> 
        
             <div id="mydiv"></div> 
        
         </body> 
        
         </html>