慕课网 Ajax笔记

Posted 2020-09-21

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进行监听