揭秘Ajax面试关键点：原理、步骤与跨域解决

**Ajax基础知识与实践** Ajax（Asynchronous JavaScript and XML）是一种前端开发技术，它允许在不重新加载整个页面的情况下，向服务器发送异步请求并更新部分网页内容。其核心作用在于实现网页的非阻塞交互，提供更快的用户体验。 **1. AJAX概念与作用** - AJAX的主要作用是增强Web应用的交互性，通过在后台与服务器交换数据，实现在用户与服务器之间进行低延迟、局部刷新的通信，提高了数据的实时性和页面性能。 **2. 原生JavaScript AJAX请求步骤** - **创建XMLHttpRequest对象**: 使用`new XMLHttpRequest()`实例化一个请求对象。 - **配置请求**: `ajax.open(method, url, async)`，方法如GET或POST，URL为目标地址，async为布尔值表示是否异步。 - **设置请求头**: 如`ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded")`指定数据类型。 - **发送请求**: `ajax.send()`，传递数据（GET时通常无参数）。 - **处理响应**: 通过监听`ajax.onreadystatechange`事件，当readyState达到4且status为200或304（成功或重定向）时，处理服务器响应。 **3. JSON操作** - **字符串转JSON对象**: 使用`JSON.parse(json)`将JSON字符串解析为JavaScript对象。 - **JSON对象转字符串**: `JSON.stringify(json)`将JavaScript对象转换为JSON格式的字符串。 **4. AJAX请求方式及其优缺点** - **常用请求方式**: GET和POST。GET用于获取数据，参数通过URL传递，适合数据量较小；POST用于提交数据，数据在请求体中，更安全但速度略慢。 - **其他请求方式**: 较少使用，如DELETE用于删除资源，COPY和HEAD用于预检操作等。 - **跨域问题**: 当页面从一个域名请求资源时，如果该资源位于不同的域名下，即存在跨域问题，因为浏览器的同源策略限制了跨域访问。 **5. 跨域问题与解决方案** - **跨域原因**: 主要由于浏览器的安全策略（同源策略），防止恶意网站窃取用户数据。 - **解决方案**: - JSONP（JSON with Padding）：适用于GET请求，利用动态创建script标签绕过同源策略，但不能处理复杂请求。 - CORS（Cross-Origin Resource Sharing）：服务器设置CORS头允许特定来源跨域，适用于所有HTTP方法。 - 代理：后端服务器作为中介转发请求，绕过浏览器的同源限制。 - Nginx反向代理：对于静态资源可以配置Nginx进行跨域处理。 **6. HTTP常见状态码** - HTTP状态码分为成功、重定向、客户端错误和服务器错误四类： - 2xx（成功）：如200 OK（请求成功）、201 Created（创建成功） - 3xx（重定向）：如301 Moved Permanently（永久重定向）、304 Not Modified（未修改） - 4xx（客户端错误）：如400 Bad Request（请求错误）、404 Not Found（未找到） - 5xx（服务器错误）：如500 Internal Server Error（服务器内部错误） 总结来说，Ajax是现代Web开发中的关键工具，通过理解其原理、请求流程、JSON处理和跨域问题，开发者可以更好地构建高效、交互性强的Web应用。