Ajax基础的清晰讲解

最近一直在搞基础的东西，做了一个持续更新的githubnote，大家可以去看看，诚意之作（原来是写给自己的。。。)链接地址：Front-End-Basics本文地址：Ajaxbasics相关基础笔记github地址：https://github.com/qiqihaobenben/Front-End-Basics，可以观看或star。正文开始...AjaxAsynchronousJavaScriptandXML：异步js和XML，一种前后端数据交互的技术。Ajax的优势在于传输和获取数据，无需跳转到页面，在该页面请求服务器实现实时验证。降低用户返工率，优化用户体验。GET方法将数据放在url中发送，主要步骤是获取数据1.创建一个ajax对象varajax=newXMLHttpRequest();2.传入请求参数//method,url,true参数ajax.open('get','php/get.php?user='+encodeURIComponent(value),true);3.发送数据ajax.send(null);send()方法传入一个参数，就是要作为请求体发送的数据。如果不需要通过请求体发送数据，则必须传入null，因为有些浏览器需要这个参数。注意第一点，get方式请求是有长度限制的。因为是通过地址栏中的查询信息来请求的。（即get通过url地址传输，post通过浏览器传输）2、请求信息显示在地址栏，直接暴露了用户填写的信息，访问的数据会被缓存由浏览器在历史记录中，所以说不安全。3.获取拼接数据时，使用encodeURIComponent包裹起来，否则在低版本IE浏览器中使用中文时会出现汉字乱码。encodeURIComponent('Liu')intourldecodeURIComponent('%E5%88%98')intoChinese4.存在缓存问题解决：在url？后面连接一个随机数，在send()中发送时间戳POST数据。步骤1.创建一个ajax对象varajax=newXMLHttpRequest();2.传入请求参数ajax.open('post','php/post.php',true);//method,url,三个参数的真正含义1、提交方式Form-method2、提交地址Form-action3、异步（synchronous）异步：非阻塞前面的代码不会影响后面代码的执行同步：阻塞前面的代码会影响后面代码的执行3.设置请求头ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded')//要成功发送请求对于header信息，必须在调用open()方法之后调用send()方法之前调用setRequestHeader()4.发送数据ajax.send('user=cfangxu')注意是post方式请求，理论上没有长度或大小限制，看具体浏览器和后台设置。数据通过http文本（requestbody-请求文本）发送，不会直接暴露用户信息，发送的数据也不会被浏览器缓存，相对安全。send()前需要设置请求头（不设置会报错）。post提交的数据格式有多种text/plainapplication/x-www-form-urlencoded-默认multipart/form-datapost提交数据时，需要设置请求头content-type：取值可以是其中之一以上三种1.ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');打开的时候不需要像get那样拼接数据，拼接数据填入send。接收数据的onload事件属于html5，存在兼容性问题ajax.onload=function(){//打印传输的数据console.log(ajax.responseText)}onreadystatechange事件支持IE6，兼容性好。其中readyState属性：请求状态0（未初始化），未调用open()方法，0未监听，1已启动，已调用open()方法。2发送，已经调用了send()方法，但是还没有收到响应。3Received，接收到部分对应数据。4完成，所有响应数据已经收到，可以在客户端使用。readyState:ajax工作状态onreadystatechange:readyState改变时触发status:服务器状态，http状态码responseText:返回以文本形式存储的内容ajax请求返回的内容存储在该属性下注意事件监听最好写在事件之前它发生了（即.onload（.onreadystatechange）应该放在.send之前），以避免不听。ExtendedXMLHttpRequestCompatibility问题，简单理解，可以直接跳过newXMLHttpRequest()ie6及以下不支持，所以需要使用插件newActiveXObject('MSXML2.XMLHTTP')IE中有三种不同的XHR版本：MSXML2.XMLHTTP,MSXML2.XMLHTTP.3.0,MSXML2.XMLHTTP.6.0因为只是为了理解，所以这里使用最旧的版本来兼容如下：varxhr=null;if(window.XMLHttpRequest){//不可能的直接用XMLHttpRequest判断即可，因为IE6下不可用，window.XMLHttpRequest会返回undefinedxhr=newXMLHttpRequest();}else{xhr=newActiveXObject('MSXML2.XMLHTTP');}也可以用try解决抓住。try{xhr=newXMLHttpRequest();}catch(e){xhr=newActiveXObject('MSXML2.XMLHTTP');}表单提交表单标签action的一些属性：数据提交的地址，默认为当前页面方法:数据提交默认是get方法1.get用=连接数据名和数据值，如果不止一个，那么他会把多个数据组合用&连接起来，然后把数据放到url？2.post通过请求头请求enctype：提交的数据格式，默认application/x-www-form-urlencoded上传文件，无论是form还是ajax，上传必须通过post传输要求。如果后台返回的内容是中文编码格式，直接在页面输入即可转换成中文。formaction会跳转到页面ajaxvarajax=newXMLHttpRequest();ajax.open('post','post_file.php',true);//传输type设置为二进制格式ajax.setRequestHeader('Content-Type','multipart/form-data');//二进制传输在写入发送之前要用FormData转换varfromD=newFormData();//FormData构造函数//file中有一个append方法，有一个对象：files（详细信息列表）files[0]包含files的具体参数；fromD.append('file',f.files[0]);ajax.send(fromD)ajax上传方法需要注意以下几点：1.newFormData()2.Append(key,value)keytothisobject:按照后端的要求：files[0]ofthefileelement;3.send(thisobject)XMLHttpRequestLevel2FormData上面ajax上传文件中使用的FormData类型是在XMLHttpRequestLevel2中定义的。运输）。vardata=newFormData();data.append('name','cfangxu');append()方法接收两个参数：key和value，分别对应表单字段的名称和字段中包含的值。可以像上面的代码一样添加任意数量的值。FormData构造函数可以直接传入表单元素，表单元素的数据是预先填入键值对的。vardata=newFormData(document.forms[0]);FormData的另一个便利是使用它发送POST请求时无需在XHR对象上显式设置请求标头。XHR对象可以识别传入的数据类型是FormData的一个实例，并配置相应的头信息。overrideMimeType()方法覆盖XHR响应的MIME类型。例如，服务器返回的MIME类型是text/plain，但数据实际上包含XML。根据MIME类型，即使数据是XML，responseXML属性仍然为null。通过调用overrideMimeType()方法，您可以确保将响应作为XML而不是文本进行处理。varxhr=newXMLHttpRequest();xhr.open('get','text.php',true);xhr.overrideMimeType('text/xml');xhr.send(null);上面提到的load事件，使用load事件代替readystatechange，收到响应后会触发load事件，所以不需要检查readyState属性，但是只要浏览器收到服务器的响应，无论状态如何，加载事件都会被触发。所以需要检查status属性来判断数据是否真的可用。varxhr=newXMLHttpRequest();xhr.onload=function(){if(xhr.status>=200&&xhr.status<300){console.log(xhr.responseText);}else{console.log('请求不成功'+xhr.status)}}xhr.open('get','test.php',true);xhr.send(null);progressevent这个事件会被触发在浏览器接收新数据时定期。事件侦听器函数将接收一个事件对象，其目标属性是一个XHR对象，但包含三个附加属性：lengthComputable、position和totalSize。lengthComputable：是一个布尔值，指示进度信息是否可用。position：表示接收到的字节数。totalSize：表示根据Content-Length响应头确定的预期字节数。此信息可用于显示进度。varxhr=newXMLHttpRequest();xhr.onload=function(){if(xhr.status>=200&&xhr.status<300){console.log(xhr.responseText);}else{console.log('请求不成功'+xhr.status)}}xhr.onprogress=function(event){varshowEle=document.getElementById('status');如果（event.lengthComputable）{showEle.innerHTML='receiving'+event.position+'of'+event.totalSize+'byte';}}xhr.open('get','test.php',true);xhr.发送（空）；为保证正常执行，必须在调用open()方法前添加onprogress事件监听函数。XMLHttpRequest实例属性总结readyStateresponseTyperesponseTextresponseXML状态statusTextwithCredentialsXMLHttpRequest实例方法abort()abort方法用于终止发送的HTTP请求。getAllResponseHeaders()getResponseHeader()open()send()setRequestHeader()overrideMimeType()XMLHttpRequest实例事件readyStateChange事件progress事件load事件