认识AJAX及函数使用

Posted 2020-10-15 噜噜修

一、什么是AJAX        Ajax(Asynchronous javascript and XML),可以理解为JavaScript执行异步网络请求。通俗的理解的话就是，如果没有Ajax技术，改变网页的一小部分（哪怕是一行文字、一张图片）都需要重新加载一次整个页面，而有了Ajax之后，就可以实现在网页不跳转不刷新的情况下，在网页后台提交数据，部分更新页面内容。 二、AJAX的原声写法        1.XMLHttpRequest对象               XMLHttpRequest 对象用于在后台与服务器交换数据，能够在不重新加载页面的情况下更新网页，在页面已加载后从服务器请求数据，在页面已加载后从               服务器接收数据，在后台向服务器发送数据。所以XMLHttpRequest对象是Ajax技术的核心所在。                 2.实现流程                创建 XMLHttpRequest对象——>打开请求地址，初始化数据——>发送请求数据——>监听回调函数状态——>收到服务器返回的应答结果。                                废话不多说，直接上代码 var xmlhttp;              ： function loadXMLDoc(url) {     xmlhttp = null;     if (window.XMLHttpRequest){         //code for all new beowsers         xmlhttp = new XMLHttpRequest();//here is creat XMLHttpRequest object              } else if (window.ActiveXObject){         //code for IE5 and IE6         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");     }      if (xmlhttp){         xmlhttp.open("GET",url,true); //request mode and request address         xmlhttp.send(null); //send request          xmlhttp.onreadystatechange = state_Change; //monitor callback fun     } else {         alert("Your browser dose not support XMLHTTP");     } } // statr_Change callback function  function state_Change() {      if(xmlhttp.readyState == 4&&xmlhttp.status == 200) {         // to hide these two conditions is to express the succ of the request 4 = "loaded", 200 = OK        var data = xmlhttp.responseText;     } else {         alert("Problem resrieving XML data");     } }  3.原声写法中的注意点             (1).open()的第三个参数中使用了“true”，该参数规定请求是否异步处理，默认是异步。                  true表示脚本会在send（）方法之后继续执行，而不等来自服务器的相应。                        (2).关于readyState            (3).关于status由服务器返回的HTTP状态代码，200 表示成功，404 表示 “Not Found”错误。当readyState小于 3 的 时候读取这一属性会导致一个异常。（后面有http状态码详细解读） Jquery中的AJAX            Jquery对原声Ajax做了很好的封装，使用起来非常非常的月贴（舒服），比如$ajax,$get,$post,$getjson等根据不用需要进行调用，写法简洁明了，但是为兼顾哥哥方法在这里我以一个通用的方法$ajax为例做一个简单的分析，按照下面的模式写好各个参数，就能成功进行Ajax请求了，可能在实际中使用$POST,$GET这两个方法比较多，废话少说，看下面代码如何用jquery写ajax： $.ajax({     type:‘‘, // Request mode: get or post     url:‘‘, //request url     async:"", // Whether to support asynchronous refresh,default true     data:"", // need submit data     dataType:"", //the type if data retured bt the server     success:function(data){        //the callback function after the request,data is by the sercer returned      },     error:function(data){         //the callback function is error,     } }) 四、GET or POST？         作为Ajax最常用的两种数据提交方式，GET和POST有着自己的特点和使用场景，正确区分GET和POST的不同根据实际需求进行选用在开发中十分重要，简单是关键！！！ 关键点：         1.传递数据的方式不同：get是直接把请求数据放在url的后面，是可见的，post的请求数据不会显示在url中，是不可见得。         2.数据长度和数据类型的差异：get有数据长度的限制，且数据类型只允许ASCII（ASCII是英文American Standard Code for Information Interchange的缩写。ASCII码是目前计算机最通用的编码标准,方便网站站长程序猿ASCII码查询）字符，post在这两方面都没有限制。         3.安全性的差异：get不安全，post更安全。（废话，一个安全，一个不安全）      由此得出两者使用的场景：           get使用方便，使用于页面之间非敏感数据的简单传值，post使用较为安全，适用于向服务器发送密码、token等敏感数据。 五、success和complete区别         Jquery封装的Ajax回调函数中，success、error、complete是最常用的三个，其中，success和error很好的区别，一个是请求成功回调用的，另一个是请求失败用的，从字上面就可以so ease 的理解，但是success和complete容易混淆，所以这里我做了一个特别说明：        success：请求成功后回调函数，（我只有在成功后出来）。        complete：请求完成后回调函数（不管成功失败，我都会出来的）。                请注意括号里面的，没错区别就在于括号里面的，也就是说调用的success一定会调用complete，但是调用comlaete不一定会调用success。（状态码404、403、301、302...都会进入到complete，只要没毛病就会调用） 六、XML -> JSON          Ajax中的“x”就是XML。               xml:可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使用其具有结构标记语言。          xml作为一种数据交互格式，广泛用字啊计算机领域，然而，随着json的发展，json以其明显的有事已经“贱贱”的取代了xml成为现在数据交互的格式标准，所以在这里，想强调的是，json现在是主流的！主流的！主流的！交互格式，前后端的交互标准，无论是前端提交后台的数据，还是后台返回给前端的数据，都最好统一成json格式。 七、jquery中封装的ajax方法使用             .ajaxComplete()-------------请求完成时       .ajaxError()-----------请求失败时       .ajaxSend()-------------在Ajax请求发送时附加一个function去执行       .ajaxStart()-----------请求开始时       .ajaxStop()----------请求 结束时       .ajaxSuccess()--------------请求成功时       .load()---------------从服务器加载数据并将返回的html替换到选择的元素中       .Jquery.post()-----------使用HTTP POST请求加载服务器端数据       .serialize()------------将from元素集编码成一个字符串以便提交       .serializeArray()---------------将from元素集编码成一个键值对的数组或对象       .Jquery.param()-----------------创建一个序列化的数组或对象，使得适用于一个URL查询字符串或者AJax请求       .Jquery.getScript()----------------从服务器端加载一个js文件，然后执行它       .Jquery.getJSON()---------------从服务器端加载用json编码过得数据       .Jquery.get()-----------从服务器加载数据简单说其中亮点 ajaxstar和ajaxstop <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="test/jquery.js"></script> </head> <body> <div class="trigger">trigger</div> <div class="result"></div> <div class="log1"></div> <div class="log2"></div> </body> <script type="text/javascript"> $(document).ready(function(){ //在此就不写注释了，字面上都是可以看懂的  嘻嘻 $(‘.log1‘).ajaxStart(function(){ $(this).text(‘start handler‘); }); $(‘.log2‘).ajaxStop(function(){ $(this).text("ajax stop"); }); $(‘.trigger‘).click(function(){ $(‘.result‘).load(‘xxxx.html‘) }) })   </script> </html>   WEB前端学习交流群21 598399936