ajax

最新推荐文章于 2023-04-10 13:37:14 发布
最新推荐文章于 2023-04-10 13:37:14 发布
阅读量241 收藏
点赞数 3
分类专栏： 笔记 文章标签： ajax js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45069706/article/details/104716937
版权

今天，我就带你来了解一下ajax吧！
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格式字符串传输。
同时说到异步，有的小伙伴就懵逼了，心想异步是啥，有什么作用呢？什么
了解异步之前，我们首先看看java中的同步是什么吧！
同步：阻塞，当前程序必须等前面的程序执行完毕以后，才能运行。
举个例子：就好比我们做饭，饭做好了，才去做菜。
在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.等待数据响应

<!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>

有一种浏览器兼容的写法：

<!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中异常信息。
【注】最大用处的，用于代码调试。
在这里插入图片描述

<!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连接。

<!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：服务器内部错误
…
当然想知道更多状态可以去自己找！下面提供一个可跳转的超链接页面：
更多状态码

查询字符串形式：
search(查询字符串)：?name1=value1&name2=value2
querystring(查询字符串): name1=value1&name2=value2

<!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函数，记得收藏哦！

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

到点了☞该打代码了
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax方法XHR.readyState五种状态与示例
lifushan123的专栏
03-31 1万+
方法XHR.readyState五种状态 XHR.readyState == 状态（0，1，2，3，4） 0：请求未初始化，还没有调用 open()。 1：请求已经建立，但是还没有发送，还没有调用 send()。 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。 4：响应已完成；您可以获取并使用服务器的响
XHR readyState：深入解析与使用指南
最新发布
xyq2024的博客
07-07 496
readyState是XMLHttpRequest对象的一个只读属性，它代表了当前请求的状态。readyState的值是一个整数，它随着请求过程的不同阶段而变化。0（UNSENT）：请求未初始化。尚未调用open()方法。1（OPENED）：服务器连接已建立。已调用open()方法，但尚未调用send()方法。2（HEADERS_RECEIVED）：请求已接收。send()方法已被调用，且头部和状态已可获取。3（LOADING）：请求处理中。响应体正在下载中，此时部分数据可能已可用。
AJAX的使用与介绍
m0_46437194的博客
03-05 145
AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
关于XMLHttpRequest的xhr.readyState和 xhr.status 的简单使用
qq_33404590的博客
09-29 1469
xhr.readyState 和 xhr.status
关于xmlhttprequest的readystate属性的五个状态
dielianhuan1546的博客
09-03 813
昨天做了一个利用ajax实现页面无刷新的从服务器端获得时间的例子，当时对于xmlhttprequest对象的readystate的后三个状态不是很清楚，想了半天，也不明白！后面在程序的不同地方中用alert(xmlhttp.readystate)查看readystate值的变化，并且请教朋友之后，才弄明白其中的几个问题：创建xmlhttprequest对象之后没有调用open之前r...
Ajax
w_1106的博客
11-06 156
Ajax Ajax(Asynchronous Javascript And XML,异步Javascript和XML)是一种穿那个键交互式网络应用的网页开发技术，使得“不刷新页面向服务器发起请求”成为可能。 Ajax示例： 建立JSP页面example12_2.jsp,在该页面中演示在用户输入完学号时出发Ajax异步请求，从服务器获取学号所对应的学生信息，并对页面中相应的学生信息进行更新填充。 页面example12_2代码： <%@ page contentType="text/html;cha
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术，从基础知识到高级应用，全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括： 1. Ajax 概述：本书首先介绍了 Ajax 的概念、...
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
xhr.readyState就绪状态
weixin_30385925的博客
05-11 272
0：初始化，XMLHttpRequest对象还没有完成初始化 1：载入，XMLHttpRequest对象开始发送请求 2：载入完成，XMLHttpRequest对象的请求发送完成 3：解析，XMLHttpRequest对象开始读取服务器的响应 4：完成，XMLHttpRequest对象读取服务器响应结束 xhr.readyState属性值是0、1、2、3、4 转载于:https://ww...
AJAX之四：XHR readyState
yi杯敬明天
01-09 500
  目录 AJAX - onreadystatechange 事件 使用回调函数 HTTP状态码分类 AJAX - onreadystatechange 事件 当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了 onreadystatechange 事件机制来捕获请求的状态，继而实现响应。 当请求被发送到服务器时，我们需要执行一些基于...
AJAX总结笔记
weixin_63050915的博客
07-17 671
AJAX总结
你所不知道的原生ajax的readyState
weixin_44275941的博客
04-10 107
注意‬onreadystate change监听‬的‬时机‬，以及‬open时‬是‬同步‬还是‬异步‬，均会‬影响‬readystate的‬变化‬。五个参数，第一个是method，第一个url，第三个是是否一步，false：send方法知道答复前不会返回。2: headers received，send方法已调用，且头部和状态已可活动。3: loading，下载中，respenseText属性保护部分数据。0: unsend，代理被创建，尚未调用open方法。1: opened，open已调用。
2-3月总结
weixin_43861707的博客
03-08 139
第一周： 对前后端交互，cookie，AJAX，跨域请求，promise 回调函数进行了学习和理解。 重点掌握 前后端交互的AJAX请求。 AJAX核心代码： // 1. 创建 ajax 对象 let xhr = new XMLHttpRequest() // 2. 配置请求信息 xhr.open(‘GET’, ‘./test.php’, true) // 3. 发送请求 xhr.send()...
Ajax到JQuery Ajax学习指南
"这篇教程主要关注的是从基本的Ajax技术过渡到使用JQuery的Ajax功能的学习。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值