1.Ajax简述 全名:Asynchronous JavaScript and xml, 是指围绕“由js向服务器发起http请求”这个功能而开发的一整套完整的方法。 因此,引入jQuery封装好的Ajax会浪费很多资源,实际利用到的功能只是很少一部分, 而原生ajax则可以根据实际需求编写代码,减少内存耗用。 原生Ajax模块在处理网络请求时,包括以下四步骤: ⑴ 创建“xhr”对象 ⑵ 构建“xhr”属性和方法 ⑶ 通过“xhr”对象发出HTTP请求 ⑷ 通过“xhr”对象的方法接收服务器回传的数据 说明: Ajax可以发出同步请求,也可以发出异步请求。 但多数情况下指的是异步请求,因为同步的Ajax请求对浏览器会产生“阻塞效应”。 2.xhr对象 在Ajax中对整个请求从创建到发送,有着一整套严格的流程标准。 需要至少以下几个步骤: ⑴ 通过 XMLHttpRequest 类创建 xhr 对象; ⑵ 为 xhr 对象添加属性和回调方法; ⑶ xhr 对象执行 open() 方法,设置请求发送的目标url地址; ⑷ xhr 对象执行 send() 方法,发出请求。 语法:var xhr = new XMLHttpRequest(); 说明: XMLHttpRequest 对象用于在“浏览器”与“服务器”之间传送数据。 3.xhr对象常用属性和方法 ⑴ onreadystatechange 属性 该属性指向一个回调函数,当页面加载状态发生改变时,readyState属性值就会随即发生变化, 此时,readystatechange属性所对应的回调函数就会自动被调用。 语法:xhr.onreadystatechange = function(){} ⑵ readyState 属性 该属性为只读属性,用一个整数和对应的常量来表示XMLHttpRequest请求当前所处的状态。 一般只会用在 onreadystatechange 事件的回调函数中, 通过判断 readyState属性的值,进而执行不同状态对应的函数。 语法:xhr.onreadystatechange = function(){ if(xhr.readystate==n){ //执行相应的函数 } } readyState属性值说明: 0 值,对应常量“UNSENT”, 表示XMLHttpRequest实例已经生成,但是 open() 方法还没有被调用; 1 值,对应常量“OPEND”, 表示 send() 方法还没被调用,仍可以使用 setRequestHeader() 设定HTTP请求头; 2 值,对应常量“HEADERS_RECEIVED” 表示 send() 方法已经执行,并且头信息和状态码已经收到; 3 值,对应常量“LOADING”, 表示正在接收服务器传来的body部分的数据,如果 responseType的属性 是 text 或者 空字符串,responseText 就会包含已经收到的部分信息; 4 值,对应常量“DONE”, 表示服务器数据已经完全接收,或者本次接收已经失败了。 ⑶ status 属性 表示本次请求所得到的的HTTP状态码,是一个整数。 语法:if(xhr.readyState==4){ if(xhr.status==200){ //请求通信成功 } } 说明: 该属性为只读属性; 该属性有以下几种可能值: 200,OK,访问正常; //一般情况下作为通信成功的标志。 301,Moved Permanently,永久移动; 302,Move Temporarily,暂时移动; 304,Not Modified,未修改; 307,Temporary Redirect,暂时重定向; 401,Unauthorized,未授权; 403,Forbidden,禁止访问; 404,Not Found,未发现指定网址; 500,Internal Server Error,服务器发生错误。 ⑷ statusText 属性 表示服务器发送的状态提示,是一个只读字符串。 语法:xhr.shtatusText; 说明:该属性不同于 status,属性值为返回状态码所对应的状态信息,如“OK”。 ⑸ responseText 属性 用于获取从服务器接收到的 字符串 内容,该属性为只读。 如果本次请求没有成功或者数据不完整,则属性值等于 null; 如果服务器返回的数据格式是 JSON,则可以使用 responseText属性进行数据解析。 语法:xhr.responseText; 说明: 后台返回数据时,使用 echo json_encode();进行编码; 前台接收数据时,直接接收到的返回结果为字符串,使用 JSON.parse();进行解析。 ⑹ open() 方法 表示要将请求发往目标地址,但只是设置而不是发送。 语法:xhr.open('请求类型','目标url地址',是否异步); 说明: 第一个参数“请求类型”用于设置 get 或 post 请求; 第二个参数“url地址”用于设置请求要发送到的地址链接; 第三个参数为布尔值,用于设置是否异步发送,默认false表示同步发送 ⑺ setRequestHeader() 方法 用于设置HTTP头信息。 HTTP协议要求客户端在向服务器发送请求时,必须发送HTTP协议的头文件。 在HTTP协议头信息中设置要获取数据的相关信息及参数。 setRequestHeader()方法则是XMLHTTP为添加或修改http头信息提供的一个接口方法。 语法:xhr.setRequestHeader('header','value'); 参数header,规定头信息的名称;参数value,规定头的值。 说明: 本方法必须在 open() 之后、send() 之前被调用; 该方法用于设置在请求发送时,一并被发出的一些辅助信息; 需要设置或修改系统默认头信息是使用此方法。 如:xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 使用POST方法提交时,value参数为Content-Type默认编码类型(url编码)。 xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('Content-Length', JSON.stringify(data).length); ⑻ send() 方法 用于实际发出HTTP请求。 语法:xhr.send(formData); 说明: send() 方法的参数是表单数据,为post请求准备; 如果请求类型是 get请求,则参数直接写 null 即可。 4.Ajax请求代码示例 <script> var uName = document.querySelector('.userName').value; var uCode = document.querySelector('.userCode').value; var xhr=new XMLHttpRequest(); //创建对象,准备发送Ajax请求 xhr.onreadystatechange=function () { //监听后台接收请求状态的变化 if (xhr.readyState==4){ //判断当前请求进行到何种状态,属性值 4 表示后台已经接收到前台请求 if (xhr.status==200){ //判断前台是否准确接收到后台反馈的数据,属性值 200 表示通信成功 console.log(xhr.responseText); //获取后台反馈的完整数据,json串 console.log(typeof xhr.responseText); //返回结果为 string 类型 console.log(JSON.parse(xhr.responseText)); //将返回结果转换为对象 } } } xhr.open('get','xhr.php?name=uName&code=uCode',true); xhr.send(null); </script>
|
|