慕课网 Ajax笔记
Ajax技术实现:
- 运用HTML和CSS来实现页面,表达信息;
- 运用XMLHttpRequest和web服务器进行数据的异步交换;
- 运用JavaScript操作DOM,实现动态局部刷新;
- 同步:就是用户填写完信息之后,全部提交给服务器,等待服务器的回应,是一次性全部的。
- 异步:当用户填写完一条信息之后,这条信息会自动向服务器提交,然后服务器响应客户端,在此过程中,用户依然在填写表格的信息,即向服务器请求多次,节省了用户的时间,提高了用户的体验。
HTTP
- http是计算机通过网络进行通信的规则。
- http是一种无状态协议(无状态协议:客户端与服务器之间不建立持久的连接,服务端不保留连接的相关信息)。
http请求
1、一个完整的http请求过程,通常有下面7个步骤:
- 建立tcp连接。(tcp:计算机网络里的3次握手:客户端发送请求连接,服务端向客户端确认是否连接,客户端向服务端发送确认信息)
- web浏览器向web服务器发送请求命令。
- web浏览器发送请求头信息。
- web服务器应答。
- web服务器发送应答头信息。
- web服务器向浏览器发送数据。
- web服务器关闭tcp连接。
2、一个http请求一般由四部分组成:
- http请求的方法或动作,比如是get还是post请求。
- 正在请求的url,总得知道请求的地址是什么吧。
- 请求头,包含一些客户端环境信息,身份验证信息等。
- 请求体,也就是请求正文,请求正文中可包含客户提交的查询字符串信息,表单信息等。
get和post
get请求:
- 一般用于信息获取。
- 使用url传递参数。
- 对所发送信息的数量也有限制,一般在2000个字符。
- 一般不用get请求进行新建和修改操作。
- get方法发送的请求信息对所有人都是可见的,所有的变量名和值都显示在url中。get请求利用url来传递参数。
- 好处:url添加在书签中,之后就可以用。
- get请求是幂等的,一个get请求执行一次和执行10000次是一样的。比如对一个员工信息查询1次和10000次都是一样的,并不会改变员工信息。
post请求:
- 一般用于修改服务器上的资源。
- 对所发送信息的数量无限制。
http响应
一个http响应一般由3部分组成:
- 一个数字和文字组成的状态码,用来显示请求是成功还是失败。
- 响应头,响应头和请求头一样,包含许多有用的信息,例如服务器类型、时期时间、内容类型和长度等。
- 响应体,也就是响应正文。
http状态码
http状态码由3位数字构成,其中首位数字定义了状态码的类型。
- 1xx:信息类,表示收到web浏览器请求,正在进一步的处理中。
- 2xx:成功,表示用户请求正在被正确接收,理解和处理。例如:200 OK
- 3xx:重定向,表示请求没有成功,客户必须采取进一步的动作。
- 4xx:客户端错误,表示客户端提交的请求有错误,例如:404 not found,意味着请求中所引用的文档不存在。
- 5xx:服务器错误,表示服务器不能完成对请求的处理,如500
xhr发送请求
1、open方法:
(1)参数:
- method:发送请求方法,get方式还是post方式,不区分大小写,一般使用大写。
- url:请求地址,可以使用相对地址,也就是相对文档的地址,也可以使用绝对地址。
- async:请求同步/异步,一般使用异步请求,这个参数就是true,如要使用同步的话,就是false。默认的是true(异步),所以,如果是异步请求的话,这个参数可以不写。
2、send方法:
(1)send方法将请求发送到服务器上
(2)参数:string: ①使用get请求时,实际是没有主体的,所有的参数都拼在url中,所以send参数可以不填,或者填写null。 ②post请求时,send请求一定要有参数。
3、request.setRequestHeader()方法
(1)设置http的头信息,告诉web服务器要发送一个表单的话,设置Content-type为application/x-www-form-urlencoded。
(2)Content-type有2种,一般用application/x-www-form-urlencoded,一般如果不发送文件,都采用这种方式。
(3)request.setRequestHeader()要写在open()和send()中间,否则会抛出异常。
xhr取得响应
取得响应后,响应数据会自动填充XHR属性
- responseText:获得字符串形式的响应数据;
- responseXML:获得XML形式的响应数据;
- status和statusText:以数字和文本形式返回HTTP状态码;
- getAllResponseHeader():获取所有的响应报头;
- getResponseHeader():查询响应中某个字段的值
readyState属性检测请求/响应过程的当前活动阶段
- 0:open没调用。请求未初始化。
- 1:open已经调用。服务器连接已建立。
- 2:请求已接收,也就是接收到头信息了。
- 3:请求处理中,也就是接收到响应主体了。
- 4:请求已完成,且响应已就绪,也就是响应完成了。
客户端请求响应的过程:
//创建一个XHR对象; var request=new XMLHttpRequest();
//open; request.open("method","URL","aysn"); request.send();
//监听readyState; request.onreadystatechange=function(){
if(readyState==4&&status==200){
//做一些事情request.responseText;
}}
异步请求的过程
- 实例化一个XMLHttpRequest对象
- 调用open方法
- 调用send方法
- 对readystate进行监听