javascript 中 Ajax 基础知识点有哪些

Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。基础知识点包括：创建XMLHttpRequest对象、发送请求、处理响应数据、异步与同步请求、请求方法GET和POST、状态码、请求头与响应头、跨域请求。在这些知识点中，创建XMLHttpRequest对象是发起Ajax请求的第一步，可以通过new XMLHttpRequest()构建请求对象，并且这个对象提供了各种方法和属性来支持在客户端与服务器之间进行数据交换。

一、创建XMLHttpRequest对象

在使用Ajax时，你首先需要创建一个XMLHttpRequest对象。这个对象是Ajax交互的核心，它提供了在JavaScript中发起HTTP请求的能力。这可以通过new XMLHttpRequest()实现。为了兼容旧版本的Internet Explorer，创建对象时通常还会检查window.ActiveXObject是否存在。

二、发送请求

一旦XMLHttpRequest对象被创建，就可以使用它的open方法来初始化一个请求，然后使用send方法实际发送请求。open方法接受几个参数，其中最重要的是请求的类型（如"GET"或"POST"）、请求的URL以及指明请求是否异步的布尔值。send方法可以带有请求的数据作为参数，对于"GET"请求通常为null。

三、处理响应数据

一旦请求被发送，服务器处理结束后，客户端可以通过定义一个事件监听器来处理响应。通常，这是通过监听XMLHttpRequest对象的onreadystatechange事件来实现的。当请求的readyState属性变化时，这个事件会被触发。当readyState为4，表示请求已完成，此时可以通过responseText或responseXML属性访问服务器响应的数据。

四、异步与同步请求

Ajax请求有两种模式：异步和同步。异步请求是不中断页面其他操作的情况下发送请求，这是Ajax的常见用法，也是其名称的一部分。“异步”的意思是脚本会在发送请求后继续执行，而不是等待服务器响应。通过open方法的第三个参数设置。同步请求相反，直到服务器相应后代码才会继续执行，但它会阻塞页面。

五、请求方法GET和POST

两种常见的HTTP请求方法是GET和POST。GET通常用于请求数据，而POST通常用于向服务器提交数据。GET请求将请求参数附加在URL上，而POST请求则将数据作为send方法的参数传递。每种方法在使用时都有其特点和最佳实践。

六、状态码

响应的状态码提供了关于请求是否成功以及如何失败的信息。状态码200表示成功，404表示未找到资源，500系列表示服务器错误等。状态码可以通过XMLHttpRequest对象的status属性获得。

七、请求头与响应头

可以通过XMLHttpRequest对象的setRequestHeader方法设置自定义的HTTP请求头。这对于发送特定类型的数据，比如JSON或XML，或者在使用POST方法时提供内容类型，都是很有帮助的。响应头可以通过getResponseHeader方法或getAllResponseHeaders方法访问，携带了服务器响应的额外信息。

八、跨域请求

由于浏览器的同源政策，默认情况下，Ajax请求只能发送到与请求的页面同源的服务器。跨域资源共享（CORS）允许跨源访问资源，通过在服务器端设置适当的HTTP头，可以使得跨域Ajax请求成为可能。另外，还有一些规避跨域问题的技术，比如JSONP或服务器端代理。

这些是使用Ajax时需要了解的基础知识点。遵循这些原则能帮助您构建更为快速、可靠的Web应用程序。

相关问答FAQs：

1. JavaScript 中如何使用 Ajax 发起异步请求？

• 可以使用 XMLHttpRequest 对象来创建一个 Ajax 请求。
• 使用该对象的 open() 方法设置请求的方法（GET 或 POST）、URL 和是否异步。
• 然后使用 send() 方法发送请求，可以选择是否发送请求体。

2. JavaScript 中如何处理 Ajax 的响应结果？

• 可以注册 XMLHttpRequest 对象的 onreadystatechange 事件来监听请求的状态变化。
• 当请求的 readyState 属性变为 4 时，表示请求已完成，可以获取到响应数据。
• 使用该对象的 status 属性可以判断请求的结果是否成功（通常 200 是成功的状态码）。
• 可以使用 responseText 或 responseXML 属性获取服务器返回的数据，并对数据进行处理。

3. JavaScript 中如何处理 Ajax 请求中的错误？

• 可以给 XMLHttpRequest 对象注册 onerror 事件来捕捉到请求的错误。
• 当请求失败时，该事件会被触发，我们可以在事件处理函数中处理错误情况。
• 可以使用 status 属性来检查请求的状态码是否为非 200，从而判断请求是否成功。
• 可以使用 statusText 属性来获取请求失败时的错误信息。