JavaScript AJAX

于 2024-02-28 23:58:53 发布
阅读量808 收藏 22
点赞数 26
文章标签： javascript ajax okhttp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao1234oaix/article/details/136359257
版权

AJAX的基本概念和用法

JavaScript AJAX是一种重要的Web开发技术，它可以实现异步数据交互和页面更新，使得网页交互更加流畅和快速。本文将详细介绍JavaScript AJAX的基本概念和用法，旨在帮助初学者深入理解和掌握该技术。

一、AJAX概述

AJAX是Asynchronous JavaScript and XML的缩写，即异步JavaScript和XML。它是一种在不重新加载整个页面的情况下，通过JavaScript和服务器进行数据交互和页面更新的技术。AJAX技术可以使得网页交互更加流畅和快速，同时也可以减少网络流量和服务器资源的占用。

在AJAX技术中，当用户执行某个操作时，例如点击按钮或输入数据，JavaScript代码会通过XMLHttpRequest对象向服务器发送异步请求，并接收服务器返回的数据。在接收到数据后，JavaScript代码可以对页面进行动态更新，例如更新部分页面内容、添加新的内容、或者执行特定的操作等。

二、XMLHttpRequest对象

XMLHttpRequest对象是AJAX技术的核心，它是一个内置对象，可以在JavaScript中使用。该对象可以通过JavaScript向服务器发送HTTP请求，并接收服务器返回的数据。以下是XMLHttpRequest对象的基本用法：

  1. 创建XMLHttpRequest对象

在JavaScript中，可以使用以下代码创建一个XMLHttpRequest对象：

let xhr = new XMLHttpRequest();
  1. 发送HTTP请求

使用XMLHttpRequest对象发送HTTP请求的基本步骤如下：

a. 调用open()方法，指定请求的方法、URL和是否使用异步方式。例如，以下代码指定了一个GET方法的请求，请求URL为"/api/data"，并使用异步方式发送请求：

xhr.open("GET", "/api/data", true);

b. 添加请求头。可以使用setRequestHeader()方法添加请求头，例如：

xhr.setRequestHeader("Content-Type", "application/json");

c. 发送请求。使用send()方法发送HTTP请求，例如：

xhr.send();
  1. 处理服务器响应

当服务器响应XMLHttpRequest对象的请求时，可以通过以下属性和方法来获取响应数据：

a. responseText：响应的文本数据。

b. responseXML：响应的XML数据。

c. status：响应的状态码。

d. statusText：响应状态码对应的文本信息。

e. getAllResponseHeaders()：获取所有响应头。

f. getResponseHeader(header)：获取指定响应头。

在接收到响应后，我们可以通过回调函数来处理响应数据。例如，以下代码定义了一个回调函数，当XMLHttpRequest对象接收到响应时，会调用该函数：

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log("请求失败：" + xhr.statusText);
  }
};

三、AJAX应用场景

AJAX技术在Web开发中有着广泛的应用场景，以下是一些常见的应用场景：

  1. 动态更新页面内容。通过AJAX技术，可以异步获取服务器数据并动态更新页面内容，从而实现无需刷新页面的动态效果。

  2. 表单数据验证。通过AJAX技术，可以异步发送表单数据到服务器进行验证，从而提高用户体验和数据安全性。

  3. 搜索框自动提示。通过AJAX技术，可以异步获取服务器数据并实现搜索框的自动提示功能，提高用户体验。

  4. 购物车实时更新。通过AJAX技术，可以异步获取服务器购物车数据并实时更新购物车页面内容，提高用户体验。

  5. 实时聊天。通过AJAX技术，可以异步发送和接收聊天数据，实现实时聊天功能。

四、AJAX的优缺点

AJAX技术具有以下优点：

  1. 提高用户体验。通过AJAX技术可以实现无需刷新页面的动态效果，提高了用户体验和页面响应速度。

  2. 减少网络流量。通过AJAX技术，可以异步获取服务器数据并更新页面内容，从而减少了不必要的网络流量和服务器资源占用。

  3. 提高数据安全性。通过AJAX技术，可以异步发送表单数据到服务器进行验证，从而提高了数据安全性。

但是AJAX技术也有一些缺点：

  1. 对搜索引擎不友好。由于AJAX技术异步更新页面内容，搜索引擎难以获取到页面的完整信息，从而影响了搜索引擎的优化效果。

  2. 对于低版本浏览器兼容性差。在一些低版本的浏览器中，XMLHttpRequest对象的实现可能存在兼容性问题，需要对不同浏览器进行兼容处理。

  3. 增加了前端开发的复杂度。使用AJAX技术需要对前端开发进行一定的复杂度，在处理异步请求和响应时需要注意多线程、并发等问题。

五、总结

JavaScript AJAX是一种重要的Web开发技术，它可以实现异步数据交互和页面更新，提高了Web应用的交互体验和性能。在使用AJAX技术时，需要熟悉XMLHttpRequest对象的基本用法，并注意处理异步请求和响应的问题。同时，我们也需要注意AJAX技术的优缺点，避免在实际开发中出现问题。希望本文能够对初学者有所帮助，让大家更好地掌握JavaScript AJAX的应用技巧。

XML和JSON数据格式

JavaScript AJAX是一种重要的Web开发技术，它可以实现异步数据交互和页面更新。在AJAX技术中，数据格式是非常重要的一个概念，开发人员需要选择合适的数据格式来传递和处理数据。本文将详细介绍JavaScript AJAX中的XML和JSON数据格式，旨在帮助初学者深入理解和掌握该技术。

一、XML数据格式

XML是一种标记语言，常用于表示数据结构和数据交换。在AJAX技术中，XML数据格式是一种常见的数据格式，它可以通过XMLHttpRequest对象发送和接收数据。以下是XML数据格式的基本结构：

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <book>
    <title>JavaScript入门</title>
    <author>张三</author>
    <price>50.00</price>
  </book>
  <book>
    <title>JavaScript高级编程</title>
    <author>李四</author>
    <price>80.00</price>
  </book>
</root>

在上面的XML数据格式中，我们可以看到XML的基本结构包括一个XML声明和一个根元素。根元素下包含若干个子元素，每个子元素可以包含若干个属性和子元素。在实际应用中，我们可以根据需要定义自己的XML数据格式。

在使用XML数据格式时，我们需要使用XMLHttpRequest对象发送请求，并通过回调函数来处理服务器返回的数据。以下是XML数据格式的基本使用步骤：

  1. 创建XMLHttpRequest对象。可以使用以下代码创建一个XMLHttpRequest对象：
let xhr = new XMLHttpRequest();
  1. 发送HTTP请求。使用XMLHttpRequest对象发送HTTP请求的基本步骤如下：

a. 调用open()方法，指定请求的方法、URL和是否使用异步方式。例如，以下代码指定了一个GET方法的请求，请求URL为"/api/data.xml"，并使用异步方式发送请求：

xhr.open("GET", "/api/data.xml", true);

b. 发送请求。使用send()方法发送HTTP请求，例如：

xhr.send();
  1. 处理服务器响应。当服务器响应XMLHttpRequest对象的请求时，可以通过以下属性和方法来获取响应数据：

a. responseText：响应的文本数据。

b. responseXML：响应的XML数据。

c. status：响应的状态码。

d. statusText：响应状态码对应的文本信息。

e. getAllResponseHeaders()：获取所有响应头。

f. getResponseHeader(header)：获取指定响应头。

在接收到响应后，我们可以通过回调函数来处理响应数据。例如，以下代码定义了一个回调函数，当XMLHttpRequest对象接收到响应时，会调用该函数：

xhr.onload = function() {
  if (xhr.status === 200) {
    let xmlData = xhr.responseXML;
    // 对XML数据进行处理
  } else {
    console.log("请求失败：" + xhr.statusText);
  }
};

二、JSON数据格式

JSON是一种轻量级的数据交换格式，具有易读、易写、易解析、易生成等特点。在AJAX技术中，JSON数据格式是一种常见的数据格式，它可以通过XMLHttpRequest对象发送和接收数据。以下是JSON数据格式的基本结构：

{
  "books": [
    {
      "title": "JavaScript入门",
      "author": "张三",
      "price": 50.00
    },
    {
      "title": "JavaScript高级编程",
      "author": "李四",
      "price": 80.00
    }
  ]
}

在上面的JSON数据格式中，我们可以看到JSON的基本结构包括一个对象，该对象包含一个名为"books"的数组，每个数组元素是一个包含"title"、"author"和"price"三个属性的对象。在实际应用中，我们可以根据需要定义自己的JSON数据格式。

在使用JSON数据格式时，我们需要使用JSON.parse()方法将JSON字符串转换为JavaScript对象，或使用JSON.stringify()方法将JavaScript对象转换为JSON字符串。以下是JSON数据格式的基本使用步骤：

  1. 创建XMLHttpRequest对象。可以使用以下代码创建一个XMLHttpRequest对象：
let xhr = new XMLHttpRequest();
  1. 发送HTTP请求。使用XMLHttpRequest对象发送HTTP请求的基本步骤如下：

a. 调用open()方法，指定请求的方法、URL和是否使用异步方式。例如，以下代码指定了一个GET方法的请求，请求URL为"/api/data.json"，并使用异步方式发送请求：

xhr.openJavaScript AJAX是一种重要的Web开发技术，它可以实现异步数据交互和页面更新。在AJAX技术中，数据格式是非常重要的一个概念，开发人员需要选择合适的数据格式来传递和处理数据。本文将详细介绍JavaScript AJAX中的XML和JSON数据格式，旨在帮助初学者深入理解和掌握该技术。

一、XML数据格式

XML是一种标记语言，常用于表示数据结构和数据交换。在AJAX技术中，XML数据格式是一种常见的数据格式，它可以通过XMLHttpRequest对象发送和接收数据。以下是XML数据格式的基本结构：

```xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
  <book>
    <title>JavaScript入门</title>
    <author>张三</author>
    <price>50.00</price>
  </book>
  <book>
    <title>JavaScript高级编程</title>
    <author>李四</author>
    <price>80.00</price>
  </book>
</root>

在上面的XML数据格式中，我们可以看到XML的基本结构包括一个XML声明和一个根元素。根元素下包含若干个子元素，每个子元素可以包含若干个属性和子元素。在实际应用中，我们可以根据需要定义自己的XML数据格式。

在使用XML数据格式时，我们需要使用XMLHttpRequest对象发送请求，并通过回调函数来处理服务器返回的数据。以下是XML数据格式的基本使用步骤：

  1. 创建XMLHttpRequest对象。可以使用以下代码创建一个XMLHttpRequest对象：
let xhr = new XMLHttpRequest();
  1. 发送HTTP请求。使用XMLHttpRequest对象发送HTTP请求的基本步骤如下：

a. 调用open()方法，指定请求的方法、URL和是否使用异步方式。例如，以下代码指定了一个GET方法的请求，请求URL为"/api/data.xml"，并使用异步方式发送请求：

xhr.open("GET", "/api/data.xml", true);

b. 发送请求。使用send()方法发送HTTP请求，例如：

xhr.send();
  1. 处理服务器响应。当服务器响应XMLHttpRequest对象的请求时，可以通过以下属性和方法来获取响应a. responseText：响应的文本数据。

b. responseXML：响应的XML数据。

c. status：响应的状态码。

d. statusText：响应状态码对应的文本信息。

e. getAllResponseHeaders()：获取所有响应头。

f. getResponseHeader(header)：获取指定响应头。

在接收到响应后，我们可以通过回调函数来处理响应数据。例如，以下代码定义了一个回调函数，当XMLHttpRequest对象接收到响应时，会调用该函数：

xhr.onload = function() {
  if (xhr.status === 200) {
    let xmlData = xhr.responseXML;
    // 对XML数据进行处理
  } else {
    console.log("请求失败：" + xhr.statusText);
  }
};

二、JSON数据格式

JSON是一种轻量级的数据交换格式，具有易读、易写、易解析、易生成等特点。在AJAX技术中，JSON数据格式是一种常见的数据格式，它可以通过XMLHttpRequest对象发送和接收数据。以下是JSON数据格式的基本结构：

{
  "books": [
    {
      "title": "JavaScript入门",
      "author": "张三",
      "price": 50.00
    },
    {
      "title": "JavaScript高级编程",
      "author": "李四",
      "price": 80.00
    }
  ]
}

在上面的JSON数据格式中，我们可以看到JSON的基本结构包括一个对象，该对象包含一个名为"books"的数组，每个数组元素是一个包含"title"、"author"和"price"三个属性的对象。在实际应用中，我们可以根据需要定义自己的JSON数据格式。

在使用JSON数据格式时，我们需要使用JSON.parse()方法将JSON字符串转换为JavaScript对象，或使用JSON.stringify()方法将JavaScript对象转换为JSON字符串。以下是JSON数据格式的基本使用步骤：

  1. 创建XMLHttpRequest对象。可以使用以下代码创建一个XMLHttpRequest对象：
let xhr = new XMLHttpRequest();
  1. 发送HTTP请求。使用XMLHttpRequest对象发送HTTP请求的基本步骤如下：

a. 调用open()方法，指定请求的方法、URL和是否使用异步方式。例如，以下代码指定了一个GET方法的请求，请求URL为"/api/data.json"，并使用异步方式发送请求：

xhr.open("GET", "/api/data.json", true);

b. 发送请求。使用send()方法发送HTTP请求，例如：

xhr.send();
  1. 处理服务器响应。当服务器响应XMLHttpRequest对象的请求时，可以通过以下属性和方法来获取响应数据：

a. responseText：响应的文本数据。

b. responseJSON：响应的JSON数据，需要先使用JSON.parse()方法将响应文本转换为JavaScript对象。

c. status：响应的状态码。

d. statusText：响应状态码对应的文本信息。

e. getAllResponseHeaders()：获取所有响应头。

f. getResponseHeader(header)：获取指定响应头。

在接收到响应后，我们可以通过回调函数来处理响应数据。例如，以下代码定义了一个回调函数，当XMLHttpRequest对象接收到响应时，会调用该函数：

xhr.onload = function() {
  if (xhr.status === 200) {
    let jsonData = JSON.parse(xhr.responseText);
    // 对JSON数据进行处理
  } else {
    console.log("请求失败：" + xhr.statusText);
  }
};

三、XML和JSON数据格式的比较

XML和JSON都是常用的数据格式，在AJAX技术中都可以用来传递和处理数据。它们各有优缺点，我们可以根据实际情况选择使用。

优点：

  1. XML具有良好的可读性和可扩展性，可以表示更为复杂的数据结构和关系。

  2. JSON具有更为紧凑的数据结构和更高的解析速度，适用于数据量较小的场景。

  3. XML和JSON都可以通过JavaScript轻松地解析和处理数据。

缺点：

  1. XML的数据量较大，传输和解析速度较慢。

  2. JSON的数据结构较为简单，对于某些复杂的数据结构难以表示。

总结：

在实际应用中，我们可以根据数据的特点和传输需求来选择合适的数据格式。如果数据结构较为复杂，需要进行扩展和描述关系时，可以选择使用XML数据格式；如果数据量较小，需要快速传输和解析数据，可以选择使用JSON数据格式。无论选择哪种数据格式，我们都需要了解其基本结构和使用方法，并根据实际应用场景进行优化和调整，以达到更好的性能和用户体验。

AJAX应用实例

好的，我将为您撰写一篇关于JavaScript AJAX应用实例的文章，旨在帮助初学者深入理解和掌握该技术。本文将从实际案例出发，详细介绍如何使用AJAX技术来实现异步数据交互和页面更新。文章将包括以下内容：

一、AJAX技术简介

AJAX（Asynchronous JavaScript and XML）是一种Web开发技术，可以实现异步数据交互和页面更新。AJAX技术通过JavaScript和XMLHttpRequest对象来实现异步数据交互，从而避免了页面的刷新和重载，提高了用户体验。AJAX技术广泛应用于Web开发中，如动态加载数据、实时搜索、自动补全等功能。

二、AJAX的基本原理

在AJAX技术中，数据的传输和处理是异步进行的，这意味着页面不需要进行刷新和重载，而是通过JavaScript代码向服务器发送请求，并在服务器返回响应后，通过回调函数来处理数据。以下是AJAX的基本流程：

  1. 创建XMLHttpRequest对象。可以使用以下代码创建一个XMLHttpRequest对象：
let xhr = new XMLHttpRequest();
  1. 发送HTTP请求。使用XMLHttpRequest对象发送HTTP请求的基本步骤如下：

a. 调用open()方法，指定请求的方法、URL和是否使用异步方式。例如，以下代码指定了一个GET方法的请求，请求URL为"/api/data.json"，并使用异步方式发送请求：

xhr.open("GET", "/api/data.json", true);

b. 发送请求。使用send()方法发送HTTP请求，例如：

xhr.send();
  1. 处理服务器响应。当服务器响应XMLHttpRequest对象的请求时，可以通过以下属性和方法来获取响应数据：

a. responseText：响应的文本数据。

b. responseXML：响应的XML文档数据，需要先使用DOM解析器解析XML文档。

c. status：响应的状态码。

d. statusText：响应状态码对应的文本信息。

e. getAllResponseHeaders()：获取所有响应头。

f. getResponseHeader(header)：获取指定响应头。

在接收到响应后，我们可以通过回调函数来处理响应数据。例如，以下代码定义了一个回调函数，当XMLHttpRequest对象接收到响应时，会调用该函数：

xhr.onload = function() {
  if (xhr.status === 200) {
    let responseData = xhr.responseText;
    // 对数据进行处理
  } else {
    console.log("请求失败：" + xhr.statusText);
  }
};

通过以上基本流程，我们可以使用AJAX技术实现数据的异步交互和页面更新。

三、AJAX应用实例

下面将通过一个简单的实例来演示如何使用AJAX技术实现动态加载数据和页面更新。在本实例中，我们将使用AJAX技术从服务器获取一些数据，并将其显示在页面上。

  1. 创建HTML页面

首先，我们需要创建一个HTML页面，其中包含一个按钮和一个用于显示数据的区域。以下是一个简单的HTML页面代码：

<!DOCTYPE html>
<html>
  <head>
    <title>AJAX实例</title>
  </head>
  <body>
    <button id="loadBtn">加载数据</button>
    <div id="dataContainer"></div>
  </body>
</html>

在上面的HTML代码中，我们定义了一个按钮和一个用于显示数据的

元素，我们将通过AJAX技术来动态加载数据，并将数据显示在
元素中。

  1. 编写JavaScript代码

接下来，我们需要编写JavaScript代码来实现AJAX数据交互和页面更新。以下是一个简单的JavaScript代码，实现了从服务器获取数据，并将数据显示在页面上的功能：

// 获取按钮和数据容器
let loadBtn = document.getElementById("loadBtn");
let dataContainer = document.getElementById("dataContainer");

// 点击按钮时触发事件
loadBtn.onclick = function() {
  // 创建XMLHttpRequest对象
  let xhr = new XMLHttpRequest();

  // 发送HTTP请求
  xhr.open("GET", "/api/data.json", true);
  xhr.send();

  // 处理服务器响应
  xhr.onload = function() {
    if (xhr.status === 200) {
      let responseData = JSON.parse(xhr.responseText);
      let html = "";
      for (let i = 0; i < responseData.length; i++) {
        html += "<p>书名：" + responseData[i].bookName + "</p>";
        html += "<p>作者：" + responseData[i].author + "</p>";
        html += "<p>价格：" + responseData[i].price + "</p>";
      }
      dataContainer.innerHTML = html;
   } else {
      console.log("请求失败：" + xhr.statusText);
    }
  };
};

在上面的代码中，我们首先获取了按钮和数据容器的引用，然后为按钮添加了一个点击事件处理程序。当用户点击按钮时，我们将创建一个XMLHttpRequest对象，并发送一个GET请求到服务器，请求URL为"/api/data.json"。在服务器返回响应后，我们通过回调函数将响应数据解析为JavaScript对象，并将数据显示在数据容器中。

在本实例中，我们使用了JSON数据格式来传递数据，因此需要使用JSON.parse()方法将响应文本转换为JavaScript对象。当然，我们也可以使用XML数据格式来传递数据，只需要在服务器端返回XML格式的文档，并使用DOM解析器进行解析。

四、总结

本文通过一个简单的AJAX应用实例，向读者介绍了如何使用AJAX技术实现异步数据交互和页面更新。在实际应用中，AJAX技术可以用于动态加载数据、实时搜索、自动补全等功能，提高了用户体验和页面性能。在使用AJAX技术时，我们需要了解其基本原理和使用方法，以及如何选择合适的数据格式（如JSON或XML）来传递和解析数据。同时，我们还需要注意AJAX请求的安全性和性能问题，如防止跨站脚本攻击（XSS）和合理地使用缓存等。总之，AJAX技术是Web开发中必不可少的一部分，希望本文能够帮助初学者深入理解和掌握该技术，为开发更高质量的Web应用奠定基础。
javascript ajax
04-21
JavaScript AJAX（异步JavaScript和XML）是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在现代Web开发中，AJAX是构建动态、交互性网站的关键工具。通过AJAX，用户可以实现页面的无刷新更新...
ajax 原生js操作ajax
fagdg的博客
07-25 1万+
1.不需要插件支持（一般浏览器且默认开启JavaScript即可）；2.用户体验极佳（不刷新页面即可获取可更新的数据）；3.提升Web程序的性能（在传递数据方面做到按需放松，不必整体提交）；4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；...
js-ajax(js)
muzidigbig的博客
07-03 3340
一、Ajax概述 1．什么是同步，什么是异步 同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态（不能进行其他操作） 异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死（可以进行其他操作） 2．Ajax的运行原理 页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提...
JS中的ajax
不想写代码的一天
06-17 1万+
AJAX 传统的web交换缺点： 1.流量损失 2.浪费时间和带宽 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 概念： ajax使网页异步刷新，在不重新加载整个页面时，对网页的局部进行刷新。 特点： 局部刷新； 最大的特点：局部刷新 ajax的优点： 1.局部刷新； 2,。优化了浏览器与服务器之间的传输，减少了不必要...
JavaScript中的Ajax
weixin_43466575的博客
04-10 6489
（1）什么是AjaxAjax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。描述：不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。功能：用于实现与服务器进行异步交互的功能。用js来实现页面的局部刷新。（2）Ajax工作流程。
javascript的ajax
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
03-04 4061
（域名）:443（端口号）/course/list（路径）协议、域名、端口号，任何一个不一样，就是不同域与路径无关，路径一不一样无所谓不同域同域。
javaScript Ajax
07-11
ppt 学习资源这是一个很好的ppt资源
javascript-ajax：JavaScript Ajax
02-18
JavaScript AJAX（Asynchronous JavaScript and XML）是Web开发中一种用于创建动态、交互性网页的技术。它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，极大地提升了用户体验。AJAX的...
autocomplete:本机 javascript ajax 和自动完成插件
06-07
本机 javascript ajax 和自动完成插件 演示链接 如何使用 < link rel =" stylesheet " href =" css/template.css " > < script type =" text/javascript " src =" ajax.js " > </ script > < ...
JavaScript之Ajax（一篇入门Ajax就够了）
热门推荐
weixin_50602266的博客
12-20 9万+
Ajax入门一篇就够
JS的AJAX
weixin_43297321的博客
06-28 1421
Ajax 异步通信技术，是Asynchronous JavaScript+XML的简写，这种技术允许向服务器请求额外的数据而无需卸载（刷新）页面。 网页发展缓慢 网页传播消息、允许进行搜索查询 搜索（SEO） 媒介搜索 静态页面能被搜索到 如果页面是需要的时候动态写入，那就无法搜索到该页面 SEO的优化，得写成静态页面 造成早期网页不能向其他语言一样直接给服务端发送消息，服务器返回消息，所以早期的通信都是前后端不分离的情况（跳转页面），这种方式能够最大限度的允许我们通过SEO搜索页面 但是有缺陷（无
Promise
爱学习的豪豪的博客
09-03 271
浏览器的同源策略： 浏览器安全策略，保障非同源资源之间数据访问的安全性。 默认不允许非同源的资源直接访问。 URL： 协议://域名:端口/路径名称?查询字符串#位置标识符 同源：协议、域名、端口完全一致，只要三个中有任何一个不一致，则是非同源 http协议的默认端口号是80 https协议的默认端口号是443 mysql数据库的默认端口号是3306 非同源资源间需要进行访问，则需要实现跨域。 解决资源跨域访问： a. CORS cross-origin resource sharing 服务器
Javaweb 之 AJAX
longool的博客
06-21 409
AJAX Asynchronous Javascript And XML （异步 JavaScript 和 XML）：是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。 AJAX 不是编程语言。AJAX 组合了： 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）。 JavaScript 和 HTML DOM（显示或使用数据）。 AJAX工作原理： 网页中发生一个事件（页面加载、按钮点击） 由 JavaScript
js ajax通用方法,Ajax常用方式
weixin_35161750的博客
08-05 1684
一、基本用法(发送请求、接收返回值)；1、js代码$.ajax( {type :"POST",url :"/text.action?name="+name+"&user.id="+id,//后面name/id为变量dataType :"json",async :false,success : function(result) {alert("result"+result);}});或者将u...
六、AJAX-JavaScript核心内容精讲
qq_41994396的博客
05-08 345
readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义：0：未初始化 — 尚未调用.open()方法；1：启动 — 已经调用.open()方法，但尚未调用.send()方法；2：发送 — 已经调用.send()方法，但尚未接收到响应；3：接收 — 已经接收到部分响应数据；4：完成 — 已经接收到全部响应数据，而且已经可以在客户端使用了；
javascript基础十六：Ajax 原理是什么？如何实现？
Allen-Ye博客
06-02 850
Ajax 原理是什么？如何实现？
JavaScript核心技术之Ajax详解
热爱前端的大三在校生
10-10 1283
Ajax 的核心是 XMLHttpRequest 对象。所有现代浏览器都支持 XMLHttpRequest 对象。XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。首先我们在控制台打印一下，看看。
js总结篇之—ajax （看完你就学会整个js）
Sakura1921的博客
02-22 3221
1.AJAX技术 *ajax是浏览器提供的一系列api，可供javascript调用，实现代码控制请求与相应，实现网络2编程 2.快速上手 let xhr = new XMLHttpRequest() //类似于开启用户代理 //初始化，请求了代理对象 console.log(xhr.readyState) //0, UNSENT xhr.open('get', '/text.php') //类似于输入地址与方法 //调用了open方法，建立了客户端与服务端的特定端口的连接 cons..
JavaScript请求数据的4种方法总结（Ajax、fetch、jQuery、axios）
最新发布
激情人生，美好生活
08-17 7906
JavaScript请求数据有4种主流方式，分别是Ajax、fetch、jQuery和axios。
JavaScript AJAX编程实践与应用详解
"JavaScript Ajax编程应用篇主要讲解了如何在JavaScript中实现Ajax技术，包括创建XHR对象和使用方法，特别适合对Ajax感兴趣的开发者参考学习。" 在JavaScript中，Ajax（Asynchronous JavaScript and XML）是一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kali与编程～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值