本文共 5087 字,大约阅读时间需要 16 分钟。
异步 JavaScript 和 XML(Asynchronous JavaScript and XML)
浏览器提供的API,通过js直接发送网络请求 遵循http协议
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
var xhr = new XMLHttpRequest()
Var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);老版本IE5 和 IE6使用 ActiveX 对象一定要在发送请求之前注册函数,保证函数一定触发
onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。 使用 callback 函数
1、readyState四个阶段五个状态
(0创建-1初始化请求,发送请求-2接收数据-3解析数据-4完成) 0: 请求未初始化,(XMLHttpRequest)对象已经创建 1: 服务器连接已建立,对XMLHttpRequest对象进行初始化,即调用open()方法,并调用send()方法开始向服务端发送请求。 2: 请求已接收,send()方法执行完成,已经接收服务器端响应报文的响应头数据xhr.getAllResponseHeaders(),还没拿到响应体 3: 请求处理中,正在下载响应体 4: 请求已完成,已经接收完响应体responseBody、responseText(字符串形式)或responseXML(XML)2、status
1) 201-206都表示服务器成功处理了请求的状态代码,说明网页可以正常访问。
200:请求成功(后台处理结果ok) 2) 300-3007表示的意思是:要完成请求,需要进一步进行操作 303:重定向 304:未修改,如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。304响应禁止包含消息体,因此始终以消息头后的第一个空行结尾。 3) 4XX-HTTP状态码表示请求可能出错 400:请求错误、401:未授权、403:禁止访问、404:文件未找到 4) 500-505:服务器在尝试处理请求时发生内部错误 500:服务器内部错误 505:服务端错误,服务器不支持,或者拒绝支持在请求中使用的 HTTP 版本。状态码status-200
状态描述statusText-OK响应头信息
指定响应头getResponseHeader(‘Content-Type’)-text/plain 全部响应头getAllResponseHeaders()设置获取到的响应体类型responseType=”“
默认为空,相当于text Json:IE10及以上兼容,所以直接采用原始方式json.parse(this.responseText) arraybuffer/blob:接收二进制数据类型 document:接收一段html响应体信息
response、responseText(字符串形式)或responseXML(XML形式) 区别: response获取到的结果根据responseType变化,可以获取到不同类型的响应体 responseText获取到的永远为字符串类型的响应体HTML5提供的新api
xhr.onload = function(){this.readyStatus/this.responseText}相当于onreadystatechange 中readyStatus=4的状态,已接收完响应体请求行
xhr.open(method,url,async) open()参数设置 1.method:get/post GET 更简单也更快,并且在大部分情况下都能用。 在以下情况中,请使用 POST 请求: 1) 无法使用缓存文件(更新服务器上的文件或数据库) 2) 向服务器发送大量数据(POST 没有数据量限制) 3) 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠 2.url发送任意类型文件 3.aysnc:true(异步)/false(同步) XMLHttpRequest 对象用于 AJAX 的话,其 open() 方法的最好设置为异步 1) 当是异步时,浏览器把请求发送后就继续做自己的事,当onreadystatechange事件到来时说明服务端的数据来了,这时再处理数据。类似于一个节点绑定点击事件后就做后面的事,当用户点击了再执行绑定的处理函数。 2) 当是同步时,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。 当使用 async=false 时,不用编写 onreadystatechange 函数,把代码放到 send() 语句后面即可.请求头
xhr.setRequestHeader(header,value) 用于POST 数据,添加 HTTP 头 ‘Content-Type’,’application/x-www-form-urlencoded’便于服务器端接收数据请求体
xhr.send(string)仅用于 POST 请求,传递需要提交到服务器的参数’key1=value1&&key2=value2’使用模板引擎art-template处理数据
传递参数的形式如果为object,要转换
判断get/post时,字符的大小写问题 get/post传递参数的处理方法不同 为post方法添加请求头 onreadystatechange函数(异步)中,使用回调函数实现委托机制.ajax()全局事件 . a j a x ( ) 全 局 事 件 (document)
.ajaxStart(function(e){}) ajax请求发生执行 .ajaxStop(function(e){}) ajax请求结束就开始执行 .ajaxSuccess(function(e,xhr,xhrOptions){}) ajax请求成功执行 .ajaxError(function(e,xhr,xhrOptions){}) ajax请求失败执行 .ajaxComplete(function(e,xhr,xhrOptions){}) ajax请求完成执行底层接口,基于XMLHttpRequest
$.ajax({ url: ‘/example/jquery/demo_test.asp’, type: ‘post’, 默认为get data: { id:1 }, 设置请求参数,get为url里面的参数,post为请求体里面的参数 dataType: ‘json’, 设置响应体类型,不指定时,默认和responseType相同 beforeSend: function(xhr,o) { 所有发送请求操作之前,即open前,执行的函数 console.log(xhr); //readyState=0 } success: function(responseTxt,statusTxt,xhr) { 只有请求成功才会执行status:200 console.log(responseTxt); //readyState=4 } error: function(xhr,statusTxt) { 只有请求不正常才会执行status!==200 console.log(xhr); //readyState=4 } complete: function(xhr,statusTxt) { 无论请求成功还是失败都会执行 console.log(xhr); //readyState=4 } });.get()、 . g e t ( ) 、 .post()、 .getJSON()基于 . g e t J S O N ( ) 基 于 .ajax()
函数第一个参数为responseText,第二个参数为status,有两个值success/error .get(‘url′,id:1,function(responseTxt)console.log(responseTxt);//请求成功执行) . g e t ( ‘ u r l ′ , i d : 1 , f u n c t i o n ( r e s p o n s e T x t ) c o n s o l e . l o g ( r e s p o n s e T x t ) ; / / 请 求 成 功 执 行 ) .post(‘url’, { id:1 }, function(responseTxt) { console.log(responseTxt); }) $.getJSON(‘url’, { id:1 }, function(responseTxt) { console.log(responseTxt); })jQuery load()
(selector).load(URL,data,callback); 可以把 jQuery 选择器添加到 URL 参数 ”url #p1” Callback三个参数 (selector).load(URL,data,callback); 可以把 jQuery 选择器添加到 URL 参数 ”url #p1” Callback三个参数 (“#div1”).load(“demo_test.txt”,function(responseTxt,statusTxt,xhr){ if(statusTxt==”success”) alert(“外部内容加载成功!”); if(statusTxt==”error”) alert(“Error: “+xhr.status+”: “+xhr.statusText); });同源策略
同源:协议、域名、端口完全相同 协议https 域名www.baidu.com 端口https默认为443,http默认为80同源策略:不同源地址之间默认不能发送ajax请求
尝试进行跨域请求
Img link 可以发送不同源之间的请求,但是不能拿到响应结果 script iframeJSONP
JSON with Padding 跨域请求 原理: 通过script标签请求一个服务端的PHP文件 返回结果为一段JS,作用在于调用我们事先定义的函数 从而将服务端想发送给客户端的数据发送给客户端$.ajax中设置dataType:’jsonp’接收json格式数据
jsonp:’successCallback’, jsonpcallback:’successCallback’自定义的json回调名称,默认为jquery自动生成的随机函数名 此时,服务器需指定 Response.ContentType=”text/html; charset=utf-8”; String callback = Request.QueryString[“successCallback”].ToString(); Response.Write(callback + “{ \”success\”: [{ \”id\”: 1, \”title\”: \”title 1\” }, { \”id\”: 2, \”title\”: \”title 2\” }, { \”id\”: 3, \”title\”: \”title 3\”}] }”);AJAX跨域(CORS)cross Origin Resorce Share
在服务端允许跨域 Header(‘Content-Type’,’Access-Control-Allow-Origin:*’ )$.getJSON(“?
jsoncallback=?”, function(data){ $.each(data.items, function(i,item){});
});转载地址:http://hfaen.baihongyu.com/