- 同步
- 异步
- Ajax应用的工作过程
- JavaScript 使用Ajax过程
- 使用XMLHttpRequest对象发送请求步骤
- 传统Web应用发送请求形式
- 获取服务器响应生成的文本
- 获取服务器响应的状态码
- 传统Web编程和Ajax编程的区别
同步
每次用户发送请求,向服务器请求获得新数据时,浏览器都会完全丢弃当前页面,而等待重新加载新的页面。而在服务器完全响应之前,用户浏览器将一片空白,用户的动作必须中断。
异步
异步是指用户发送请求后,无须等待,请求在后台发送,不会阻塞用户当前活动。用户无须等待第一次请求得到完全响应,即可发送第二次请求。
Ajax应用的工作过程
JavaScript
脚本使用XMLHttpRequest
对象向服务器发送请求。发送请求时,既可以发送GET
请求,也可以发送POST
请求。JavaScript
脚本使用XMLHttpRequest
对象解析服务器响应数据。JavaScript
脚本通过DOM
动态更新HTML
页面。也可以为服务器响应数据增加CSS
样式表,在当前网页的某个部分加以显示。
JavaScript 使用Ajax过程
JavaScript
主要完成Ajax
如下事情:
- 1.创建
XMLHttpRequest
对象。 - 2.通过
XMLHttpRequest
对象向服务器发送请求。 - 3.创建回调函数,监视服务器响应状态,在服务器响应完成后,回调函数将会被调用。
- 4.回调函数通过
DOM
动态更新HTML
页面。
使用XMLHttpRequest对象发送请求步骤
一般而言,使用XMLHttpRequest
对象发送请求应按如下步骤进行:
- 1.使用
open()
方法连接服务器URL
。 - 2.调用
setRequestHeader()
方法为请求设置合适的请求头。根据不同的请求,可能需要设置不同的请求头。 - 3.为
load
事件注册事件处理函数。当服务器响应返回时,load
事件处理函数将会被触发。 - 4.调用
send
()方法发送请求。
传统Web应用发送请求形式
- 在浏览器的地址栏中输入请求地址后按回车键发送
GET
请求。 - 提交表单发送
POST
或GET
请求,具体发送何种请求取决于表单元素的method
属性。
获取服务器响应生成的文本
XMLHttpRequest
对象包含一个属性responseText
,该属性可获取服务器响应被生成的文本
获取服务器响应的状态码
XMLHttpRequest
对象提供了status
属性,该属性是服务器响应对应的状态码,其中200
表明响应正常,而404表明资源丢失,500表明内部错误等
传统Web编程和Ajax编程的区别
1.客户端发送请求的方式不同
传统Web
应用发送请求通常有两种方式:采用提交表单的方式发送GET
请求或POST
请求;让浏览器直接请求网络资源发送GET
请求。在采用Ajax
的现代Web
应用中,应用需要使用XMLHttpRequest
对象来发送请求。
2.服务器生成的响应不同
在传统Web
应用中,服务器的响应总是完整的HTML
页面。在采用Ajax
技术之后,服务器响应不再是完整的HTML
页面,而只是必须更新的数据,因此服务器生成的响应可能只是简单的文本(当然也可以是JSON
格式或XML
格式的文本)。
3.客户端加载响应的方式不同
传统Web
应用具有每个请求对应一个页面的特点,而且服务器响应就是一个完整的HTML
页面,所以浏览器可以自动加载并显示服务器响应。在采用Ajax
技术后,服务器响应只是必须更新的数据,故客户端必须通过程序来动态加载服务器响应。
原文链接: 第1章前端开发与Ajax