Ajax 详解及其使用

于 2024-02-01 23:38:32 发布
阅读量1.2k 收藏 20
点赞数 13
文章标签： ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45782719/article/details/135983853
版权

Ajax（Asynchronous JavaScript and XML）是一种在客户端与服务器之间进行异步通信的技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。Ajax 的核心是XMLHttpRequest（XHR）对象，它提供了在客户端与服务器之间发送和接收数据的能力。Vue中通常利用Ajax技术来实现动态数据的获取、展示和更新。

Ajax 的工作原理

  1. 创建 XMLHttpRequest 对象：

    • 所有现代浏览器（IE7+，Firefox, Chrome, Safari 以及 Opera）都内建了 XMLHttpRequest 对象。创建方式通常是直接通过 new XMLHttpRequest() 来实现。

  2. 发送请求到服务器：

    • 通过调用 XMLHttpRequest 对象的 open() 和 send() 方法，可以向服务器发送请求。open() 方法用于规定请求的类型（如“GET”、“POST”）、URL以及是否异步处理请求。send() 方法则实际上是发送请求。

  3. 服务器处理请求：

    • 服务器接收到请求后，根据请求处理后端逻辑，然后发送响应数据。

  4. 接收服务器响应：

    • AJAX 异步接收响应，不会影响用户的其他操作。通过监听 XMLHttpRequest 对象的 onreadystatechange 事件，可以在服务器响应的状态改变时进行操作。当 readyState 属性变为 4 且 status 为 200 时，表示成功收到服务器的响应数据。

  5. 更新网页内容：

    • 通过 JavaScript 操作 DOM，可以将接收到的数据动态展示在网页上，从而实现无需重新加载整个页面即可更新部分网页内容的效果。

在 Vue 中使用 Ajax

在 Vue 项目中，Ajax 通常与前端框架结合使用来动态获取或提交数据。Vue 应用通常使用 Axios 作为 HTTP 客户端进行 Ajax 请求，Axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 node.js。

引入 Axios

首先，需要在 Vue 项目中安装 Axios：

npm install axios
示例：在 Vue 组件中发送 GET 请求

接下来，展示如何在一个 Vue 组件中使用 Axios 发送 GET 请求获取数据：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('https://api.example.com/items')
        .then(response => {
          this.items = response.data;
        })
        .catch(error => {
          console.error('请求失败: ', error);
        });
    },
  },
};
</script>

在这个组件中，fetchData 方法通过 Axios 向 'https://api.example.com/items' 发送 GET 请求，然后在 .then 回调函数中使用响应数据更新 items 数据属性。mounted 钩子确保在组件挂载完成后立即获取数据。

了解Ajax技术及其在Vue中的应用，需要从几个方面更深入地探讨。以下将详细介绍包括XMLHttpRequest对象的使用细节，以及Vue.js项目中常用的HTTP客户端Axios的高级应用。

XMLHttpRequest对象

XMLHttpRequest是实现Ajax技术的基础，其工作流程大致如下：

  1. 实例化：创建一个XMLHttpRequest对象的实例。

    var xhr = new XMLHttpRequest();

  2. 配置请求：通过调用open方法配置请求的主要参数，如请求方法、URL、是否异步等。

    xhr.open('GET', 'https://api.example.com/data', true);

  3. 设置回调函数：通过监听onreadystatechange事件，设置当服务器响应的状态变化时的回调函数。在这个回调函数中，根据xhr.readyState的状态，决定是否处理响应数据。

    xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};

  4. 发送请求：使用send方法发送请求。可以传递数据给服务器，也可以为null，具体取决于请求类型。

    xhr.send(null);

  5. 处理响应：在回调函数中处理服务器返回的数据。

Vue.js 与 Axios

在Vue项目中，通常使用Axios库来简化Ajax请求的流程。Axios是一个基于Promise的HTTP客户端，支持浏览器和node.js环境。它提供方便的API进行请求配置、发起和响应处理。

引入和安装Axios

在Vue项目中使用Axios之前，需要安装：

npm install axios

然后，在需要发起网络请求的Vue组件中引入Axios：

import axios from 'axios';
示例：在Vue组件中发起GET请求

以下代码展示了如何在Vue组件的mounted生命周期钩子中调用fetchData方法，向服务器发起GET请求并处理响应：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('https://api.example.com/posts')
        .then(response => {
          this.items = response.data;
        })
        .catch(error => {
          console.error('Error:', error);
        });
    }
  }
};
</script>
Axios的高级使用

Axios提供了很多高级功能，包括但不限于：

  • 拦截器（Interceptors）：可以在请求或响应被处理前，对它们进行拦截和操作。

    // 添加请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

  • 取消请求：Axios允许在请求发出后，如果需要，可以取消进行中的请求。

    const CancelToken = axios.CancelToken;
let source = CancelToken.source();

axios.get('https://api.example.com/posts', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求 (请求原因是可选的)
source.cancel('Operation canceled by the user.');

  • 全局配置：Axios允许定义针对所有请求的全局默认值。

    axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

通过结合Vue的响应式系统和Axios的高级特性，可以有效地管理应用的数据流，使得数据处理更加灵活和高效。

Ajax 实战演练

根据和风天气（QWeather）API文档，若需通过城市名直接获取天气信息，您需要首先使用地理编码（Geocode）API将城市名称转换成相应的地理位置代码（即 location ID），然后再用这个位置代码调用天气预报 API。以下是基于和风天气API进行操作的步骤：

步骤1: 地理编码API转换城市名到 location ID

首先，使用和风天气的geoAPI：

https://geoapi.qweather.com/v2/city/lookup?location=城市名&key=您的API密钥&lang=zh
  • location参数修改为您想查询的城市名（例如北京）。
  • key参数请替换为您的和风天气API密钥。

示例请求（以“北京”为例，假设密钥为YOUR_API_KEY）:

https://geoapi.qweather.com/v2/city/lookup?location=北京&key=YOUR_API_KEY&lang=zh

返回的JSON数据中会包含该城市的location ID等信息。

步骤2: 使用天气预报API获取7天天气

获得location ID后，使用7天天气预报API：

https://devapi.qweather.com/v7/weather/7d?location=获得的位置ID&key=您的API密钥&lang=zh

将location参数替换为步骤1中获得的位置ID，key参数替换为您的API密钥。

示例代码

应用上述步骤的示例JavaScript代码片段（假设您使用axios进行HTTP请求）:

第一部分：通过城市名获取location ID

axios.get("https://geoapi.qweather.com/v2/city/lookup?location=北京&key=YOUR_API_KEY&lang=zh")
    .then(response => {
        if (response.data.code === "200") {
            const locationId = response.data.location[0].id; // 假设取第一个返回结果的ID
            getWeather(locationId); // 调用获取天气信息的函数
        }
    })
    .catch(error => {
        console.error("获取地理编码失败:", error);
    });

第二部分：使用location ID获取7天天气信息

function getWeather(locationId) {
    axios.get(`https://devapi.qweather.com/v7/weather/7d?location=${locationId}&key=YOUR_API_KEY&lang=zh`)
        .then(response => {
            console.log("7天天气信息:", response.data);
            // 这里可以进一步处理和显示天气信息
        })
        .catch(error => {
            console.error("获取天气信息失败:", error);
        });
}

实现过程如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../02%20vue%20初识/vue.js"></script>
    <style>
        table,tr,th,td{
            border: 3px solid red;
            border-collapse: collapse;
        }
        th ,td{
            width: 200px;
            text-align: center;
            height: 30px;
            line-height: 30px;
        }
        .co{
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="app" class="center-block">
    <input type="text" v-model="city"><button @click="getque" class="table-bordered">查询城市天气</button>
    <div>当前查询城市: {{city}}</div>
    <p></p>
    <table  v-if="data!=''">
        <tr>
            <th>序号</th>
            <th>城市</th>
            <th>日期</th>
            <th>白天天气</th>
            <th>夜间天气</th>
            <th>最高温度</th>
            <th>最低温度</th>
            <th>相对湿度</th>
            <th>能见度</th>
        </tr>
        <tr v-for="(tq,index) in data">
            <td>{{index+1}}</td>
            <td>{{city}}</td>
            <td>{{tq.fxDate}}</td>
            <td>{{tq.textDay}}</td>
            <td>{{tq.textNight}}</td>
            <td>{{tq.tempMax}}</td>
            <td>{{tq.tempMin}}</td>
            <td>{{tq.humidity}}</td>
            <td>{{tq.vis}}</td>
        </tr>
    </table>
</div>
<script>
    const app={
        data(){
            return{
                data:[],
                id:'',
                city:'北京',
            }
        },
        methods:{
            getque(){
                axios.get(`https://geoapi.qweather.com/v2/city/lookup?location=${this.city}&key=dc7728d14dfb4c6eb3eadc070a58397&lang=zh`).then(response=>{
                    console.log(response.data.location)
                    // 获取地理位置ID
                    // const locationId = response.data.location[0].id;
                    //获取城市名字
                    this.city=response.data.location[0].name
                    //获取城市id
                    this.id=response.data.location[0].id
                    console.log(this.data,this.id)
                    axios.get(`https://devapi.qweather.com/v7/weather/7d?location=${this.id}&key=dc7728d14dfb4c6eb3eadc070a58397&lang=zh`).then(response=>{
                        console.log(response.data.daily)
                        this.data = response.data.daily;
                    })
                })
            }
        }
    }
    vm=Vue.createApp(app).mount('#app')
</script>
</body>
</html>

方法二：
将获取城市天气情况进行优化，采用官方推荐方法实现

<script>
  const app={
    data(){
      return{
        data:[],
        id:'',
        city:'北京',
      }
    },
    methods:{
      getque(){
        axios.get("https://geoapi.qweather.com/v2/city/lookup?key=dc7728d14dfb4c6eb3eadc070a58397b&lang=zh",{
          params:{
              location:this.city
            }
        }).then(response=>{
          console.log(response.data.location)
          // 获取地理位置ID
          // const locationId = response.data.location[0].id;
          //获取城市名字
          this.city=response.data.location[0].name
          //获取城市id
          this.id=response.data.location[0].id
          console.log(this.data,this.id)
          axios.get(`https://devapi.qweather.com/v7/weather/7d?location=${this.id}&key=dc7728d14dfb4c6eb3eadc070a58397b&lang=zh`).then(response=>{
            console.log(response.data.daily)
            this.data = response.data.daily;
          })
        })
      }
    }
  }
  vm=Vue.createApp(app).mount('#app')
</script>

代码解释：

代码段使用了axios来发送HTTP GET请求到和风天气(即QWeather)的API，查询特定城市的信息。您的方式完全正确，并且使用了params对象传递了查询参数，这是axios推荐的方式之一，因为它可以使URL查询参数的管理更加清晰易读。

这段代码将发送一个GET请求到和风天气API的城市地理位置查找接口(city/lookup)。请求的认证通过key参数传递，同时指定语言参数lang为中文(zh)，查询的城市名称通过location参数动态指定，值来源于this.city，这意味着this.city应当事先在相应的Vue组件的data函数中定义，并且可以通过某些交互方式(例如用户输入)得到赋值。

成功响应后，response.data.location将包含一个或多个城市的相关信息，例如城市名、ID、经纬度等，具体包含哪些信息取决于和风天气API的返回数据结构。

这个示例中，使用了Vue的v-model指令来实现数据的双向绑定，使用户可以通过输入框输入城市名称，然后点击按钮调用queryCity方法进行查询，查询结果将在控制台输出。

在axios的使用语境中，params是axios库中用来指定URL查询参数（URL query parameters）的一个选项，并不是JavaScript或其他编程语言中的固定语法。在使用axios.get或其他HTTP方法时，可以通过在配置对象中添加一个params属性来传递这些参数。axios会自动把params对象转换成相应的URL查询字符串并附加到请求的URL后面。

例如：

axios.get('https://example.com/api', {
  params: {
    key1: 'value1',
    key2: 'value2'
  }
});

上面的请求会向https://example.com/api?key1=value1&key2=value2发送一个GET请求。

所以，params在这里是axios专用的一个配置项名称，用于在发起请求时指定要传递的URL查询参数。这样做的好处是让请求参数更加清晰可读，同时避免了手动拼接查询字符串的麻烦。

这种方式在使用axios发送需要查询字符串的请求时非常有用，但需要注意，这是axios库的特定功能，与其它HTTP请求库或原生JavaScript的fetch API使用方法可能有所不同。

实现效果：
在这里插入图片描述
输入想要查询的城市未来七天的天气默认城市为北京，点击search按钮进行查询：
在这里插入图片描述
查询其他城市，比如深圳：
在这里插入图片描述

其他

在使用axios这个HTTP库时，请求配置中除了params以外，还有许多其他的选项可以使用，以适应不同的请求需求。下面列举了一些常用的axios请求配置选项：

  1. url：要请求的URL地址。
  2. method：请求方法，如get、post、put等。
  3. baseURL：会被自动加在url前面，除非url是一个绝对URL。这个参数可以在实例创建时设置，以便在实例中使用相对路径的请求。
  4. headers：自定义请求头。
  5. params：请求的URL查询参数。
  6. data：作为请求主体被发送的数据，适用于请求方法如PUT、POST，和PATCH等。
  7. timeout：请求超时时间（毫秒）。
  8. responseType：服务器响应的数据类型，如json、text、blob等。
  9. responseEncoding: 用于解码响应字符串的编码类型，默认是utf8。
  10. maxContentLength：定义允许的响应内容的最大尺寸。
  11. validateStatus：自定义响应状态码的验证函数，如果验证函数返回true（或者设置为null或undefined），则承诺将解决，否则承诺将拒绝。
  12. withCredentials：表示跨站点访问控制请求时是否需要使用凭证。
  13. auth：表示应用于HTTP Basic Auth的凭证。
  14. onUploadProgress 和 onDownloadProgress：上传和下载过程中的回调函数，允许处理进度事件。

这些配置都可以在每个请求中单独使用，也可以在创建axios实例时指定，以便在实例创建的所有请求中全局使用。配置选项使axios成为一个功能强大且灵活的HTTP客户端库。

需要注意的是，一些配置项（如data、params）的适用场景不同。例如，params通常用于GET请求中附加URL查询参数，而data用于POST、PUT等请求中发送请求体数据。

此外，axios还提供了一些高级功能，如拦截器（Interceptors），它们允许您在请求或响应被then或catch处理之前对它们进行拦截和处理。这在实际开发中非常有用，比如添加通用的请求头、处理全局的错误提示等。

简单举例说明

好的，下面将通过具体的代码示例来说明axios中一些常用配置选项的用法。

1. url 和 method

向特定URL发送GET请求：

axios({
  method: 'get',
  url: 'https://example.com/data',
}).then(response => {
  console.log(response.data);
});

2. baseURL

设置基本的URL路径，后续请求可以只写资源路径：

const instance = axios.create({
  baseURL: 'https://api.example.com'
});

instance.get('/data').then(response => {
  console.log(response.data);
});

3. headers

自定义请求头，比如设置Content-Type：

axios.post('/login', {
  username: 'example',
  password: '123456',
}, {
  headers: {
    'Content-Type': 'application/json'
  }
});

4. params

添加URL查询参数：

axios.get('/data', {
  params: {
    ID: 12345
  }
}).then(response => {
  console.log(response.data);
});

5. data

发送请求体数据，常用于POST方法：

axios.post('/submit', {
  name: '张三',
  age: 30
}).then(response => {
  console.log(response.data);
});

6. timeout

设置请求超时时间：

axios.get('/data', {
  timeout: 5000  // 5秒超时
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error('请求超时或其他错误', error);
});

7. responseType

指定响应数据类型：

axios.get('/data', {
  responseType: 'json'
}).then(response => {
  console.log(response.data);
});

8. withCredentials

带上跨站点访问控制请求中的凭证（如Cookies）：

axios.get('https://api.example.com/data', {
  withCredentials: true
});

9. auth

使用HTTP Basic Auth：

axios.get('/admin', {
  auth: {
    username: 'admin',
    password: 's3cret'
  }
});

10. onUploadProgress 和 onDownloadProgress

监控文件上传和下载进度：

axios.post('/upload', formData, {
  onUploadProgress: progressEvent => {
    let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(percentCompleted);
  }
});

axios.get('/download', {
  onDownloadProgress: progressEvent => {
    let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(percentCompleted);
  }
});

每个配置选项都针对特定的使用场景，通过灵活使用这些选项，可以有效地控制HTTP请求的各个方面。

总结

Ajax 在现代 Web 开发中扮演着重要的角色，它允许创建快速动态网页。通过 Ajax，可以在不重新加载整个网页的情况下与服务器交换数据，这显著提升了用户体验。在 Vue.js 开发中，结合使用 Axios 库来进行 Ajax 请求是非常普遍和高效的做法。

weixin_45782719
关注
  • 13
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax详解及其案例分析
10-24
本文主要给大家详细讲解了ajax的使用方法以及ajax案例分析，十分的使用，有需要的小伙伴可以参考下。
ajax通信
是陈哈哈噢
03-05 166
【ajax】 post get fetch传参
【Ajax】实现网页与服务器之间的数据交互
m0_53619602的博客
08-04 2514
全称 Asynchronous javascript And XML(异步JavaScript 和XML)通俗的理解： 在网页中来利用XMLHttpRequest对象和服务器进行数据交互的方式，就是 AjaxAjax能让我们轻松实现网页于服务器之间的数据交互表单在网页中主要负责数据采集功能html中的标签，就是用于采集用户输入的信息，并通过标签的提交操作，把采集到的信息提交到服务器端进行处理axios是专注于网络数据请求的库相比于原生的XMLHttpRequest对象，axios简单易用。...
什么是ajax，ajax有什么特点？
最新发布
dxn16638400024的博客
11-11 492
AJAX（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行异步通信的技术。它使用 JavaScript、XML（或 JSON）和 XMLHttpRequest 对象来实现在不刷新整个页面的情况下更新部分页面内容。事件，当状态为 4（请求完成）且状态码为 200（请求成功）时，处理响应数据。在示例中，将响应数据打印到控制台。这段代码中，通过创建 XMLHttpRequest 对象来发送异步请求。方法打开 GET 请求，并使用。方法发送请求到指定的 URL。
JavaScript中的连字符详解
12-10
晚上花了2个小时的时间，来用Javascript处理一个简单的字符串过滤功能，代码粘贴到下面，其实很简单，就是想把Google AJAX Search API返回的查询结果中的过滤掉。 之所以花这么多时间，一个很重要的原因就是对...
JavaScript详解(第2版)
04-25
　18.4.1　使用Ajax从文件中获取文本　 　18.4.2　使用Ajax从文件中获取XML　 　18.4.3　Ajax和表单　 　18.5　Ajax和JSON　 　18.5.1　JSON数据结构　 　18.5.2　使用JSON的步骤　 　18.5.3　JSON综合示例　 　18.5...
ASP.NET 2.0网络开发详解 源代码 和Net电子书
09-17
《ASP.NET 2.0网络开发详解》实例源代码 和部分电子书 1．源文件的运行环境  操作系统：Windows 2000及其以上版本  开发环境：Microsoft Visual Studio 2005及其以上版本  数据库：SQL Server 2005及其以上...
Ajax基础笔记
Vivien_CC的博客
09-12 489
它支持局部更新，只更新需要改变的部分，而无需重新加载整个页面，提高了性能和效率。它使得网页能够在不重新加载整个页面的情况下与服务器进行数据交换，实现了网页的动态更新，提升了用户体验。需要注意的是，虽然Ajax提供了更好的用户体验和性能优势，但滥用Ajax可能导致过度使用服务器资源，影响网站的整体性能。因此，在使用Ajax时要注意安全性，采用安全措施，如验证输入和输出数据、使用HTTPS加密协议等。由于部分更新，减少了对服务器的请求次数，降低了带宽的消耗，提高了网页的性能。
ajax异步通信
qq_57390446的博客
05-01 2521
在Ajax异步通信情景下，通过一次简单的web尝试，整合前端(css,html,js),后端(servlet,java)以及数据库(MYSQL)实现登录界面。
面试准备—详解网络与ajax请求（手写jsonp）
xun__xing的博客
09-23 440
网络与ajax一、网络1.IP地址2.域名与DNS3.网页访问4.五层网络模型5.GET和POST区别6.Cookie和Session7.端系统通信方式8.HTTP和HTTPS的区别二、ajax请求1.网络请求2.跨域访问资源3.原生js发送ajax请求4.JSONP使用与原理1.jsonp使用2.jsonp原理3.jsonp实现 一、网络 1.IP地址 IP是相对网络来说的 Internet上的计算机IP是唯一的，一个IP地址对应一个计算机。 一台计算机上面可以有好多个服务，也就是一个ip地址对应了好多个
AJAX通信原理
HistoryCreator的博客
05-25 1292
ajax通信实质上是JavaScript创建了一个XMLHttpRequest对象，这个对象有个open（）方法其参数包含URL，method，callback等，通过这个方法设置其属性，而后通过send（）方法向后台发送请求。 例： <script type="text/javascript">     var req;     function validate(){         var
jquery与django实现ajax通信
热门推荐
Avalon
12-14 1万+
写在前面：在web上通常通过http协议中的get/post文件发送数据或者请求。在浏览器中输入url后，浏览器就帮助我们完成get请求的发送与返回文件的解析，并刷新更新界面。但是如果我们不想更新界面，只想发送一个get或者post文件把数据（请求）传给服务器端，然后获取服务器返回的response文件。这个时候就可以利用ajax技术实现。实现ajax有两种方法，一种是用原生的javascript发
Ajax的通信方式
lingbin418的专栏
01-10 770
在请求页面中new一个Ajax对象让它向服务器端发送一个请求，并且在请求完成的时候调用一个方法其中用eva l()方法来解释返回的对象，这样做所有的工作行为都是由服务器端通过对页面DOM的调用来完成的，使服务器端代码非常复杂。 sample1： 客户端部分代码 ... window.onload=function(){  $('helloBtn').onclick=function(){
ajax通信原理
chen964089的博客
04-07 426
Ajax通信实质上是js创建了一个XMLHttpRequest对象，这个对象有个open（）方法，其参数包含url，methods，callback等，通过这个方法设置其属性，而后通过send()方法向后台发送请求。 XMLHttpRequest对象用于在后台与服务器交换数据。 XMLHttpRequest作用： 在不重新加载页面的情况下更新网页。 在页面已加载后从服务器请求数据。 在页面已加载后从服务器接收数据。 在后台向服务器发送数据。 XmlHttpRequest方法： Open(url.
Ajax：实现ajax通信
学源客的博客
07-04 1073
Ajax：实现ajax通信 通过XMLHttpRequest对象            a)创建XMLHttpRequest            b)设置要发送请求 &nbs...
jQuery实现Ajax通讯的几种常用方式
BarryLee的博客
10-15 1393
这里介绍3种 jQuery.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] ) jQuery.post( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] ) jQuery.ajax( url, [ settings ...
ajax 通信,ajax通信
weixin_33746833的博客
08-05 262
AJAX即Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)，可以在不重新加载整个网页的基础上，对网页的某部分进行更新。XMLHttpRequest 是 AJAX 的基础，用于在后台与服务器交换数据。想要创建一个AJAX请求，分为以下几个步骤：创建XMLHttpRequest对象-> open -> send ->处理响应/...
ajax长连接实现web实时通讯
wzs_xyz的专栏
02-21 1万+
因web运行模式请求-响应，服务端无法主动发起通讯，所以实时性备受诟病，ajax轮询可以模拟及时通讯，但连接太频繁将给服务端带来很大压力，不频繁则实时性很差。本文介绍在web上真正实现实时通讯的方法，ajax长连接。 特别说明：ajax长连接是浏览器兼容的      简述过程：进入页面客户端即发起一个ajax请求，服务端收到请求后不立即返回，将其阻塞，待服务端有新信息时将信息返回给客户端，客户
使用原生ajax进行提交实例详解
05-01
Ajax (Asynchronous JavaScript and XML) 是一种在不刷新整个页面的情况下，使用 JavaScript 发起异步请求，获取或提交数据的技术。原生 Ajax 是指不依赖任何 JavaScript 框架或库，纯粹使用原生 JavaScript 实现 Ajax。下面是一个使用原生 Ajax 进行提交的实例详解。 首先需要创建一个 XMLHttpRequest 对象： ``` var xmlhttp; if (window.XMLHttpRequest) { // IE7+、Firefox、Chrome、Opera、Safari 浏览器执行代码 xmlhttp = new XMLHttpRequest(); } else { // IE6、IE5 浏览器执行代码 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } ``` 然后设置请求方式和请求地址： ``` var url = "submit.php"; // 提交的处理程序 var method = "POST"; // 提交的方式，可以是 GET 或 POST xmlhttp.open(method, url, true); // true 表示异步请求 ``` 接着设置请求头： ``` xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); ``` 这里使用了 application/x-www-form-urlencoded 格式。如果需要提交 JSON 格式的数据，则设置为： ``` xmlhttp.setRequestHeader("Content-type", "application/json"); ``` 接下来设置回调函数： ``` xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // 请求成功，处理返回的数据 console.log(this.responseText); } }; ``` 当 readyState == 4 时，表示请求已完成；status == 200 表示请求成功。这里只是简单地输出了返回的数据，可以根据具体情况进行处理。 最后发送请求，提交数据： ``` var data = "name=John&age=18"; // 提交的数据，可以是表单数据或 JSON 数据 xmlhttp.send(data); ``` 这里提交了两个字段，name 和 age，可以根据实际情况修改。当使用 GET 方式提交时，数据需要拼接到 URL 中，例如： ``` var url = "submit.php?name=John&age=18"; xmlhttp.open("GET", url, true); xmlhttp.send(); ``` 以上就是使用原生 Ajax 进行提交的实例详解。需要注意的是，原生 Ajax 还需要处理一些兼容性和安全性问题，例如 IE6、7 下不能并发多个 Ajax 请求，跨域请求需要使用 JSONP 或设置 CORS 等。因此，如果条件允许，建议使用现代的 JavaScript 框架或库来简化 Ajax 的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值