ajax

时间:2020-03-07 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.当然也可以留言评论加关注与我畅所欲谈共同漫步于知识的海洋。。。。
```

加载全部内容