第1章前端开发与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技术后,服务器响应只是必须更新的数据,故客户端必须通过程序来动态加载服务器响应。