持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第7天,点击查看活动详情
Ajax 的运行环境: 需要在网站环境中才能生效
运行原理: Ajax 相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验
xhr.readyState 状态码 0 1 2 3 4
xhr.onreadystatechange 事件监听状态码的值, 写在 res,send()之前
xhr.getResponseHeader('Content-Type')获取响应头中的数据
ajax 状态码: ajax 请求的过程状态, ajax 对象返回的
http 状态码: 请求的处理结果,是服务器端返回的
####服务端响应的数据格式
服务器端在大多数情况下会以 json 对象作为响应数据的格式,当客户端拿到响应数据时,要将 JSON 数据和 HTML 字符串进行拼接,然后将拼接的结果显示在页面中
在 http 请求与响应的过程中,无论是请求参数和响应内容,如果是对象类型,最终都会被转换为对象字符串进行传输
formData 将普通的 html 表单转换为表单对象
var formData = new formData(form);
formData.get('key');获取表单对象属性的值
formData.set('key','value');设置表单对象中属性的值
formData.delete('key);删除表单中属性的值
formData.append(); 向表单对象中追加属性值
解析客户端传递过来的 formData 对象 formidable
cont form = new formidable.IconmingForm();
form.parse(req, (err,fields,files)=> {})
FormData 文件上传
xhr.upload.onprogress = function (ev) {
}
同源 协议域名端口
目的:为了保证用户信息的安全,防止恶意的网站窃取数据
.crows
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'get,post');
withCredentials 属性
在使用 Ajax 技术发送跨域请求时,默认情况下不会在请求中携带 cookie 信息
widthCredentials:指定在涉及到跨域请求时,是否携带 cookie 信息,默认值为 false
当发送跨域请求时,携带 cookie 信息
xhr.withCredentials = true;
允许客户端发送请求时携带 cookie 信息
res.header('Access-Control-Allow-Credentials', true);
$.ajax
发送 jsonp 请求 dataType: 'jsonp'
告诉$.ajax 方法不要解析请求参数 processData: fale,
不要设置请求参数的类型 contentType: false
Ajax 全局事件
.ajaxStart() 请求开始时触发
.ajaxComplete() 请求完成时开始触发