整理Ajax的点点滴滴
最近看了下《Javascript高级程序设计》(第三版)关于Ajax部分,做了这篇笔记。
一、常规用法
第一步,创建XHR对象
var xhr = new XMLHttpRequest();
此方法兼容IE7+, 针对IE6需要使用new ActiveXObject("Microsoft.XMLHTTP");
第二步,准备请求
xhr.open("get","/testajax",false);
参数分别为: 请求类型 、url、是否异步
第三步,发送请求
get请求的话就是xhr.send(null)
send需要一个参数,因为get请求中参数会在url中,所以这里写null(之所以写null是因为不写的话在某些浏览器会有问题)。
如果是post请求,那么这里面就写post请求需要的参数。
但是首先需要设置content-type,例如:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
然后发送数据xhr.send("fname=Bill&lname=Gates");
第四步,请求发出去后,服务器响应的内容会自动填充到xhr对象的属性上
有这些属性
responseText 返回的文本
responseXML 如果content-type为"text/xml'或者"application/xml"就把数据放这个属性
status HTTP状态码
statusText 状态说明
第五步、根据status检查请求状态
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText )
}else{}
无论类型是什么,响应主题内容都会保存在responseText属性中。
对于非xml格式数据而言,responseXML为null。
第六步,如果是异步请求,那么需要监听readyState来判断请求的状态
通过onreadystatuschange事件判断readyState的值
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
console.log("success")
}
};
其他注意点:
setRequestHeader用来设置头信息
getResponseHeader得到响应头信息
getAllResponseHeaders得到全部响应头信息
get请求中,对参数使用encodeURIComponent方法
post请求中,设置content-type,参数序列化传入,格式和get请求一样
如果不设置content-type,那么后台就必须从raw request header中去得到参数
二、xhr2中的功能
1: FormData()序列化表单数据
var data = new FormData();
data.append("hello","world");
xhr.send(data);
或者
xhr.send(document.forms[0])
这样可以快速传入post参数,而且无需设置content-type。
2: timeout超时
xhr.timeout = 1000; //设置超时时间
xhr.ontimeout = function(){}; //处理超时情况
xhr.send(null);
3:overrideMimeType
重写MIME,MIME决定了你的responseXML或者responseText的值是否存在
MIME由content-type设置
4:进度事件,用来监视xhr的进度。
提供了一系列的事件,可以做类似网页加载进度条的效果。
三、跨域
CORS实现ajax的跨域访问
1: 标准的实现:
首先,先发送一个跨域ajax请求(这里可以检测是否支持CORS,通过新建一个xhr对象,检测xhr2中的属性是否存在在这个对象来实现)。
然后,普通情况下,我们肯定会发现控制台报错,类似无法访问跨域资源这种错误。
这时需要服务器设置
Access-Control-Allow-Origin:* 代表所有域名都可以访问到
Access-Control-Allow-Origin: http://www.cnblogs.com 限定了域名
请求和响应均不包含cookie信息
2: IE的实现:
通过XDomainRequest()来实现。
直接改变contenttype属性来实现post请求
xdr.contentType= "";
不能发送同步请求
3: 自定义头部:
在CORS中是不支持的,但是有固定接口可以设置的头部来传输信息。
4: 带凭证的请求(cookie、ssl等):
客服端通过withCredentials设置为true来实现
服务器返回相应的头部来确认即可。
四、其他跨域技术
1: 动态创建一个图片,src跨域,然后可以返回一个像素图或者204;
返回后的处理在onload和onerror里面
可以用于一些数据统计方面。
2: JSONP
五、服务器推送
1、轮询
2、长轮询
3、HTTP流
4、SSE
5、Web Sockets
先发一个http请求过去,服务器相应后会把http协议变为web socket协议
链接变为 ws://
var socket = new WebSocket("ws://xxx.com")
没有同源限制
通过 socket.readyState 来判断链接状态
socket.close()关闭
数据交互
socket.send("xxx");发送消息
消息内容只能是纯文本,所以对于复杂的数据需要序列化
socket.onmessage = function(event){
var data = event.data; //这里是服务器返回的数据
}
整理Ajax的点点滴滴的更多相关文章
- [整理]Ajax Post请求下的Form Data和Request Payload
Ajax Post请求下的Form Data和Request Payload 通常情况下,我们通过Post提交表单,以键值对的形式存储在请求体中.此时的reqeuest headers会有Conten ...
- 前端面试题整理—ajax篇
1.什么是Ajax和JSON,它们的优缺点 Ajax是全称是asynchronous JavaScript andXML,即异步JavaScript和xml,用于在Web页面中实现异步数据交互,实现页 ...
- 记录AJAX充电点点滴滴
首先要明白什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更 ...
- 框架基础:ajax设计方案(一)---集成核心请求
报告,我要说话!xp被历史淘汰了,IE6 say goodbye了,太TM开心了,从此不要兼容IE6了,哈哈哈哈哈哈 报告,我要说话!IE这sb为啥不早点被杀掉呢,找工作听说要兼容IE,立马软了,唉唉 ...
- 前端通信:ajax设计方案(一)---集成核心请求
报告,我要说话!xp被历史淘汰了,IE6 say goodbye了,太TM开心了,从此不要兼容IE6了,哈哈哈哈哈哈 报告,我要说话!IE这sb为啥不早点被杀掉呢,找工作听说要兼容IE,立马软了,唉唉 ...
- Django web 基础
一.Django概述 Django大而全; 创建Django工程:django-admin startproject sitename 创建django之后生成的目录结构如下: Project Pro ...
- 经典技术之URL
SpringBoot入门 (十) 发送邮件 图表算法—最短路径 三个好用的并发工具类 跨应用Session共享: https://www.cnblogs.com/websharing/p/849586 ...
- Backbone Model 源码简谈 (版本:1.1.0 基础部分完毕)
Model工厂 作为model的主要函数,其实只有12行,特别的简练 var Model = Backbone.Model = function(attributes, options) { va ...
- Ajax学习整理
什么是ajax?W3School中给ajax的定义是: 1.AJAX = 异步 JavaScript 和 XML. 2.AJAX 是一种用于创建快速动态网页的技术. 3.通过在后台与服务器进行少量数据 ...
随机推荐
- H5实现摇一摇技术总结
摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...
- webapi - 使用依赖注入
本篇将要和大家分享的是webapi中如何使用依赖注入,依赖注入这个东西在接口中常用,实际工作中也用的比较频繁,因此这里分享两种在api中依赖注入的方式Ninject和Unity:由于快过年这段时间打算 ...
- Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
- Android权限管理之RxPermission解决Android 6.0 适配问题
前言: 上篇重点学习了Android 6.0的运行时权限,今天还是围绕着Android 6.0权限适配来总结学习,这里主要介绍一下我们公司解决Android 6.0权限适配的方案:RxJava+RxP ...
- shiro权限管理框架与springmvc整合
shiro是apache下的一个项目,和spring security类似,用于用户权限的管理‘ 但从易用性和学习成本上考虑,shiro更具优势,同时shiro支持和很多接口集成 用户及权限管理是众多 ...
- angular2系列教程(八)In-memory web api、HTTP服务、依赖注入、Observable
大家好,今天我们要讲是angular2的http功能模块,这个功能模块的代码不在angular2里面,需要我们另外引入: index.html <script src="lib/htt ...
- ie6 ie7 ie8 ie9兼容问题终极解决方案
放下包袱,解决低版本兼容问题 这是一个老生常谈的问题,自然解决这个问题的方案也比较多,下面整理了一些解决方法: 1.强制使用高版本渲染模式. 强制使用Edge模式来解析网页代码 <meta ...
- listview下拉刷新和上拉加载更多的多种实现方案
listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明. 方案一:添加头布局和脚布局 android系统为listview提供了addfootview ...
- Linux网卡驱动安装、防火墙原理
安装网卡驱动程序: 需要检查是否安装kernel依赖包: rpm –q kernel-devel #检查kernel依赖包是否安装 yum –y install kernel-devel 检查gcc和 ...
- cmd窗口编码设置
问题描述:不知道误操作了什么,导致cmd窗口的鼠标显示位置出现错位,如下: 现在要将鼠标位置调整回来. 使用工具:cmd. 操作步骤: 1.查看cmd属性可以看到 可以看到是UTF-8编码格式的,我们 ...