Ajax笔记

最新推荐文章于 2023-01-12 20:48:19 发布
最新推荐文章于 2023-01-12 20:48:19 发布
阅读量81 收藏
点赞数
文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liwei11116/article/details/127207821
版权

Ajax笔记

特点

1、优点

  1. 可以无需刷新界面而与服务器进行通信

  2. 允许根据你用户事件来更新部分页面内容

2、缺点

  1. 没有浏览历史，不能回退

  2. 存在跨域问题（同源）

  3. SEO不友好

ajax的使用

一、基本使用

  // 引入express
  const express = require('express');
  // 创建应用对象
  const app = express();
  // 创建路由规则
  // request 是对请求报文的封装
  // response 是对响应报文的封装
  app.get('/',(request,response)=>{
      // 设置响应
      response.send("hello express");
  });
  // 4、监听端口启动服务
  app.listen(8000,()=>{
      console.log("服务已经启动,8000端口监视中····");
  });

二、Ajax发送GET请求

1、service.js

  
  // 引入express
  const express = require('express');
  // 创建应用对象
  const app = express();
  // 创建路由规则
  // request 是对请求报文的封装
  // response 是对响应报文的封装
  app.get('/service',(request,response)=>{
      // 设置响应头 设置允许跨越
      response.setHeader('access-Control-Allow-Origin','*')
      // 设置响应体
      response.send('hello ajax')
  });
  // 4、监听端口启动服务
  app.listen(8000,()=>{
      console.log("服务已经启动,8000端口监视中····");
  });

2、1-GET.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>Ajax GET 请求</title>
      <style>
          #result{
              width: 200px;
              height: 100px;
              border: solid 1px #990;
          }
      </style>
  </head>
  <body>
      <button>点击发送请求</button>
      <div id="result"></div>
      <script>
          // 获取button元素
          const btn = document.getElementsByTagName('button')[0];
          const result = document.getElementById('result');
          // 绑定事件
          btn.onclick = function(){
              // 1、创建对象
              const xhr = new XMLHttpRequest();
              // 初始化 设置请求方法和 url
              xhr.open('GET','http://127.0.0.1:8000/service');
              // 3、发送
              xhr.send();
              // 事件绑定 处理服务端返回的结果
              // on when当...什么时候
              // readystate 是xhr对象中的属性，表示状态 0 1 2 3 4
              // change 改变的时候出发
              xhr.onreadystatechange = function(){
                  // 判断（服务器返回了所有结果）
                  if (xhr.readyState === 4) {
                      // 判断状态码 200 404 403 401 500
                      if (xhr.status >=200 && xhr.status <=300) {
                          // 处理结果 行 头 空行 体
                          // 1、响应行
                          // console.log(xhr.status);//状态码
                          // console.log(xhr.statusText);//状态字符串
                          // console.log(xhr.getAllResponseHeaders());//所有响应头
                          // console.log(xhr.response);//响应体
                          // 设置网页文本框的内容
                          result.innerHTML = xhr.response;
                      } else {
                          
                      }
                  }
              }
          }
      </script>
  </body>
  </html>

3、在Ajax请求中设置url的参数

  
  xhr.open('GET','http://127.0.0.1:8000/service?a=100&b=200&c=300');

三、Ajax发送POST请求

service.js

  
  // 引入express
  const express = require('express');
  // 创建应用对象
  const app = express();
  // 创建路由规则
  // request 是对请求报文的封装
  // response 是对响应报文的封装
  app.get('/service',(request,response)=>{
      // 设置响应头 设置允许跨越
      response.setHeader('access-Control-Allow-Origin','*');
      // 设置响应体
      response.send('hello ajax');
  });
  // 4、监听端口启动服务
  app.listen(8000,()=>{
      console.log("服务已经启动,8000端口监视中····");
  });

2、2-POST.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>Ajax POST 请求</title>
  </head>
  <style>
      #result{
          width: 200px;
          height: 100px;
          border: 1px solid #090;
      }
  </style>
  <body>
      <div id="result"></div>
      <script>
          //获取元素对象
          const result = document.getElementById('result');
          // 绑定事件
          result.addEventListener('mouseover',function(){
              // 创建对象
              const xhr = new XMLHttpRequest();
              // 初始化 设置类型与url
              xhr.open('POST','http://127.0.0.1:8000/service');
              // 发送
              xhr.send();
              // 绑定事件
              xhr.onreadystatechange = function(){
                  // 判断
                  if (xhr.readyState === 4) {
                      if(xhr.status>=200 && xhr.status <300){
                          // 处理服务端返回的结果
                          result.innerHTML = xhr.response;
                      }
                  }
              }
          });
      </script>
  </body>
  </html>

3、在Ajax中POST请求中设置url的参数（请求体）

  
  xhr.send('a=100& b=200& c=300');

4、Ajax设置请求头

  • 预定义

      
  xhr.open('POST','http://127.0.0.1:8000/service')
  // 设置请求头
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

  • 非预定义

      
  xhr.setRequestHeader('name','itxiaoli');

    service.js

      
  //可以接受任何类型的请求
  app.all('/service',(request,response)=>{
      // 设置响应头 设置允许跨越
      response.setHeader('access-Control-Allow-Origin','*')
      //响应头
      response.setHeader('access-Control-Allow-Headers','*')
      // 设置响应体
      response.send('hello ajax POST')
  });

    四、Ajax服务端响应JSON数据

    service.js

      
  app.all('/json-service',(request,response)=>{
      // 设置响应头 设置允许跨越
      response.setHeader('access-Control-Allow-Origin','*');
      // 设置响应体
      response.send('hello ajax JSON');
  });

    3-JSON.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>JSON数据</title>
  </head>
  <style>
      #result{
          width: 200px;
          height: 100px;
          border: 1px solid #090;
      }
  </style>
  <body>
      <div id="result"></div>
      <script>
          // 获取数据元素
          const result = document.getElementById('result');
  ​
          // 绑定事件
          window.onkeydown = function() {
  ​
              // 发送请求
              const xhr = new XMLHttpRequest();
  ​
              // 初始化
              xhr.open('GET','http://127.0.0.1:8000/json-service');
  ​
              // 发送
              xhr.send();
  ​
              // 事件绑定
              xhr.onreadystatechange = function() {
                  if(xhr.readyState === 4){
                      if(xhr.status >=200 && xhr.status<300){
                          result.innerHTML = xhr.response;
                      }
                  }
              }
          }
      </script>
  </body>
  </html>

    五、响应一个数据

      
  //相应一个数据
  const data = {
      name : 'itxiaoli'
  };

    1、对对象进行字符串转换

      
  // 对对象进行字符串转换
  let str = JSON.stringify(data);
  ​
  // 设置响应体
  response.send(data);

    2、手动对数据进行转换

      
  let data = JSON.parse(xhr.response);
  console.log(data);
  result.innerHTML = data.name;

    3、自动转换

      
  // 设置响应体数据的类型
  xhr.responseType = 'json';

五、Ajax的IE缓存的处理

  
   xhr.open('GET','http://127.0.0.1:8000/json-service？t='+Data().now());

六、请求超时与网络异常

  
  //超时2S设置(取消)
  xhr.timeout = 2000;
  ​
  //超时回调
  xhr.ontimeout = function(){
    alter("连接超时，请稍后重试！")
  }
  ​
  //网络异常回调
  xhr.onerror = function(){
    alter("你的网络似乎出现了问题，请检查你的网络！");
  }

七、Ajax取消请求

  
  xhr.abort();

八、重复请求问题

  
  //标识变量
  let isSanding = false; //判断是否正在发送Ajax请求
  ​
  btns[0].onclick = function(){
    //判断标识变量
    if(isSanding){
      xhr.abort(); //如果正在发送，则取消Ajax请求
    }
    const xhr = new XMLHttpRequest();
    isSending = ture;
    xhr.open('GET','http://127.0.0.1.8000/service');
    xhr.send();
    xhr.onreadystatechange = function(){
      if(xhr.readyState === 4){
        //修改标识符变量
        isSending = false;
      }
    }
  }

九、jQuery通用发送Ajax请求

  
  $.ajax({
  //url
  url:''http:127.0.0.1:8000/service',
  //参数
  data:{a:100,b:200},
  //请求类型
  type:'GET',
  //响应体结果
  dataType : 'json',
  //成功的回调
  success: function(){
  console.log(data),
  }
  //超时时间
  timeout: 2000,
  //失败的回调
  error：function(){
  console.log('出错了！！！')；
  }，
  //头信息
  headers:{
  c:300,
  d:400
  }
  })；

十、AXIOS发送Ajax请求

  
  //配置 baseURL
  axios.defaults.baseURL = 'http://127.0.0.1:8000';
  btn[0].onclick = function(){
  //GET请求
  axios.get('/axios-service', {
  //url参数
  params:{
  id:100,
  vip:1
  },
  //头信息
  headers:{
  name:'itxiaoli',
  age:20
  },
  //请求体参数
  data:{
  username:'root',
  passworld:'root'
  }
  }).then(response=>{
  console.log(response);
  //响应状态码
  console.log(response.status);
  //响应状态字符串
  console.log(response.statusText);
  //响应头信息
  console.log(response.headers);
  //响应体
  console.log(response.data);
  })
  }

十一、fetch函数发送Ajax请求

  
  btn.onclick = function(){
  fetch('http://127.0.0.1:8000',{
  //请求方法
  method:'POST',
  //请求头
  headers：{
  name:'itxiaoli'
  },
  //请求体
  body:'username = admin&password=root'
  }

十二、跨域

1、JSONP(非官方，只能发送get请求)

  • 原生JSONP跨域的实现

  
  //声明handle函数
  function handle(data){
    input.style.border = "solid 1px #f00";
    //修改p标签的提示文本
    p.innerHTML = data.msg;
  }
  ​
  //绑定事件(失去焦点时)
  input.onblur = function(){
    //获取用户输入的值
    let username = this.value;
    //向服务器端发送请求，检测用户是否存在
    //1、创建script标签
    const script = document.creatElement('script');
    //2、设置标签的src属性
    script.src = 'http://127.0.0.1:8000/check-username';
  }
  
  //检测用户是否存在
  app.all('check-username',(requst,reponse))=>{
    const data = {
      exist:1,
      mag = '用户名已存在'
    }；
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end('handle(${str})');
  }

  • jQuery发送JSONP

  
  $('button').eq(0).click(function(){
    //callback参数必须写
    $.getJSON('http://127.0.0.1:8000/jquery-jsonp-service?callback=?)',function(data){
            $('#result').html('
                                  姓名：$(data.name)<br>,
                                 校区：$(data.city)
                              ')  
     });
  })
  
  app.all('jquery-jsonp-service',(requst,reponse))=>{
    const data = {
      name:'itxiaoli',
      city:['哈尔滨'，'通辽']
    }；
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收callback参数
    let cb = request.query.callback;
    //返回结果
    response.end('${cb}(${str})');
  }

2、CORS(官方)

  
  // 设置响应头 设置允许跨越
  response.setHeader('access-Control-Allow-Origin','*');
  response.setHeader('access-Control-Allow-Headers','*');
  response.setHeader('access-Control-Allow-Method','*');

ITXiaoli11
关注
AJAX笔记
03-22
**AJAX笔记** 在网页开发中，AJAX（Asynchronous JavaScript and XML）是一种不刷新整个页面的情况下，与服务器交换数据并更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，...
ajax笔记ajax笔记ajax笔记
04-03
ajax笔记
原生js、JQuery、axios实现Ajax异步通信以及解决跨域
weixin_46734347的博客
03-20 2225
Ajax简介 Ajax全称为 Asynchronous JavaScript And XML 就是异步的JS和XML XML：可扩展标记语言 被设计用来传输和存储数据 优点： 可以无刷新页面与服务器进行通信 允许你根据用户时间来更新部分页面内容 缺点： 没有浏览历史，不能回退 存在跨域问题 SEO不友好（搜索引擎优化） Ajax返回的状态 0 - (未初始化) 还没有调用send()方法 1 - (载入)已调用send()方法，正在发送请求 2 - (载入完成)send()方法执行完
vue-axios跨域配置
weixin_30918415的博客
09-17 352
一、vue安装axios： 简介： vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用。 功能特性1、在浏览器中发送 XMLHttpRequests 请求2、在 node.js 中发送 http请求3、支持 Promise API4、拦截请求和响应5、转换请求和响应...
Axios跨域配置
deer_233的博客
01-12 493
Axios跨域配置
怎么解决ajax异步问题,用javascript实现的ajax异步问题
weixin_28868927的博客
08-05 416
各位好，我用javascript写的ajax异步对象，发送异步请求，在同一个页面，连续发送连个异步请求，但是因为在第一异步请求，没处理完，第二异步请求已经发送，我查过资料，说js里面的都是单线程的发送异步请求，这样我第一个异步请求就呗Abort了挂起了，请问我该如何更好的处理这个问题，我现在的处理方式是当我发送第一异步请求了，第二个异步请求，我放在一个定时器里面，让它在500毫秒后才执行，这样就不...
黑马程序员Ajax笔记
05-26
在黑马程序员的Ajax笔记中，我们将深入探讨这一技术的各个方面。 ### 1. Ajax基本原理 Ajax的核心是JavaScript对象XMLHttpRequest，它允许浏览器在后台与服务器通信。通过创建XMLHttpRequest对象、打开连接、发送...
Ajax笔记.pdf
最新发布
01-25
Ajax笔记 Ajax是Asynchronous JavaScript and XML的缩写，是一种基于JavaScript和XML的异步通信技术。它的出现是为了解决传统Web开发中存在的问题，如需要刷新整个页面来获取后台信息，给用户带来不好的体验。Ajax...
axios常见配置选项 跨域
01-03
文章目录常见配置选项实际项目中的简化写法并发请求多个请求接口实际项目生命周期中使用axios 数据存入data()模块封装拦截器axios的post的请求头Content-Typeaxios 全局配置接口函数的封装配置设置代理解决请求跨域vue前端跨域 axios : 基于http客户端的promise，面向浏览器和nodejs axios 依赖原生的 ES6 Promise 实现而被支持. 安装 1.使用npm: npm install axios 2.使用taobao源: cnpm install axios 3.使用bower: bower install a
axios中cookie跨域及相关配置示例详解
08-28
自从入了 Vue 之后，一直在用 axios 这个库来做一些异步请求。下面这篇文章主要给大家介绍了关于axios中cookie跨域及相关配置的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起看看吧。
用原生js 实现 Vue axios AJAX 跨域调用 jsonp
代码笔记
05-19 1204
Vue axios 本身是不支持调用 jsonp 的，我在不添加第三方js框架(如jQuery)的前提下，实现 axios 跨域调用 jsonp
vue axios 跨域配置
孔的博客
12-30 419
devServer: { disableHostCheck: true, host:'http://127.0.0.1',// 前端地址 port:'8020', proxy: { '/api':{ target:'http://127.0.0.1:8080',// 后端地址 changeOrigin:true, pathRe
Axios跨域请求配置
司马班如
11-05 4364
      React中用到的网络代理请求是axios，它在使用的过程中，会存在一些问题，今天就分享我遇到过的一些问题 1、跨域请求后台配置： 在SpringBoot项目中的，需要实现WebMvcConfigurer，并且重写addCrosMappings方法 @Configuration public class ApplicationAutoConfiguration implements WebMvcConfigurer { @Override public
JavaScript中的异步和跨域
jggujhg的博客
03-18 742
异步指的是每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。 ...
axios跨域设置
qq994877603的博客
01-04 135
module.exports = { devServer: { port: '8080', proxy: { '/apis': { target: 'http://localhost:50000/api/', ws: true, changeOrigin: true, pathRewrite: { '^/apis': '' } } } } } 用ax.
vue使用axios、axios配置跨域
weixin_34290631的博客
05-07 1329
2019独角兽企业重金招聘Python工程师标准>>> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值