一篇文章全面了解Ajax框架

最新推荐文章于 2024-07-09 22:50:39 发布
最新推荐文章于 2024-07-09 22:50:39 发布
阅读量866 收藏 8
点赞数 20
分类专栏： 前端 文章标签： ajax 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingwan_91/article/details/139581483
版权

目录

什么是AJAX？

如何使用AJAX？

语法

url详解

URL的概念

URL的组成

URL查询参数

axios

axios-查询参数

axios-请求配置

常用请求方法

axios-错误处理

HTTP协议

HTTP协议-请求报文

HTTP协议-响应报文

接口文档

AJAX原理

AJAX原理 - XMLHttpRequest

Promise

Promise - 三种状态

AJAX封装

什么是AJAX？

       概念：AJAX是浏览器与服务器进行数据通信的技术。

       定义：AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的"异步"特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

如何使用AJAX？

语法

  1. 引入axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios/min.js
  2. 使用axios函数
    1. 传入配置对象
    2. 再用.then回调函数接收结果，并做后续处理

        接下来让我们通过代码演示看看ajax的作用吧，代码、需求及效果图如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>
<body>
    <!--
        axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
        省份数据地址：http://hmajax.itheima.net/api/province

        目标：使用axios库，获取省份列表数据，展示到页面上
    -->
    <!-- 渲染 -->
    <p class="my-p"></p>
    <!-- 1.引入axios库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 2.使用axios函数 -->
    <script>
        axios({
            url:'http://hmajax.itheima.net/api/province'
        }).then(result => {
            // 打印返回结果
            console.log(result)
            // 打印省份列表
            console.log(result.data.list)
            // 打印省份
            console.log(result.data.list.join('<br>'))
            // 插入页面
            document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
        })
    </script>
</body>
</html>

        可以看到，通过axios函数我们可以从url中获取数据资源，并进行处理，那么url是什么意思呢？接下来我们进行详细的了解。

url详解

URL的概念

        Internet上的每一个网页都具有一个唯一的名称标识，通常称之为URL（Uniform Resource Locator, 统一资源定位器）。

        它是www的统一资源定位标志，简单地说URL就是web地址，俗称“网址”。

URL的组成

        URL由三部分组成：资源类型、存放资源的主机域名、资源文件名
        也可认为由4部分组成：协议、主机、端口、路径。（很多时候端口都是隐藏的）
        还可以认为由7部分组成：协议，域名，端口，虚拟目录，文件名，锚，参数
        URL的一般语法格式：(带方括号[]的为可选项)：protocol :// hostname[:port] / path / [;parameters][?query]#fragment
案例：https://www.baidu.com

协议：https

域名（IP）：www.baidu.com

端口（port）：443

资源路径：当没有资源路径时，可以默认是  /  ，在各个网站通常有默认的路径如index.html

URL查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

示例：假如前面的案例，我要获取河北省下辖市的信息，就可以写为：

http://hmajax.itheima.net/api/city?pname=河北省

axios

        现在开始，我们对axios进行全面的了解和使用。

axios-查询参数

语法：使用axios提供的params选项

注意：axios在运行时把参数名和值，会拼接到url?参数名=值

axios({
    url:'目标资源地址'
    params:{
        参数名:值
    }
}).then(result=>{
    //对服务器返回的数据做后续处理
})

        那么让我们来使用查询参数查询一下云南省下辖市吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询参数</title>
</head>
<body>
    <p></p>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        axios({
            url:'http://hmajax.itheima.net/api/city',
            //查询参数
            params:{
                pname:'云南省'
            }
        }).then(result => {
            console.log(result.data.list)
            document.querySelector('p').innerHTML = result.data.list.join('<br>')
        })
    </script>
</body>
</html>

        渲染图如上所示，可以看到我们的确拿到了对应的数据，那么此时我们就完成了对查询参数的学习了。

axios-请求配置

常用请求方法

        现在我们已经可以从服务器拿到对应的数据了，那么接下来我们来学习一下然后对服务器数据做其他的相关操作：

        请求方法：对服务器资源，要执行的操作

请求方法        操作
GET        获取数据
POST提交数据
PUT修改数据（全部）
DELETE删除数据
PATCH修改数据（部分）

        那么接下来我们就看看axios请求配置该如何操作吧：

  • url：请求的URL网址
  • method：请求的方法，GET可以省略（不区分大小写）
  • data：提交数据
axios({
      url: '目标资源地址',
      method: '请求方法',
      data: {
        参数名:值
      }
    }).then((result)=>{
    // 对服务器返回的数据做后续处理
})

        接下来我们使用POST完成一个案例吧：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用请求方法和数据提交</title>
</head>

<body>
  <button class="btn">注册用户</button>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      注册用户：http://hmajax.itheima.net/api/register
      请求方法：POST
      参数名：
        username：用户名（中英文和数字组成，最少8位）
        password：密码  （最少6位）

      目标：点击按钮，通过axios提交用户和密码，完成注册
    */
    document.querySelector('.btn').addEventListener('click', () => {
      axios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'POST',
        data: {
          username: 'qingwan666',
          password: 'qingwan666'
        }
      }).then(result => {
        console.log(result);
      })
    })
  </script>
</body>

</html>

打开网页-点击按钮后效果图->

再次点击按钮效果图->

axios-错误处理

        通过刚才的案例，我们发现第二次点击按钮之后会输出错误信息，因为我们第二次点击注册按钮，原本的账号已经被我们注册过了，在服务器中已经不是唯一的了，所以给我们返回了一个报错信息，提示账号被占用，那么我们如何处理这种情况呢？

        语法：在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参

axios({
    //请求选项
}).then(result=>{
    //处理数据
}).catch(error=>{
    //处理错误
})

        接下来我们继续使用刚刚的案例来完成错误处理的代码，需求：重复注册时通过弹窗提示用户错误原因

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios错误处理</title>
</head>

<body>
  <button class="btn">注册用户</button>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      注册用户: http://hmajax.itheima.net/api/register
      请求方法: POST
      参数名:
        username: 用户名 (中英文和数字组成, 最少8位)
        password: 密码 (最少6位)

      目标: 点击按钮, 通过axios提交用户和密码, 完成注册
      需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户
    */
   document.querySelector('.btn').addEventListener('click', () => {
    axios({
      url: 'http://hmajax.itheima.net/api/register',
      method: 'post',
      data: {
        username: 'qingwan666',
        password: 'qingwan666'
      }
    }).then(result => {
      // 成功
      console.log(result)
    }).catch(error => {
      // 失败
      // 处理错误信息
      console.log(error)
      console.log(error.response.data.message)
      alert(error.response.data.message)
    })
   })
  </script>
</body>

</html>

        点击按钮重复注册后->

        这里就可以看到，重复注册时，浏览器已经能够通过弹窗提示用户了。

HTTP协议

        那么关于Post和Get......，我们要如何在浏览器中看到对应的信息呢？它们的原理是什么呢？接下来我们要开始针对HTTP进行学习。

        HTTP协议：规定了浏览器发送及服务器返回内容的格式

HTTP协议-请求报文

        请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容

        请求报文的组成：

  1. 请求行：请求方法，URL，协议
  2. 请求头：以键值对的格式携带的附加信息，比如：Content-Type
  3. 空行：分割请求头，空行之后的是发送给服务器的资源
  4. 请求体：发送的资源

        接下来我们继续用前面的案例，来看看HTTP的请求报文：

网络->左侧选择名称->标头->原始：这里就可看到请求行与请求头了

再点击负载：即可查看请求体

HTTP协议-响应报文

        响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的内容

        响应报文的组成：

  1. 响应行（状态行）：协议、HTTP响应状态码、状态信息
  2. 响应头：以键值对的格式携带的附加信息，比如：Content-Type
  3. 空行：分割响应头，空行之后的是发送给服务器的资源
  4. 响应体：返回的资源

        HTTP响应状态码：用来表明请求是否成功完成

        以下是各个状态码说明。例如：404（服务器找不到资源）

状态码说明

1xx

信息
2xx成功
3xx重定向消息
4xx客户端错误
5xx服务端错误

        查看响应报文的方式与请求报文大致相同，只需要将请求标头换为响应标头，负载换为响应即可

接口文档

接口文档：描述接口的文章（后端工程师提供）

接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数

举例：下图为登录接口文档

        这里给了我们请求方法、URL，以及需要的参数，那么我们用代码来写一下登入功能：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>接口文档</title>
</head>

<body>
  <button class="btn">用户登录</button>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    document.querySelector('.btn').addEventListener('click', () => {
      // 用户登录
      axios({
        url: 'http://hmajax.itheima.net/api/login',
        method: 'post',
        data: {
          username: 'qingwan666',
          password: 'qingwan666'
        }
      })
    })
  </script>
</body>

</html>

点击登录按钮->

        以上就是接口文档的使用教程啦，接下来我们进入下一步的学习。

AJAX原理

AJAX原理 - XMLHttpRequest

定义：XMLHttpRequest(XHR)对象用于与服务器交互，通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX变成中被大量使用。

关系：axios内部采用XMLHttpRequest与服务器交互

步骤：

  1. 创建XMLHttpRequest对象
  2. 配置请求方法和请求url地址
  3. 监听loadend事件，接收响应结果
  4. 发起请求
const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {
    //响应结果
    console.log(xhr.response)
})
//发送请求
xhr.send()

        我们继续用前面获取地区的案例来演示一下原生XML如何使用：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XMLHttpRequest_基础使用</title>
</head>

<body>
  <p class="my-p"></p>
  <script>
    /**
     * 目标：使用XMLHttpRequest对象与服务器通信
     *  1. 创建 XMLHttpRequest 对象
     *  2. 配置请求方法和请求 url 地址
     *  3. 监听 loadend 事件，接收响应结果
     *  4. 发起请求
    */
    // 1. 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest()

    // 2. 配置请求方法和请求 url 地址
    xhr.open('GET', 'http://hmajax.itheima.net/api/province')

    // 3. 监听 loadend 事件，接收响应结果
    xhr.addEventListener('loadend', () => {
      console.log(xhr.response)
      const data = JSON.parse(xhr.response)
      console.log(data.list.join('<br>'))
      document.querySelector('.my-p').innerHTML = data.list.join('<br>')
    })

    // 4. 发起请求
    xhr.send()
  </script>
</body>

</html>

网页效果图->

接下来我们看看原生XML查询参数的使用案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XMLHttpRequest_查询参数</title>
</head>

<body>
  <p class="city-p"></p>
  <script>
    /**
     * 目标：使用XHR携带查询参数，展示某个省下属的城市列表
    */
    const xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')
    xhr.addEventListener('loadend', () => {
      console.log(xhr.response)
      const data = JSON.parse(xhr.response)
      console.log(data)
      document.querySelector('.city-p').innerHTML = data.list.join('<br>')
    })
    xhr.send()
  </script>
</body>

</html>

再看看如何提交数据：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XMLHttpRequest_数据提交</title>
</head>

<body>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标：使用xhr进行数据提交-完成注册功能
    */
    document.querySelector('.reg-btn').addEventListener('click', () => {
      const xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://hmajax.itheima.net/api/register')
      xhr.addEventListener('loadend', () => {
        console.log(xhr.response)
      })

      // 设置请求头-告诉服务器内容类型（JSON字符串）
      xhr.setRequestHeader('Content-Type', 'application/json')
      // 准备提交的数据
      const userObj = {
        username: 'itheima007',
        password: '7654321'
      }
      const userStr = JSON.stringify(userObj)
      // 设置请求体，发起请求
      xhr.send(userStr)
    })
  </script>
</body>

</html>

        学习原生XML只是为了了解axios的原理，帮助我们更加方便的使用它，继续开始下一步的学习

Promise

        由于AJAX是异步请求，对于有些场景，如果请求失败，那么需要如何操作呢？

        这时候我们就需要Promise来帮助我们管理

定义：Promise对象用于表示一个异步操作的最终完成(或失败)及其结果值。

我们再了解下学习Promise有什么好处：

  • 逻辑更清晰
  • 了解axios函数内部运作机制
  • 能解决回调函数地狱问题
// 1.创建Promise对象
const p = new Promise((resolve, reject) => {
    //2.执行异步任务-并传递结果
    //成功调用：resolve(值) 触发then()执行
    //失败调用：reject(值) 触发catch()执行
})
// 3.接收结果
p.then(result => {
    //成功
}).catch(error => {
    //失败
})

        让我们用代码看看Promise吧：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>认识Promise</title>
</head>

<body>
  <script>
    /**
     * 目标：使用Promise管理异步任务
    */
    // 1. 创建Promise对象
    const p = new Promise((resolve, reject) => {
      // 2. 执行异步代码
      setTimeout(() => {
        // resolve('模拟AJAX请求-成功结果')
        reject(new Error('模拟AJAX请求-失败结果'))
      }, 2000)
    })

    // 3. 获取结果
    p.then(result => {
      console.log(result)
    }).catch(error => {
      console.log(error)
    })
  </script>
</body>

</html>

Promise - 三种状态

作用：了解Promise对象如何关联的处理函数，以及代码执行顺序

  1. new Promise()        此时的Promise状态：待定
  2. resolve()                 此时的Promise状态：已兑现（.then(回调函数)）
  3. reject()                    此时的Promise状态：已拒绝（.catch(回调函数)）

待定(pending)：初始状态，既没有被兑现，也没有被拒绝

已兑现(fulfilled)：意味着，操作成功完成

已拒绝(rejected)：意味着，操作失败

注意：Promise对象一旦被兑现/拒绝，就无法改变状态了

AJAX封装

        现在我们已经学习了XML和Promise，也就是axios内部最核心的两个技术我们都已经掌握，那么现在我们来像axios函数一样进行一个调用。

需求：基于Promise + XHR封装myAxios函数，获取省份列表展示

步骤：

  1. 定义myAxios函数，接收配置兑现，返回Promise对象
  2. 发起XHR请求，默认请求方法为GET
  3. 调用成功/失败的处理程序
  4. 使用myAxios函数，获取省份列表展示

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>封装_简易axios函数_获取省份列表</title>
</head>

<body>
  <p class="my-p"></p>
  <script>
    /**
     * 目标：封装_简易axios函数_获取省份列表
     *  1. 定义myAxios函数，接收配置对象，返回Promise对象
     *  2. 发起XHR请求，默认请求方法为GET
     *  3. 调用成功/失败的处理程序
     *  4. 使用myAxios函数，获取省份列表展示
    */
    // 1. 定义myAxios函数，接收配置对象，返回Promise对象
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        // 2. 发起XHR请求，默认请求方法为GET
        const xhr = new XMLHttpRequest()
        xhr.open(config.method || 'GET', config.url)
        xhr.addEventListener('loadend', () => {
          // 3. 调用成功/失败的处理程序
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })
        xhr.send()
      })
    }

    // 4. 使用myAxios函数，获取省份列表展示
    myAxios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then(result => {
      console.log(result)
      document.querySelector('.my-p').innerHTML = result.list.join('<br>')
    }).catch(error => {
      console.log(error)
      document.querySelector('.my-p').innerHTML = error.message
    })
  </script>
</body>

</html>

网页部分效果图->

再看看axios查询参数的封装案例吧：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>封装_简易axios函数_获取地区列表</title>
</head>

<body>
  <p class="my-p"></p>
  <script>
    /**
     * 目标：封装_简易axios函数_获取地区列表
     *  1. 判断有params选项，携带查询参数
     *  2. 使用URLSearchParams转换，并携带到url上
     *  3. 使用myAxios函数，获取地区列表
    */
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        // 1. 判断有params选项，携带查询参数
        if (config.params) {
          // 2. 使用URLSearchParams转换，并携带到url上
          const paramsObj = new URLSearchParams(config.params)
          const queryString = paramsObj.toString()
          // 把查询参数字符串，拼接在url？后面
          config.url += `?${queryString}`
        }

        xhr.open(config.method || 'GET', config.url)
        xhr.addEventListener('loadend', () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })
        xhr.send()
      })
    }

    // 3. 使用myAxios函数，获取地区列表
    myAxios({
      url: 'http://hmajax.itheima.net/api/area',
      params: {
        pname: '辽宁省',
        cname: '大连市'
      }
    }).then(result => {
      console.log(result)
      document.querySelector('.my-p').innerHTML = result.list.join('<br>')
    })

  </script>
</body>

</html>

最后看看提交数据的封装，我们也就完成对AJAX的学习了：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>封装_简易axios函数_注册用户</title>
</head>

<body>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标：封装_简易axios函数_注册用户
     *  1. 判断有data选项，携带请求体
     *  2. 转换数据类型，在send中发送
     *  3. 使用myAxios函数，完成注册用户
    */
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()

        if (config.params) {
          const paramsObj = new URLSearchParams(config.params)
          const queryString = paramsObj.toString()
          config.url += `?${queryString}`
        }
        xhr.open(config.method || 'GET', config.url)

        xhr.addEventListener('loadend', () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })
        // 1. 判断有data选项，携带请求体
        if (config.data) {
          // 2. 转换数据类型，在send中发送
          const jsonStr = JSON.stringify(config.data)
          xhr.setRequestHeader('Content-Type', 'application/json')
          xhr.send(jsonStr)
        } else {
          // 如果没有请求体数据，正常的发起请求
          xhr.send()
        }
      })
    }
  
    document.querySelector('.reg-btn').addEventListener('click', () => {
      // 3. 使用myAxios函数，完成注册用户
      myAxios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'POST',
        data: {
          username: 'itheima999',
          password: '666666'
        }
      }).then(result => {
        console.log(result)
      }).catch(error => {
        console.dir(error)
      })
    })
  </script>
</body>

</html>

悠然境
关注
  • 20
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一篇文章了解爬虫技术现状
weixin_48606364的博客
06-30 1410
本文全面的分析了爬虫的原理、技术现状、以及目前仍面临的问题。如果你没接触过爬虫，本文很适合你，如果你是一名资深的虫师，那么本文你可能感兴趣。 需求 万维网上有着无数的网页，包含着海量的信息，无孔不入、森罗万象。但很多时候，无论出于数据分析或产品需求，我们需要从某些网站，提取出我们感兴趣、有价值的内容，但是纵然是进化到21世纪的人类，依然只有两只手，一双眼，不可能去每一个网页去点去看，然后再复制粘贴。所以我们需要一种能自动获取网页内容并可以按照指定规则提取相应内容的程序，这就是爬虫。 原理 传统爬.
【Ajax原生+封装+扩展】入门到入土，这一篇就够了
weixin_62542181的博客
06-03 1208
AJAX 全称为，也就是异步的JS和XMLAJAX的使用在网页中非常常见，比如上新闻网，往下刷着刷着，需要加载一会才能显示下面的信息，这就是触发到底事件，浏览器通过AJAX获取到新的数据，然后通过JS创建元素显现在网页中异步的JS相信无需讲解，下面对XML简单进行说明XML 是可扩展标记语言，被设计用来传输和存储数据XML和HTML在结构上类似，不同的是HTML里是预定义标签，如而XML中没有预定义标签，均为自定义标签，用来表示（“形容”）数据如下栗子： 最早AJAX中传送和存储数据用的就是XML，不过，现
AJAX框架汇总
Chendy的专栏
03-04 1117
引此文原出于AJAX Patterns网站的一篇《Ajax Frameworks》的wiki文章，很早前我就注意到，后来在国内也有人翻译了，不过最近发现此wiki还是在不断添加维护中，截止此文发布前，作者又添加了好几个新诞生的AJAX开发工具，所以我决定重新翻译一遍，并且时常注意原文发布状态，一有新的内容立马也翻译过来，做到同步:)此翻译稿很大一部分内容出自国内出现的那个先前版本，我只是对
全面分析ajax跨域访问原因及解决方案
qq_33712668的博客
05-24 732
引言 若想自己实践ajax跨域访问的例子，要编写后台服务代码及前台页面代码。本文不贴实例，简单讲解跨域访问及解决办法原理，使对其有个概念，即提供思路。 什么是ajax跨域问题 前台调用后台服务接口的时候，如果这个接口不是同一个域的就会产生跨域问题。现在的开发模式是前后台分离发展，前后台开发是独立，所以就会出现前台大量调用后台接口的场景，只要不是同一个域就产生跨域问题。 为什么会发生ajax跨域访问...
IM即使通讯 一篇文章足够了
yuezhilangniao的博客
10-08 855
第一网址 ：https://www.cnblogs.com/imstudy/p/9099514.html 第二网址 也是IM的为数不多的社区之一：http://www.52im.net/thread-464-1-1.html 一、前言 IM发展至今，已是非常重要的互联网应用形态之一，尤其移动互联网时代，它正以无与论比的优势降低了沟通成本和交流门槛，对各种应用形态产生了深远影响。做为IM...
一篇文章教你如何捕获前端错误
vivo互联网技术
07-10 1365
本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/E51lKQOojsvhHvACIyXwhw 作者：黄文佳 常见错误的分类 对于用户在访问页面时发生的错误，主要包括以下几个类型： 1、js运行时错误 JavaScript代码在用户浏览器中执行时，由于一些边界情况、本地环境的不可控等因素，可能会存在js运行时错误。 而依赖客户端的某些方...
ajax网址拼接联动查询,ajax联动
weixin_29359133的博客
08-06 317
1、编写html代码，引入ajax文件选择省份湖南广东选择城市2、编写html处理代码//定位省份下拉框，同时添加内容改变事件document.getElementById("provinceID").onchange = function(){//清空城市下拉框中的内容，除第一项外var cityElement = document.getElementById("cityID");cityEl...
一篇文章带你理解爬虫究竟是什么？
码农-Vax天道的时间宝藏
01-10 2054
目录 前言 爬虫的应用场景 爬虫的技术选型 简单的爬虫 脑洞大开的爬虫解决思路 复杂的爬虫设计 音视频爬虫实战 一、先从几个方面来简单介绍我们音视频爬虫项目的体系 二、分步来讲下细节 三、遇到的问题和解决方案 四、最后做下总结 爬虫管理平台 总结 前言 作为冷数据启动和丰富数据的重要工具，爬虫在业务发展中承担着重要的作用，我们业务在发展过程中积累了不少爬虫使用的经验，在此分享给大家，希望能对之后的业务发展提供一些技术选型方向上的思路,以更好地促进业务发展 我们将会从以下.
最新ajax框架集锦
04-28
本篇文章将详细介绍四个重要的Ajax框架：Prototype、Dojo、Scriptaculous和Ext。 1. **Prototype** Prototype是一个JavaScript库，为JavaScript编程提供了许多实用的功能，同时也为Ajax开发提供了强大的支持。它...
达内-ajax jquery
08-07
**Ajax与jQuery详解** 在现代Web开发中，Ajax（异步...同时，随着前端技术的发展，如Vue.js、React.js等框架也提供了更高级的Ajax处理方式，但了解基础的Ajax和jQuery仍然十分必要，它们构成了现代Web开发的重要基石。
dynaTrace_Ajax版使用指南
12-09
【dynaTrace_Ajax版使用指南】是一篇详细介绍如何使用dynaTrace Ajax版本的文档，旨在帮助用户理解和解决Web 2.0和Ajax应用程序中的性能和功能问题。该指南特别强调了在前端页面生命周期解析方面的详细性，适用于...
Java学习材料(499篇文章).
11-28
这四百九十九篇文章可能包括了Java语法、面向对象编程概念、异常处理、集合框架、多线程、输入/输出(I/O)系统、网络编程、数据库连接、Java应用程序接口(API)的使用，以及可能涉及的框架如Struts。 首先，Java语法...
WebService和Ajax总结
11-27
本篇文章将全面探讨这两种技术的原理、应用及其在.NET环境下的实现。 **一、WebService** WebService是一种基于开放标准（如SOAP、WSDL和UDDI）的Web应用程序接口，它允许不同系统间的跨平台数据交换。在.NET框架...
AJAX学习笔记上（学习自用）
最新发布
yayaye717的博客
07-09 937
AJAX学习笔记上（学习自用）
Ajax与Fetch API在Web开发中的性能、用法与未来趋势比较
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
07-07 1043
headers: {},})Ajax和Fetch各有优缺点，适用于不同的场景。Ajax作为一种传统的技术，在旧的应用和环境中仍然广泛使用，并且具有较高的灵活性。而Fetch作为现代JavaScript中的API，提供了更简洁、功能更强大的方式来处理网络请求，特别适合使用在现代JavaScript应用中。开发者可以根据实际需求和场景选择合适的技术。
AJAX-个人版-思路步骤整理版
weixin_65644655的博客
07-06 946
前置知识：老式的web创建工程方法就是创建项目然后添加web工件，然后添加lib依赖如：tomcat,servlet，等。 传统请求 对于传统请求操作：整体流程也就是创建静态页面， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>演示传统请求，以及传统请求的缺点</title> </head> <body>
针对不支持AJAX异步查询的虚拟空间做跨站点查询
chenfei829的专栏
07-08 246
最近在做一个ASP+ACCESS的企业小站，因为有中文、英文版分开不同空间不同域名的需求。原构想用AJAX做异步查询相关质保数据，但上线了才发现新网的虚拟空间不支持AJAX异步，咨询客服后也没有效的方法。后来想到：远程JS应该是每天的，把数组做成JS的数据，再做数据组的展示，也能达到异步查询的功能。一、生成JS数组的ASP代码。二、展示JS数组数据的写法。
AJAX 入门培训PPT
04-29
总的来说，AJAX 入门培训PPT是一份非常全面的介绍AJAX的培训资料，不仅涵盖了AJAX的基本知识，还深入讲解了高级内容，并且对主流的AJAX框架进行了介绍，对AJAX开发有很大的帮助。 AJAX IntroductionBy beansoft@126...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值