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的缩写,是源码股票阻力指标源码一种可以扩展的文本标记语言,常用于从服务端返回数据结构,源码现在基本都是源码使用 json 格式返回数据。在不刷新全局的源码条件下,局部刷新页面是源码Ajax的主要作用。
创建Ajax实例的源码方法为let xhr = new XMLHttpRequest(),注意:IE6不兼容这种写法。源码exception类的源码打开请求时,源码配置请求前的源码配置项共有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没有使用数据流,c++源码格式所有的请求都必须完成后才拿到。在默认情况下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的数组
以上就是小编今天的分享了,希望可以帮助到大家。