Ajax（异步刷新技术）与jQuery（待完善）

文章目录

- [1. Ajax](#1. Ajax)
- - [1.1 无刷新的好处](#1.1 无刷新的好处)
  - [1.2 传统Web与Ajax的差异](#1.2 传统Web与Ajax的差异)
  - [1.3 Ajax工作流程](#1.3 Ajax工作流程)
  - [1.4 XMLHttpRequest对象](#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	请求超时时间设置