文章目录
- 1. Ajax
- 1.1 无刷新的好处
- 1.2 传统Web与Ajax的差异
- 1.3 Ajax工作流程
- 1.4 XMLHttpRequest对象
1. Ajax
Ajax（Asynchronous JavaScript and XML）是一种无需刷新整个页面而能更新部分页面内容的技术。它通过在后台与服务器进行数据交换，实现局部刷新，提供了更流畅的用户体验。
1.1 无刷新的好处
- 只更新部分页面，有效利用带宽
- 提供连续的用户体验
- 提供类似客户端/服务器（C/S）交互效果
1.2 传统Web与Ajax的差异
1.3 Ajax工作流程
Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式Web应用程序的技术。它允许在不刷新整个页面的情况下更新部分页面内容，从而提供更流畅和响应性的用户体验。
Ajax的工作流程如下：
-
发送请求：当用户与Web应用程序进行交互时（例如点击按钮），JavaScript代码会发送一个
XMLHttpRequest对象（XHR）来发起HTTP请求。 -
服务器处理请求：服务器接收到请求后，会根据请求的内容进行处理，例如从数据库中获取数据，然后生成响应。
-
响应处理：服务器将生成的响应发送回客户端，这个响应通常是一个XML、JSON或HTML文档。
-
更新页面：客户端接收到响应后，JavaScript代码会解析响应并将其中的数据更新到页面的相应部分，而不需要刷新整个页面。
-
用户交互：用户可以继续与页面进行交互，例如点击按钮或输入文本框。
这个流程可以在后台进行多次，而在前台只刷新需要更新的区域，这样就实现了局部刷新，提高了用户体验。
需要注意的是，尽管Ajax中的"A"代表"异步"，但Ajax也可以用于同步请求，即页面需要等待服务器响应后才能继续处理。
1.4 XMLHttpRequest对象
XMLHttpRequest（XHR）是一种用于在浏览器中发送HTTP请求和接收服务器响应的API。它提供了一种在后台与服务器进行数据交换的方法，而无需刷新整个页面。
XMLHttpRequest最初是由微软开发并在Internet Explorer 5中引入的，之后被其他浏览器采纳和扩展，成为一个通用的浏览器API。
通过XMLHttpRequest，开发人员可以通过JavaScript发送各种类型的请求（如GET、POST、PUT、DELETE）到服务器，并处理服务器返回的响应。它支持异步请求，所以可以在后台发送请求而不会阻止用户与页面的交互。
使用XMLHttpRequest，开发人员可以创建一个XMLHttpRequest对象，并使用该对象的方法和属性来控制请求和处理响应。主要的方法包括open()，用于指定HTTP请求的方法和URL；send()，用于发送HTTP请求；以及abort()，用于取消已发送的请求。主要的属性包括readyState，用于表示请求的状态；status，用于表示服务器返回的HTTP状态码；以及responseText，用于获取服务器返回的响应内容。
XMLHttpRequest可以用于从服务器获取数据，也可以用于发送数据到服务器。它可以接收和发送各种格式的数据，如文本、JSON、XML、二进制等。因此，XMLHttpRequest被广泛用于前端开发中的数据交换，如AJAX请求、RESTful API调用等。
| 类别 | 描述 |
|---|---|
| 方法 | |
| open(String method, String url, boolean async, String user, String password ) | 初始化请求 |
| send( String data ) | 发送请求 |
| abort( ) | 取消当前请求 |
| setRequestHeader(String header, String value ) | 设置特定请求头信息 |
| getAllResponseHeaders() | 获取所有响应头信息 |
| getResponseHeader() | 获取特定响应头信息 |
| abort() | 取消当前请求 |
| 事件 | |
| onreadystatechange | 请求状态改变时触发事件 |
| 属性 | |
| readyState | 请求的状态 |
| status | 响应的状态码 |
| statusText | 响应状态的文本描述 |
| responseText | 响应的文本数据 |
| responseXML | 响应的 XML 数据 |
| timeout | 请求超时时间设置 |
