亲宝软件园·资讯

展开

ajax

tzsw 人气:2
```go
**今天,我就带你来了解一下ajax吧!**

首先我们得明白什么是ajax?那到底什么才是ajax呢?
     
   AJAX = “Asynchronous Javascript And XML”(==异步 JavaScript 和 XML==)直译出来就是异步的JavaScript和数据传输技术。国内常翻译为**==“阿贾克斯”==**是指一种无需重新加载整个网页的情况下,能够更新部分网页的技术。直白的说,ajax就是js通过一个网址去加载数据。用户是看不见的,可以通过浏览器控制台中的网络查看。
   
上面说到,xml,我们就结合json来给你介绍~~~
==xml(可扩展标记语言)、json(轻量级数据格式)都是字符串的格式,都用于数据传输==
两者之间有什么区别呢?
**xml:**
      优点:
      1、传输的数据种类特别丰富
      2、传输的数据量非常大
      缺点:
      解析起来比较麻烦
    【注】用于大型门户网站,今日头条、腾讯新闻、网易新闻。
       **json:**
       优点:
       1、解析起来非常方便
       2、适合轻量级的数据
       缺点:
       1、种类比较少
       【注】基本上90%以上应用用的都是json格式字符串传输。
同时说到异步,有的小伙伴就懵逼了,心想异步是啥,有什么作用呢?

了解异步之前,我们首先看看javas中的同步是什么吧!
==同步==:阻塞,当前程序必须等前面的程序执行完毕以后,才能运行。
举个例子:就好比我们做饭,饭做好了,才去做菜。
在JavaScript中,异步与同步是相反的存在,所以说异步就是什么呢?
==异步==:非阻塞,当前程序的执行和前面程序是否执行完毕没有关系。
举个例子:做饭的同时,我可以洗菜,切菜。
**总结着来说**:同步必须按照顺序一步一步执行,而异步就是不按顺序不管前面执不执行或者执行完不完毕我都执行!
ajax有什么好处?有什么缺点呢?

**AJAX的优点:**
1)页面无刷新更新数据:AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据;
2)异步与服务器通信:AJAX使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力;
3)前端和后端负载平衡:AJAX可以把以前一些服务端负担的工作转嫁到客户端,减轻服务器和带宽的负担,节约空间和宽带租用成本;
4)基于标准被广泛支持:AJAX基于标准化的并被广泛支持的技术,不需要下载浏览器插件;
5)界面与应用分离:Ajax使WEB中的数据与呈现分离,有利于分工合作,提高效率。
**AJAX的缺点:**
1)AJAX干掉了Back和History功能:即对浏览器机制的破坏,在动态更新页面的情况下,用户无法回到前一个页面状态;
2)AJAX有安全问题:AJAX技术给用户带来很好的用户体验的同时也带来了新的安全威胁,Ajax技术就如同对企业数据建立了一个直接通道;
3)对搜索引擎支持较弱:对搜索引擎优化不太友好;
4)破坏程序的异常处理机制:像Ajax.dll,Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制;
5)AJAX不能很好支持移动设备:一些手持设备(如手机、PDA等)不能很好的支持Ajax。
**了解这些之后,我们接下来看看ajax是怎样操作的,具体步骤有哪些呢**?
总结为如下四步:
 1.声明一个ajax对象
 2.输入请求信息(三个参数)
  第一个参数:请求的方式
   get       post
   第二个参数:请求的url
 第三个参数:是否异步
 true(异步)  false(同步)
 3.发送
 4.等待数据响应
```javascript
<!DOCTYPE html><html lang="en">  
 <head>      
 <meta charset="UTF-8">       
 <meta name="viewport" content="width=device-width, initial-scale=1.0">                 <title>Document</title>       
 <script>           
    window.onload = function(){               
       var oBtn = document.getElementById('btn1');               
       oBtn.onclick = function(){
       //1、声明一个ajax对象                
          var xhr = new XMLHttpRequest();
                //2、输入请求的信息     
             /*  
                  第一个参数:请求的方式          
                     get post 
                  第二个参数:请求的url                      
                  第三个参数:是否异步                           
                  true (异步)  false (同步)                 
                    */                   
                xhr.open("get", "1.txt", true);
               //3、发送                   
                 xhr.send();
                //4、等待数据响应            
             xhr.onreadystatechange = function(){
                 if(xhr.readyState == 4){
                 alert(xhr.responseText);            
                    } 
                   } 
                  } 
                 }
        </script>
            </head>
                <body>
                        <button id = 'btn1'>下载数据</button>
               </body>
            </html>
```
有一种浏览器兼容的写法:
```javascript
<!DOCTYPE html><html lang="en">   
<head>       
<meta charset="UTF-8">      
<meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title>       
<script>           
       window.onload = function(){
        var oBtn = document.getElementById('btn1');               
        oBtn.onclick = function(){
         //1、声明一个ajax对象  
         /*            
         XMLHttpRequest 在低版本的IE浏览器下并不兼容              
           */                             
          var xhr = null;
          if(window.XMLHttpRequest){
           xhr = new XMLHttpRequest();
           }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");              
            //2、输入请求的信息                   
            /*                      
             第一个参数:请求的方式                          
              get post                      
            第二个参数:请求的url                       
            第三个参数:是否异步    
            true (异步)  false (同步) 
              */                  
               xhr.open("get", "1.txt", true);
                    //3、发送  
                  xhr.send();
                //4、等待数据响应
                xhr.onreadystatechange = function(){
                   if(xhr.readyState == 4){
                     alert(xhr.responseText);
                       } 
                    }   
                  } 
                }
        </script> 
          </head>  
           <body>  
                <button id = 'btn1'>下载数据</button>  
            </body>
          </html>
```
**明白了嘛?明白了接下来我们在了解一个很有用又有趣的东西:try-throw-catch**
 格式:               
             try{                       
               我们要去执行的代码;               
               throw new Error("错误文本");
                }catch(error){ 补救代码;  }            
 执行:                   
 1、先去执行try中的代码                   
 2、如果try中的代码执行正常,catch中的代码就不执行了                  
  3、如果try中的代码执行异常(包括throw手动抛出异常),执行catch中的代码进行补救。                   
【注】同时,error是try中异常信息。
【注】最大用处的,用于代码调试。

```javascript
<!DOCTYPE html><html lang="en">   
<head>       
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title> 
<script>       
     try{ 
      alert("认识成果"); 
      alert("追到手");
      alert("娶成果");
       throw new Error("追到手代码执行正常");
        }catch(error){
       alert("我是补救代码:" + error);
         //我是补救代码:ReferenceError: num is not defined 
          }
       alert("我是最后的代码")
        </script>
       </head>  
        <body>          
        </body>
        </html>
```
好玩吧!
上面ajax中出现的get和post不陌生吧!是不是似曾相识,在那见过吧~~~那呢,对了!表单!那接下来我们就看看ajax中的get与post有什么区别。
==get参数通过url传递,post放在请求体(request body)中;   
get请求在url传递的参数有长度限制,而post没有;   
get比post更不安全,因为参数直接显示在url地址中,所以不能传递敏感数据;    
get请求浏览器会主动缓存,而post不会;
get请求参数会保存在浏览历史记录,而post请求不会;  
get和post本质上都是tcp连接。==
```javascript
<!DOCTYPE html><html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title>
 <script>          
        window.onload = function(){ 
         var aBtns = document.getElementsByTagName("button");                aBtns[0].onclick = function(){ 
          var xhr = null;
           try{
            xhr = new XMLHttpRequest(); 
             }catch(error){
         xhr = new ActiveXObject("Microsoft.XMLHTTP")   
                    }
            var str = "username=tian&age=18&password=123abc";
            xhr.open("get", "code14/1.get.php?" + str, true);
            xhr.send();
            xhr.onreadystatechange = function(){
             if(xhr.readyState == 4){
              if(xhr.status == 200){             
              alert(xhr.responseText); 
              }else{
               alert("Error:" + xhr.status);
                }
              }
           }
        }  
      aBtns[1].onclick = function(){   
        var xhr = null;
        try{
        xhr = new XMLHttpRequest();
        }catch(error){
           xhr = new ActiveXObject("Microsoft.XMLHTTP")                    }
          var str = "username=tian&age=18&password=123abc";
         xhr.open("post", "code14/1.post.php", true);
  //设置提交数据格式                    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//post提交的数据是通过send方法进行传参的,注意post提交的数据不加xhr.send(str);
            xhr.onreadystatechange = function(){
               if(xhr.readyState == 4){
                  if(xhr.status == 200){                               
                  alert(xhr.responseText);       
               }else{   
                   alert("Error:" + xhr.status)
                          }     
                      }      
                   }   
                 }  
              }       
         </script>   
         </head>   
         <body>       
         <button>GET请求</button>       
         <button>POST请求</button>   
         </body>
        </html>
```
**readystatechange事件**
xhr.readyState 值发生变化的时候,会触发上述的这个事件
0  (初始化)没有调用open方法的时候
1  (载入)已经调用send方法,发送请求
2  (载入完成)send方法已经发送完毕,接受到了所有的响应
 3  (解析)正在解析响应内容
    4  (完成)内容解析完成,可以在客户端调用了
 responseText  响应文本,以字符串的形式返回我们请求的数据。
 
**常见的status(状态码):**
200:请求成功
301:网页被重定向到其他url
304:文件未被修改,使用缓存资源
404:找不到此网页(指定的资源)
500:服务器内部错误
......
当然想知道更多状态可以去自己找!下面提供一个可跳转的超链接页面:
[更多状态码](https://www.runoob.com/http/http-status-codes.html)
**查询字符串形式:**
search(查询字符串):?name1=value1&name2=value2
querystring(查询字符串): name1=value1&name2=value2
```javascript
<!DOCTYPE html><html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title>
 <script>   
      //传入对象,拼接成querystring
        function querystring(obj){
        var str = '';
         for(var attr in obj){
          str += attr + "=" + obj[attr] + "&";
            }
         return str.substring(0, str.length - 1);
          }
            //username=tian&age=20&sex=男
           alert(querystring({
             username: "tian",
             age: 20,
             sex: "男"
        }))      
         </script>   
         </head>   
         <body>          
         </body>
        </html>
```
**最后封装一个ajax函数,记得收藏哦!**
```javascript
<!DOCTYPE html><html lang="en">   
<head>       
<meta charset="UTF-8">       
<meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title>      
 <script>
  /* 
  type 代表 请求方式
  url  代表 请求url路径 
  data 代表 发送数据  
   */          
  function $ajax(type, url, objData){             
    var xhr = null; 
      try{
       xhr = new XMLHttpRequest();
        }catch(error){ 
        xhr = new ActiveXObject("Microsoft.XMLHTTP")
                }  
        if(type == "get" && objData){
            url += "?" + querystring(objData);
                   }
                xhr.open(type, url, true);
                if(type == "get"){
                 xhr.send(); 
                  }else{
                 //设置提交数据格式 
      xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
           objData ? xhr.send(querystring(objData)) : xhr.send();
           }  
           xhr.onreadystatechange = function(){           
           if(xhr.readyState == 4){
                 if(xhr.status == 200){           
                 alert(xhr.responseText);
                  }else{ 
                   alert("Error:" + xhr.status); 
                       } 
                    }   
                 }       
            }           
         function querystring(obj){
          var str = '';
           for(var attr in obj){
           str += attr + "=" + obj[attr] + "&";
             }
             return str.substring(0, str.length - 1);
               }
            window.onload = function(){
             var aBtns = document.getElementsByTagName("button");
             aBtns[0].onclick = function(){
                   $ajax("get", "code14/1.get.php", {   
                   username: "小明",
                   age: 40,
                   password: "123abc"  });
                   }
                aBtns[1].onclick = function(){
                $ajax("post", "code14/1.post.php", {              
                  username: "小花",
                  age: 18,
                  password: "123abc"  });
                    }
                 }
        </script> 
          </head>   
          <body>       
          <button>GET请求</button>       
          <button>POST请求</button>   
          </body>
         </html>
```
==记得一定要用控制台网络查看请求数据形态哦!==
最后,希望我的文章能给你带来微妙的帮助,一起奥利给!!!当然如果你对前端开发的学习有兴趣,可以在B站上找寻码农雨飞的免费前端学习视频,代码免费送。http://www.bilibili.com/video/av77505416.当然也可以留言评论加关注与我畅所欲谈共同漫步于知识的海洋。。。。
```
 
 
 
 
 
 
 
 
 
 
 
 

加载全部内容

相关教程
猜你喜欢
用户评论