皮皮网

1.jquery ajax的readyState和status的区别和使用
2.jquery如何获取ajax中data的值
3.Ajax、源码Fetch、源码Axios 篇
4.jqueryajax请求

jquery ajax的readyState和status的区别和使用

       åœ¨å‰å‡ ç¯‡åˆ†æžäº†jquery的ajax异步和同步，以及异常的一些处理，感觉还没有把ajax的readyState和status说清楚.今天就来说说ajax状态的那点事。

       jquery ajax函数源代码是这样的：

       var getXmlHttpRequest = function () {

       if (window.XMLHttpRequest) {

       //主流浏览器提供了XMLHttpRequest对象

       return new XMLHttpRequest();

       }

       else if (window.ActiveXObject) {

       //低版本的IE浏览器没有提供XMLHttpRequest对象

       //所以必须使用IE浏览器的特定实现ActiveXObject

       return new ActiveXObject("Microsoft.XMLHTTP");

       }

       };

       var xhr = getXmlHttpRequest();

       xhr.onreadystatechange = function () {

       if (xhr.readyState === 4 && xhr.status === ) {

       //获取成功后执行操作

       //数据在xhr.responseText

       }

       };

       xhr.open("TYPE",源码 "URL", true);

       xhr.send("");

       ä»€ä¹ˆæ˜¯readyState

       readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。

       readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义，如下表所示：

       0 未初始化状态：此时，已经创建了一个XMLHttpRequest对象

       1 准备发送状态：此时，已经调用了XMLHttpRequest对象的open方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端

       2 已经发送状态：此时，已经通过send方法把一个请求发送到服务器端，但是还没有收到一个响应

       3 正在接收状态：此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到

       4 完成响应状态：此时，已经完成了HTTP响应的接收

       ä»€ä¹ˆæ˜¯status

       status是XMLHttpRequest对象的一个属性，表示响应的HTTP状态码。

       åœ¨HTTP1.1协议下，HTTP状态码总共可分为5大类，如下表所示：

       1XX 服务器收到请求，需要继续处理。例如状态码，表示服务器将通知客户端使用更高版本的HTTP协议。

       2XX 请求成功。例如状态码，表示请求所希望的响应头或数据体将随此响应返回。

       3XX 重定向。例如状态码，表示临时重定向，请求将包含一个新的URL地址，客户端将对新的地址进行GET请求。

       4XX 客户端错误。例如状态码，表示客户端请求的资源不存在。

       5XX 服务器错误。例如状态码，表示服务器遇到了一个未曾预料的情况，导致了它无法完成响应，一般来说，这个问题会在程序代码出错时出现。

       æŠ›å‡ºé—®é¢˜

       ä¸ºä»€ä¹ˆonreadystatechange的函数实现要同时判断readyState和status呢？

       æˆ‘们知道 readyState === 4 已经表示了请求响应成功了，为什么还要后续的status呢？带着问题，我们开始来做一些试验吧。

       åªä½¿ç”¨readyState判断

       javascript端的实现代码如下：

       var getXmlHttpRequest = function () {

       if (window.XMLHttpRequest) {

       return new XMLHttpRequest();

       }

       else if (window.ActiveXObject) {

       return new ActiveXObject("Microsoft.XMLHTTP");

       }

       };

       var xhr = getXmlHttpRequest();

       xhr.onreadystatechange = function () {

       if (xhr.readyState === 4) {

       alert(xhr.responseText);

       }

       };

       xhr.open("GET", "/data.aspx", true);

       xhr.send("");

       æˆ‘们在服务端抛出异常：

       public partial class data : System.Web.UI.Page

       {

       protected void Page_Load(object sender, EventArgs e)

       {

       throw new Exception("Error");

       }

       }

       è¿è¡Œjavascript代码，提示窗口出现了如下：

       IT分享

       æœåŠ¡å“åº”出错了，但还是返回了信息，这并不是我们想要的结果。打开Fiddler监控，可以看到data.aspx返回的是响应，但由于只使用 readystate做判断，它不理会放回的结果是还是，只要响应成功返回了，就执行接下来的javascript代码，结果将造成各种不可 预料的错误。所以只使用readyState判断是行不通的。

       æ¢å¦å¤–一个角度想，状态码返回就表示这次响应是成功的了，那么是不是可以不使用readyState，单独只使用status做判断呢？好，带着问题，继续来做试验吧。

       åªä½¿ç”¨status判断

       javascript端的代码实现如下：

       var getXmlHttpRequest = function () {

       if (window.XMLHttpRequest) {

       return new XMLHttpRequest();

       }

       else if (window.ActiveXObject) {

       return new ActiveXObject("Microsoft.XMLHTTP");

       }

       };

       var xhr = getXmlHttpRequest();

       xhr.onreadystatechange = function () {

       if (xhr.status === ) {

       alert("readyState=" + xhr.readyState + xhr.responseText);

       }

       };

       xhr.open("GET", "/data.aspx", true);

       xhr.send("");

       äº‹ 实上，结果却不像预期那样。响应码确实是返回了，但是总共弹出了3次窗口！第一次是“readyState=2”的窗口，第二次是 “readyState=3Test”的窗口，第三次是“readyState=4Test”的窗口。由此，可见onreadystatechange函 数的执行不是只在readyState变为4的时候触发的，而是readyState的每次变化都会触发，所以就出现了前面说的那种情况。可见，单独使用 status判断也是行不通的。

       è¿›ä¸€æ­¥æ€è€ƒ

       ç”±ä¸Šé¢çš„试验，我们可以知道判断的时候readyState和 status缺一不可。那么readyState和status的先后判断顺序会不会有影响呢？我们可以将status调到前面先判断，代码如 xhr.status === && xhr.readyState === 4。

       äº‹å®žä¸Šï¼Œè¿™å¯¹äºŽæœ€ç»ˆçš„结果 是没有影响的，但是中间的性能就不同了。由上一个试验我们知道，readyState的每次变化都会触发onreadystatechange函数，假如 先判断status，那么每次都会多判断一次status的状态。虽然性能上影响甚微，不过我们还是应该抱着追求极致代码的想法，把readyState 的判断放在前面。

jquery如何获取ajax中data的值

       $.post、$.get是一些简单的方法，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()  。

       $.ajax的一般格式  

       $.ajax({   

            type: 'POST',  

            url: url ,  

            data: data ,

       ã€€ã€€  dataType:dataType ,  

            success: success , 

            error: error   

       });  

扩展资料

       $.ajax的参数描述  

       å‚æ•° 描述  

       url 必需。规定把请求发送到哪个 URL。  

       data    可选。映射或字符串值。规定连同请求发送到服务器的数据。  

       success(data, textStatus, jqXHR)    可选。请求成功时执行的回调函数。  

       dataType      

       å¯é€‰ã€‚规定预期的服务器响应的数据类型。  

       é»˜è®¤æ‰§è¡Œæ™ºèƒ½åˆ¤æ–­ï¼ˆxml、json、script 或 html）。  

       $.ajax需要注意的一些地方：  

       1、data主要方式有三种，html拼接的，json数组，form表单经serialize()序列化的；通过dataType指定，不指定智能判断。  

       2、$.ajax只提交form以文本方式，如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit  

         

Ajax、Fetch、源码Axios 篇

       Ajax是源码async javaScript and xml的缩写，是源码聊天系统exe源码一种可以扩展的文本标记语言，常用于从服务端返回数据结构，源码现在基本都是源码使用 json 格式返回数据。在不刷新全局的源码条件下，局部刷新页面是源码Ajax的主要作用。

       创建Ajax实例的源码方法为let xhr = new XMLHttpRequest()，注意：IE6不兼容这种写法。源码仿考试资料源码打开请求时，源码配置请求前的源码配置项共有5个参数，包括：xhr.open([/api/'，源码这将设置一个Authorization头，覆写掉现有的任意使用headers设置的自定义Authorization头；auth表示HTTP基础验证应当用于连接代理，并提供凭据；这将会设置一个Proxy-Authorization头，覆写掉已有的通过使用header设置的自定义Proxy-Authorization头。

       Axios可以说把请求这件事做到了极致，封装的很好用，浏览器支持的方法，除了IE低版本以外，源码升级的意思最新版的浏览器都是支持的。

       Fetch是http的数据请求方式，是XMLHttpRequest的一种代替方案，没有使用到XMLHttpRequest这个类。fetch()采用模块化设计，API分散在Response对象、Request对象、Headers对象上。fetch()通过数据流（Stream对象）处理数据，对于请求大文件或者网速慢的场景相当有用。XMLHttpRequest没有使用数据流，phy矿机源码所有的请求都必须完成后才拿到。在默认情况下fetch不会接受或者发送cookies。

       fetch(url,optionObj)基本使用中，fetch参数没有同步的设定，因为fetch是基于promise封装的本身就是异步的。fetch虽然使用的是promise封装，但是catch函数不能直接捕获到错误，需要在第一个then函数内做些操作。fetch发送post请求时，当发生的是跨域请求，fetch会先发送一个OPTIONS请求，各类源码搭建教程来确认服务器是否允许接受请求，这个请求主要是用来询问服务器是否允许修改header等一些操作。服务器同意后返回，才会发送真正的请求。没有发生跨域的情况下不会产生两次请求。

       fetch的三个模块包括：Response对象、Request对象、Headers对象。

       fetch发送post两次请求的原因是在使用fetch发送post请求时如果是跨域，那么导致fetch第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

       fetch的缺点包括：get/head请求不能设置body属性；fetch请求后，服务器返回的状态码无论是多少包括(4xx,5xx)，fetch都认为是失败的，也就是使用catch也不能直接捕捉到错误，需要再第一个then中做一些处理。

       Ajax、Fetch、Axios综合中，实现一个Ajax可以将原生的Ajax封装成promise。Ajax、Axios、Fetch的区别包括：传统的Ajax利用的是XMLHttpRequest这个对象，和后端进行交互。JQueryAjax是对原生XHR的封装，多请求间有嵌套的话就会出现回调地狱的问题。axios使用promise封装xhr，解决了回调地狱问题。fetch不是XMLHttpRequest，fetch是原生的js，使用的是promise。

       fetch使用的是promise方便使用异步，没有回调地狱的问题。要实现一个Ajax请求，可以将原生的Ajax封装成promise。实现两个有顺序的Ajax请求可以使用promise.then()。Ajax解决浏览器缓存问题可以通过设置请求头，例如：anyAjaxObj.setRequestHeader("If-Modified-Since","0") 或 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。

jqueryajax请求

       jqueryajax请求是什么呢？不知道的小伙伴来看看小编今天的分享吧!

       什么是AJAX？

       AJAX=异步JavaScript和XML（AsynchronousJavaScriptandXML）。简短地说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。使用AJAX的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

       jQuery提供多个与AJAX有关的方法。通过jQueryAJAX方法，能够使用HTTPGet和HTTPPost从远程服务器上请求文本、HTML、XML或JSON-同时您能够把这些外部数据直接载入网页的被选元素中。

       jQueryAJAX方法

       $.ajax()执行异步AJAX请求

       $.ajaxPrefilter()在每个请求发送之前且被$.ajax()处理之前，处理自定义Ajax选项或修改已存在选项

       $.ajaxSetup()为将来的AJAX请求设置默认值

       $.ajaxTransport()创建处理Ajax数据实际传送的对象

       $.get()使用AJAX的HTTPGET请求从服务器加载数据

       $.getJSON()使用HTTPGET请求从服务器加载JSON编码的数据

       $.getScript()使用AJAX的HTTPGET请求从服务器加载并执行JavaScript

       $.param()创建数组或对象的序列化表示形式（可用于AJAX请求的URL查询字符串）

       $.post()使用AJAX的HTTPPOST请求从服务器加载数据

       ajaxComplete()规定AJAX请求完成时运行的函数

       ajaxError()规定AJAX请求失败时运行的函数

       ajaxSend()规定AJAX请求发送之前运行的函数

       ajaxStart()规定第一个AJAX请求开始时运行的函数

       ajaxStop()规定所有的AJAX请求完成时运行的函数

       ajaxSuccess()规定AJAX请求成功完成时运行的函数

       load()从服务器加载数据，并把返回的数据放置到指定的元素中

       serialize()编码表单元素集为字符串以便提交

       serializeArray()编码表单元素集为names和values的数组

       以上就是小编今天的分享了，希望可以帮助到大家。