6.Ajax的操作
环境搭建
进行ajax的请求前先用express
框架搭建一个本地的服务器服务
-
首先进行
npm
换源npm install -g cnpm --registry=https://registry.npm.taobao.org # 以后直接cnpm下载
-
安装express和path模块
-
搭建服务器
// 引入express框架 const express = require('express'); // 路径处理模块 const path = require('path') // 创建web服务 const app = express(); // 静态资源访问服务功能 app.use(express.static(path.join(__dirname, 'public'))); // 监听端口 app.listen(3000); // 控制台提示输出 console.log('服务器成功')
目录结构
ajax的四步
-
创建XMLHttpRequest对象,也就是Ajax对象(IE6不兼容),用来发送http请求
let xhr = new XMLHttpRequest()
-
发送请求之前对Ajax对象进行一些配置
xhr.open([Http Method], [Url], [Async], [User-Name], [User-Pass]); /* * 1. Http Method:请求方式(一共8个) * -GET/DELETE/HEAD/OPTTONS/TRACE/CONNECT * -POST/PUT * 2. Url:向服务器发送请求的API接口地址 * 3. Async:设置Ajax的请求,默认为异步,true为异步,false为同步(项目都是异步) * 4/5. User-Name/User-Pass:用户名密码,一般不用 */
-
事件监听:一般监听的都是Ready-State-Change事件(Ajax状态发生改变),基于这个时间可以获取服务器返回的Response
xhr.onreadystatechange=() => { if(xhr.readyState == 4) { if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) { alert(xhr.responseText); } else { alert('xhr is unsuccessful' + xhr.status) } } } // 更多的操作 xhr.onreadystatechange=() => { if(!/^(2|3)\d{2}&/.test(xhr.status)) return; // => 如果不是2 3开头的状态码,证明信息获取失败,直接返回空 if(xhr.readyState == 2) { let time = xhr.getResponseHeader('date'); console.log(new Date(time));// => 把time字符串转换成Date对象,并且会自动转换成北京时间 } if(xhr.readyState == 4) { if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) { alert(xhr.responseText); } else { alert('xhr is unsuccessful' + xhr.status) } } }
-
发送Ajax请求:从这开始,Ajax开始执行
xhr.send([请求主体内容]) // get请求可以传null,post请求传递json数据或url参数格式的数据
Ajax对象状态码
0 => UNSENT(unset),刚创建Ajax对象
1 => OPENED(opend),执行.open操作,已经配置好Ajax对象
2 => LOADING(loading),执行.send操作后,开始ajax请求,服务器把响应头返回之后,客户端接收,状态码才变成2(服务器的响应头信息被客户端接收,包括服务器信息,http状态码)
3 => HEADERS_RECEIVED(headers_receive),响应主体内容正在被返回
4 => DONE(done),响应主体已经被客户端接收
XHR的属性方法
属性
-
xhr.response 响应主体内容
-
xhr.responseType 相应主题内容的数据格式(客户端完成)
-
xhr.responseText 响应主体的内容是字符串
-
xhr.responseXML 响应主体的内容是XML文档
-
xhr.status 返回是的HTTP状态码
-
xhr.statusText 返回是的HTTP状态码的描述
-
xhr.timeout 设置请求超时时间
// 设置超时时间,当请求时间超过这个时间则自动中断ajax请求 xhr.timeout = 100 // 单位为毫秒 // ontimeout是一个监听函数,能够在timeout的时候触发 xhr.ontimeout = () => { alert('超时了') };
-
xhr.withCredentials 是否允许跨域(Flase)
方法
-
xhr.abort()
设置强制中断Ajax请求// 立即中断Ajax请求 xhr.abort() // onabort是一个监听函数,能够在Ajax被abort函数中断的时候触发 xhr.onabort = () => { alert('Ajax被中断了') };
-
xhr.getAllResponseHeaders()
获取所有响应头信息 -
xhr.getResponseHeader([key])
获取key对应的响应头信息// 获取响应头中服务器的信息 xhr.getResponseHeader('date')
-
xhr.setRequestHeader()
设置请求头xhr.setRequestHeader('myheaders', 'nameagesex') // 这一步必须写在open也就是配置ajax后面
W3C 的 cors 标准对于跨域请求也做了限制,规定对于跨域请求,客户端允许获取的response header字段只限于“
simple response header
”和“Access-Control-Expose-Headers
-
xhr.open()
打开URL请求,进行配置xhr的起始工作 -
xhr.send()
发送Ajax请求 -
xhr.overrideMimeType()
重写MIME类型