个人与企业签订网站开发合同,免费建站哪家性价比高,有网络但是网页打不开,商城网站大概多少钱前言#xff1a;这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方#xff0c;请大家指正#xff0c;我会持续更新#xff01; AJAX 是 asynchronous javascript and XML 的简写#xff0c;就是异步的 javascript 和 XML。这一技术能够向服务器请求额外的数据而…前言这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方请大家指正我会持续更新 AJAX 是 asynchronous javascript and XML 的简写就是异步的 javascript 和 XML。这一技术能够向服务器请求额外的数据而无须刷新整个页面会带来更好的用户体验。虽然名字中包含 XML但是 ajax 通信与数据格式无关 创建对象 因为 XMLHTTPRequest() 是一个构造函数所以需要实例化一个 XMLHttpRequset 对象。下面是创建XHR对象的兼容写法 如果要建立多个不同的请求就要实例化多个不同的 XMLHttpRequset 对象 script typetext/javascriptvar xhr;if(window.XMLHttpRequest){xhr new XMLHttpRequest();}else{xhr new ActiveXObject(Microsoft.XMLHTTP);}/script 发送请求 要想把请求发送到服务器我们就需要使用 open() 方法和 send() 方法。 open() open() 方法需要三个参数 xhr.open(GET,test.json,true); 第一个参数定义发送请求所使用的方法GET 还是 POST不区分大小写但通常使用大写字母记得带引号。 GET 用于常规请求它适用于当 URL 完全指定请求资源当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下。 然而在以下情况中请使用 POST 请求 无法使用缓存文件更新服务器上的文件或数据库向服务器发送大量数据POST 没有数据量限制发送包含未知字符的用户输入时POST 比 GET更稳定也更可靠 第二个参数规定服务器端脚本的 URL(该文件可以是任何类型的文件比如 .txt 和 .xml或者服务器脚本文件比如 .asp 和 .php 在传回响应之前能够在服务器上执行任务。 第三个参数规定是否异步发送请求的布尔值如果不填写默认为 true表示异步发送。如果接受的是同步响应则需要将 open()方法的第三个参数设置为 false那么 send()方法将阻塞直到请求完成。客户端 javascript 是单线程的当 send() 方法阻塞时它通常会导致整个浏览器界面冻结。如果连接的服务器响应慢那么用户的浏览器将冻结所以应该避免使用同步。 send() send() 方法接收一个参数即要作为请求主体发送的数据。调用 send() 方法后请求被分派到服务器。 如果是 GET 方法send() 方法无参数或参数为 null如果是 POST 方法send() 方法的参数为要发送的数据。 xhr.open(GET,test.json,false);xhr.send(null); GET GET 用于常规请求它适用于当 URL 完全指定请求资源当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下。 【数据发送】 使用 GET 方式发送请求时数据被追加到 open() 方法中 URL 的末尾可以直接看到存在安全隐患。 数据以问号开始名和值之间用等号链接名值对之间用和号()分隔。使用 GET 方式发送的数据常常被称为查询字符串。 【编码】 由于 URL无法识别特殊字符所以如果数据中包含特殊字符(如中文)则需要进行编码编码的方式有很多种其中 encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法主要对 ;/?:$,# 等这些用于分隔URI组件的字符以及中文进行编码。由于此方法对 :/ 都进行了编码所以不能用它来对网址进行编码而适合对 URI 中的参数进行编码 在 GET 请求中为了避免缓存的影响可以向 URL 末尾添加一个随机数或时间戳。 scriptvar url test.php ?name encodeURIComponent(你好);xhr.open(GET,urlNumber(new Date()),true);xhr.send(null);/script POST POST 请求通常用于向服务器发送应该被保存的数据。POST 方法常用于 HTML 表单。它在请求主体中包含额外数据且这些数据常存储到服务器上的数据库中。 在 open() 方法第一个参数的位置传入POST就可以初始化一个 POST 请求。 【设置请求头】 默认情况下服务器对 POST 请求和提交表单的请求并不会一视同仁。因此服务器端必须有程序来读取发送过来的原始数据并从中解析出有用的部分。不过可以使用 XHR 来模仿表单提交首先将 content-Type 头部信息设置为 application/x-www-form-urlencoded也就是表单提交时的内容类型 使用 setRequestHeader() 方法可以设置自定义的请求头部信息。这个方法接受两个参数头部字段的名称头部字段的值。要成功发送请求头部信息必须在调用 open()方法之后且调用 send() 方法之前调用 setRequestHeader() 方法 。 在项目中又是需要验证用户登录可以设置请求头验证。机制就是在用户首次登录成功之后服务器发送token到客户端客户端存入cookie。用户做任何请求操作时在 ajax的请求头里带上 token用以 server-end 做登录状态验证。 【发送主体】 发送 POST 请求的第三步就是向 send() 方法中传入某些数据这一点和 GET 请求不一样。由于 XHR 最初的设计主要是为了处理 XML因此可以在此传入 XML DOM 文档传入的文档经序列化之后将作为请求主体被提交到服务器。当然也可以在此传入任何想发送到服务器的字符串。 接下来要以适当的格式创建一个字符串并使用 send() 方法发送。 POST 数据的格式与 GET 数据的格式相同名和值之间用等号链接名值对之间用和号()分隔。 【编码】 由于使用 POST 方式传递数据时需要设置请求头 content-type这一步骤已经能够自动对特殊字符(如中文)进行编码所以就不再需要使用 encodeURIComponent() 方法了。 POST 请求主要用于数据提交相同 URL 的重复 POST 请求从服务器得到的响应可能不同所以不应该缓存使用 POST 方法的请求。 GET 对所发送信息的数量有限制一般在2000个字符。与 GET 请求相比POST 请求消耗的资源会更多一些。从性能角度来看以发送相同的数据计GET 请求的速度最多可POST请求的两倍。 scriptxhr.open(POST,url,true);//设置请求头xhr.setRequestHeader(content-type,application/x-www-form-urlencoded);//拼接数据var strData nameabcnum123;//发送请求xhr.send(strData);/script 接收响应 一个完整的 HTTP 响应由状态码、响应头集合和响应主体组成。 在收到响应后这些都可以通过 XMLHttpRequset 对象的属性和方法使用主要有以下4个属性 responseText作为响应主体被返回的文本文本格式responseXML如果响应的内容类型是 text/xml 或 application/xml这个属性中将保存着响应数据的 XML DOM 文档document 格式statusHTTP状态码数字形式statusTextHTTP状态说明文本格式 在接收到响应后第一步是检查 status 属性以确定响应已经成功返回。一般来说可以将 HTTP 状态码为 200 作为响应成功的标志。此时responseText 属性的内容已经就绪而且在内容类型正确的情况下responseXML 也可以访问了。此外状态码为 304 表示请求的资源并没有被修改可以直接使用浏览器中缓存的版本当然也意味着响应是有效的。 无论内容类型是什么响应主体的内容都会保存到 responseText 属性中而对于非 XML 数据而言responseXML 属性的值将为 null if((xhr.status 200 xhr.status 300) || xhr.status 304){alert(xhr.responseText);}else{alert(请求失败响应代码为 xhr.status);} 异步响应和同步响应 如果不设置 open() 方法的第三个参数默认为true即异步响应。 如果接收的是异步响应这就需要检测 XMLHttpRequset 对象的 readyState 属性该属性表示 请求/响应 过程的当前活动阶段。这个属性可取的值如下 0UNSENT未初始化还没调用open()1OPEND启动已经调用open() 但还没调用 send()2HEADERS_RECEIVED发送己经调用 send() 方法且接收到头信息。3LOADING正在接收已经接收到部分响应主体信息。4DONE完成已经接收到全部响应数据而且已经可以在客户端使用了。 理论上只要 readyState 属性值由一个值变成另一个值都会触发一次 readystatechange 事件。可以利用这个事件来检测每次状态变化后 readyState 的值。通常我们对readyState 值为4的阶段感兴趣因为这时所有数据都已就绪。 必须在调用 open() 之前指定 onreadystatechange 事件处理程序才能确保跨浏览器兼容性否则将无法接收 readyState 属性为0和1的情况 。 xhr.onreadystatechange function(){if(xhr.readyState 4){if(xhr.status 200){alert(xhr.responseText);}}} 如果将 open() 方法的第三个参数设置为 false接收的就是同步响应那么 send() 方法将阻塞直到请求完成。一旦 send() 返回仅需要检查 XHR对象的 status 和responseText 属性即可。 应该避免使用同步请求。客户端 javascript 是单线程的当 send() 方法阻塞时它通常会导致整个浏览器 UI 冻结。如果连接的服务器响应慢那么用户的浏览器将冻结用户体验非常不好。 进度事件 一般地使用 readystatechange 事件探测 HTTP 请求的完成。XHR2 规范草案定义了进度事件 Progress Events 规范XMLHttpRequest 对象在请求的不同阶段触发不同类型的事件所以它不再需要检査 readyState 属性。 有以下6个进度事件 loadstart: 在接收到响应数据的第一个字节时触发progress: 在接收响应期间持续不断地触error: 在请求发生错误时触发abort: 在因为调用abort()方法而终止连接时触发load: 在接收到完整的响应数据时触发loadend: 在通信完成或者触发error、abort或load事件后触发timeout: 超时发生时触发 每个请求都从触发 loadstart 事件开始接下来通常每隔50毫秒左右触发一次 progress 事件然后触发 load、error、abort 或 timeout 事件中的一个最后以触发 loadend 事件结束 对于任何具体请求浏览器将只会触发 load、abort、timeout 和 error 事件中的一个。XHR2规范草案指出一旦这些事件中的一个发生后浏览器应该触发 loadend 事件。 load 响应接收完毕后将触发 load 事件因此也就没有必要去检查 readyState 属性了。但一个完成的请求不一定是成功的请求例如onload 事件的处理程序应该检查 XMLHttpRequest 对象的 status 状态码来确定收到的是“200 OK”而不是“404 Not Found”的HTTP响应 progress progress 事件会在浏览器接收新数据期间周期性地触发。而 onprogress 事件处理程序会接收到一个 event 对象其 target 属性是 XHR 对象但包含着三个额外的属性lengthComputable、loaded 和t otal。其中lengthComputable 是一个表示进度信息是否可用的布尔值loaded 表示已经接收的字节数total 表示根据 Content-Length 响应头部确定的预期字节数。有了这些信息就可以为用户创建一个进度指示器了。 上传进度upload 除了为监控 HTTP 响应的加载定义的这些有用的事件外XHR2 也给出了用于监控 HTTP 请求上传的事件。在实现这些特性的浏览器中XMLHttpRequest 对象将有 upload 属性。upload 属性值是一个对象它定义了 addEventListener() 方法和整个 progress 事件集合比如 onprogress 和 onload。但 upload 对象没有定义 onreadystatechange 属性upload 仅能触发新的事件类型。 input typefile namefile1 idfile1 styledisplay:nonebutton idbtn上传文件/buttondiv idpro/divdiv idresult/divscriptbtn.onclick function(){file1.click();pro.innerHTML result.innerHTML ; } file1.onchange function(){ //创建xhr对象 var xhr new XMLHttpRequest(); var data file1.files[0]; //上传事件 xhr.upload.onprogress function(e){ e e || event; if (e.lengthComputable){ pro.innerHTML 上传进度为 e.loaded of e.total bytes 百分比为 e.loaded/e.total; } } xhr.onload function(e){ var data xhr.responseText; e e || event; if(xhr.status 200){ result.innerHTML data; } }; //发送请求 xhr.open(post,pp.php,true); xhr.setRequestHeader(content-type,data.type); xhr.send(data); } /script 超时、中止、错误事件 HTTP 请求无法完成有3种情况。如果请求超时会触发 timeout 事件。如果请求中止会触发 abort 事件。最后像太多重定向这样的网络错误会阻止请求完成但这些情况发生时会触发 error 事件。 可以通过调用 XMLHttpRequest 对象的 abort() 方法来取消正在进行的 HTTP 请求。调用 abort() 的主要原因是完成取消或超时请求消耗的时间太长或当响应变得无关时。 XHR对象的 timeout 属性等于一个整数表示多少毫秒后如果请求仍然没有得到结果就会自动终止。该属性默认等于0表示没有时间限制。如果请求超时将触发ontimeout 事件。 scriptvar xhr new XMLHttpRequest();btn.onclick function(){xhr.abort();}xhr.onabort function(){ console.log(请求已终止); } xhr.ontimeout function(){ console.log(请求超时); } xhr.timeout 3000; xhr.onerror function(){ console.log(请求报错); } xhr.onloadend function(){ console.log(请求结束); } /script 转载于:https://www.cnblogs.com/sspeng/p/7648620.html
