Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）

已于 2022-08-01 10:34:12 修改
阅读量569 收藏 2
点赞数
文章标签： javascript ajax xml
于 2022-06-24 16:47:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44451097/article/details/125435937
版权

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）

AJAX的学习笔记(Node.js环境)

AJAX学习的笔记，主要环境为Node.js

课程地址： https://www.bilibili.com/video/BV1WC4y1b78y

第一章 Ajax概述

1.1 Ajax简介

  • Ajax全称为Asynchronous Javascript And XML，即异步JS和XML
  • 通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
  • AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

1.2 XML简介

  • XML：可扩展标记语言
  • XML：被设计用来传输和存储数据
  • XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据
  • 现在已被JSON取代

1.3 AJAX 的特点

1.3.1 AJAX的优点
  1. 可以无刷新页面与服务端进行通信
  2. 允许你根据用户事件来更新部分页面内容
1.3.2 AJAX 的缺点
  1. 没有浏览历史，不能回退
  2. 存在跨域问题（同源）
  3. SEO不友好（爬虫获取不到信息）

第二章 原生AJAX

2.1 HTTP

约定, 规则
HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

2.1.1 请求报文
行      POST  /s?ie=utf-8  HTTP/1.1 
头      Host: atguigu.com
        Cookie: name=guigu
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83
空行
体      username=admin&password=admin
2.1.2 响应报文
行      HTTP/1.1  200  OK
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
空行    
体      <html>
            <head>
            </head>
            <body>
                <h1>尚硅谷</h1>
            </body>
        </html>

2.2 express框架的基本使用

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response)=>{
    //设置响应
    response.send('HELLO EXPRESS');
});

//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000 端口监听中....");
});

2.3 Ajax GET请求

  • 前端
 //1. 创建对象
 const xhr = new XMLHttpRequest();
 //2. 初始化 设置请求方法和 url
 xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
 //3. 发送
 xhr.send();
 //4. 事件绑定 处理服务端返回的结果
 // on  when 当....时候
 // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
 // change  改变
 xhr.onreadystatechange = function(){
     //判断 (服务端返回了所有的结果)
     if(xhr.readyState === 4){
         //判断响应状态码 200  404  403 401 500
         // 2xx 成功
         if(xhr.status >= 200 && xhr.status < 300){
             //处理结果  行 头 空行 体
             //响应 
             // console.log(xhr.status);//状态码
             // console.log(xhr.statusText);//状态字符串
             // console.log(xhr.getAllResponseHeaders());//所有响应头
             // console.log(xhr.response);//响应体
             //设置 result 的文本
             result.innerHTML = xhr.response;
         }else{

         }
     }
 }
  • 服务器
//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX - 2');
});

2.4 Ajax POST 请求

  • 前端
//1. 创建对象
 const xhr = new XMLHttpRequest();
 //2. 初始化 设置类型与 URL
 xhr.open('POST', 'http://127.0.0.1:8000/server');
 //设置请求头  Content-Type 设置请求体（参数查询字符串）的类型
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 xhr.setRequestHeader('name','atguigu');
 //3. 发送 携带参数 请求体
 xhr.send('a=100&b=200&c=300');
 // xhr.send('a:100&b:200&c:300');
 // xhr.send('1233211234567');

 //4. 事件绑定
 xhr.onreadystatechange = function(){
     //判断
     if(xhr.readyState === 4){
         if(xhr.status >= 200 && xhr.status < 300){
             //处理服务端返回的结果
             result.innerHTML = xhr.response;
         }
     }
 }
  • 服务器
//可以接收任意类型的请求 
app.all('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('HELLO AJAX POST');
});

2.5 JSON 响应

  • 前端
//发送请求
 const xhr = new XMLHttpRequest();
 //设置响应体数据的类型
 xhr.responseType = 'json';
 //初始化
 xhr.open('GET','http://127.0.0.1:8000/json-server');
 //发送
 xhr.send();
 //事件绑定
 xhr.onreadystatechange = function(){
     if(xhr.readyState === 4){
         if(xhr.status >= 200 && xhr.status < 300){
             //
             // console.log(xhr.response);
             // result.innerHTML = xhr.response;
             // 1. 手动对数据转化
             // let data = JSON.parse(xhr.response);
             // console.log(data);
             // result.innerHTML = data.name;
             // 2. 自动转换
             console.log(xhr.response);
             result.innerHTML = xhr.response.name;
         }
     }
 }
  • 服务器
//JSON 响应
app.all('/json-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'atguigu'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

2.6 IE缓存问题

  • 前端
const xhr = new XMLHttpRequest();
xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());
xhr.send();
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status< 300){
            result.innerHTML = xhr.response;
        }
    }
}
  • 服务器
//针对 IE 缓存
app.get('/ie', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO IE - 5');
});

2.7 超时与网络异常

  • 前端
const xhr = new XMLHttpRequest();
//超时设置 2s 设置
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
    alert("网络异常, 请稍后重试!!");
}
//网络异常回调
xhr.onerror = function(){
    alert("你的网络似乎出了一些问题!");
}

xhr.open("GET",'http://127.0.0.1:8000/delay');
xhr.send();
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status< 300){
            result.innerHTML = xhr.response;
        }
    }
}
  • 服务器
//延时响应
app.all('/delay', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 1000)
});

2.8 取消请求

x = new XMLHttpRequest();
x.abort();

2.9 重复请求问题

//获取元素对象
const btns = document.querySelectorAll('button');
let x = null;
//标识变量
let isSending = false; // 是否正在发送AJAX请求

btns[0].onclick = function(){
    //判断标识变量
    if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
    x = new XMLHttpRequest();
    //修改 标识变量的值
    isSending = true;
    x.open("GET",'http://127.0.0.1:8000/delay');
    x.send();
    x.onreadystatechange = function(){
        if(x.readyState === 4){
            //修改标识变量
            isSending = false;
        }
    }
}

第三章 jQuery中的AJAX

3.1 get请求

$.get(url, [data], [callback], [type])
	url: 请求的URL地址
	data: 请求携带的参数
	callback: 载入成功时回调函数
	type：设置返回内容格式，xml、html、script、json、text、_default

3.2 post请求

$.post(url,[data],[callback],[type]
	url:请求的URL地址
	data:请求携带的参数
	callback:载入成功时的回调函数
	type:设置返回内容格式，xml,html,script,json,text,__default

3.3 通用型方法ajax

  • 前端
$('button').eq(2).click(function(){
$.ajax({
    //url
    url: 'http://127.0.0.1:8000/jquery-server',
    //参数
    data: {a:100, b:200},
    //请求类型
    type: 'GET',
    //响应体结果
    dataType: 'json',
    //成功的回调
    success: function(data){
        console.log(data);
    },
    //超时时间
    timeout: 2000,
    //失败的回调
    error: function(){
        console.log('出错啦!!');
    },
    //头信息
    headers: {
        c:300,
        d:400
    }
});
  • 服务器
//jQuery 服务
app.all('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

第四章 axios

4.1 GET

 //GET 请求
 axios.get('/axios-server', {
      //url 参数
      params: {
          id: 100,
          vip: 7
      },
      //请求头信息
      headers: {
          name: 'atguigu',
          age: 20
      }
  }).then(value => {
      console.log(value);
  });

4.2 POST

 axios.post('/axios-server', {
     username: 'admin',
     password: 'admin'
 }, {
     //url 
     params: {
         id: 200,
         vip: 9
     },
     //请求头参数
     headers: {
         height: 180,
         weight: 180,
     }
 });

4.3 通用型

axios({
    //请求方法
    method : 'POST',
    //url
    url: '/axios-server',
    //url参数
    params: {
        vip:10,
        level:30
    },
    //头信息
    headers: {
        a:100,
        b:200
    },
    //请求体参数
    data: {
        username: 'admin',
        password: 'admin'
    }
}).then(response=>{
    //响应状态码
    console.log(response.status);
    //响应状态字符串
    console.log(response.statusText);
    //响应头信息
    console.log(response.headers);
    //响应体
    console.log(response.data);
})

4.4 服务器端

//axios 服务
app.all('/axios-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

第五章 fetch

  • 前端
 fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
     //请求方法
     method: 'POST',
     //请求头
     headers: {
         name:'atguigu'
     },
     //请求体
     body: 'username=admin&password=admin'
 }).then(response => {
     // return response.text();
     return response.json();
 }).then(response=>{
     console.log(response);
 });
  • 服务器端
//fetch 服务
app.all('/fetch-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

第六章： 跨域

6.1 同源策略

同源策略（Same-Origin Policy）最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号 必须完全相同

违背同源策略就是跨域

6.2 如何解决跨域

6.2.1 JSONP

  1. JSONP是什么

    JSONP (JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求

  2. JSONP 怎么工作的？

    在网页有一些标签天生具有跨域能力，比如：img, link, iframe, script

    JSONP就是利用script标签的跨域能力来发送请求的

  3. JSONP的使用

    • 动态的创建一个script标签
 var script = document.createElement("script");
  • 设置script的src，设置回调函数
script.src = "http://locallhost:3000/textAJAX?callback=abc"

6.2.2 CORS

推荐阅读：

  • http://www.ruanyifeng.com/blog/2016/04/cors.html
  • https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

  1. CORS是什么？

    CORS (Cross-Origin Resource Sharing), 跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 等请求。跨域资源共享标准新增了一组 HTTP 首部字段（响应头），允许服务器声明哪些源站通过浏览器有权限访问哪些资源

  2. CORS怎么工作的？

    CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

  3. CORS 的使用

    主要是服务端的设置：

    rounter.get("/testAJAX",function(req, res){

})
卍柠檬百香果
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
AJAX（Asynchronous JavaScript And XML）
m0_47224321的博客
11-06 448
一、AJAX简介 1、AJAX全称为Asynchronous JavaScript And XML，就是异步的JS 和XML。 2、通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 3、AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新的方式。 二、XML简介 1、XML 可扩展标记语言 2、XML 被设计用来传输和存储数据 3、XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 4、现在已
AJAX简介 异步 JavaScript 及 XML（Asynchronous JavaScript And XML）
10-19
AJAX，全称为异步 JavaScript 和 XML，是2005年由Google引领的一种Web开发技术。它并不是一种全新的编程语言，而是利用现有的Web标准来构建更高效、更具交互性的网页应用。通过AJAX，开发者能够在用户与服务器间进行...
4. Ajax入门到精通
weixin_45210011的博客
05-19 488
根据尚硅谷视频写的笔记
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）
weixin_33817333的博客
08-10 533
Ajax技术出现的意义： 　　向服务器请求额外的数据而无序卸载页面，带来更好的用户体验，页面无刷新技术。 1、Ajax的核心是XMLHttpRequest对象（简称XHR），创建XHR对象 如下兼容处理，创建XHR对象 function createXhr(){ if(typeof XMLHttpRequest != undefined){ return ...
Ajax（Asynchronous JavaScript + XML）的定义
welcomejzh的专栏
01-09 585
基于web标准（standards-based presentation）XHTML+CSS的表示； 使用 DOM（Document Object Model）进行动态显示及交互； 使用 XML 和 XSLT 进行数据交换及相关操作； 使用 XMLHttpRequest 进行异步数据查询、检索； 使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James G
Ajax的原理和应用(给公司做所的培训)
虎啸博客
05-27 1633
    在写这篇文章之前，曾经写过一篇关于AJAX技术的随笔，不过涉及到的方面很窄，对AJAX技术的背景、原理、优缺点等各个方面都很少涉及null。这次写这篇文章的背景是因为公司需要对内部程序员做一个培训。项目经理找到了我，并且征询我培训的主题，考虑到之前Javascript、CSS等WEB开发技术都已经讲解过了，所以决定针对AJAX这一块做一个比较系统的培训，所以这篇文章实际上是一个培训的材料。
javascript解析ajax返回的xml和json格式数据实例详解
10-20
在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不刷新整个页面的情况下，与服务器交换数据并更新部分网页内容。本文将深入探讨如何使用JavaScript解析Ajax返回的XML和...
AJAX（Asynchronous JavaScript and XML）技术
04-09
AJAX，全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种用于创建交互式网页应用的网页开发技术。它允许网页在无需重新加载整个页面的情况下，与服务器进行数据交换，从而实现动态更新内容...
ajax（Asynchronous JavaScript And XML）
ESOO
12-26 4905
我们先来看看国内外对ajax的解释： 百度百科： AJAX 指异步JavaScript及XML（Asynchronous JavaScript And XML）。        国内翻译常为“阿贾克斯”和阿贾克斯足球队同音。Web应用的交互如Flickr,Backpack和Google在这方面已经有质的飞跃。这个术语源自描述从基于Web的应用到基于数据的应用的转换。在基于数据的应用中
Ajax （Asynchronous JavaScript and XML）
sage201551的博客
11-20 348
Ajax （Asynchronous JavaScript and XML） 同步： 指发送一个请求,需要等待返回,然后才能够发送下一个请求，有个等待过程； 异步： 指发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待 AJAX涉及技术： JavaScript : 使用 客户端 JavaScript 实现动态效果 DOM : 通过 DOM 技术访问 HTML 文档中...
Asynchronous javascript and xml
浮生或茶
09-02 224
Asynchronous javascript and xml 　　关于Ajax,学习了原生的ajax和JQ的ajax,如今,它已是无处不在,首先,我们知道开发或者使用的软件分为c/s和b/s两种,分别是客户端/服务端和浏览器端/服务端. 前者的优点是响应速度快,但是,更新维护比较麻烦,而后者更新维护方便,开发成本低,不需要安装各种客户端,但是给服...
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
dengjuanshou7445的博客
08-26 368
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 转载于:https:...
JS AJAX
小莓的博客
09-29 166
一、简介 1.功能： 不刷新页面更新网页 在页面加载后从服务器请求数据 在页面加载后从服务器接收数据 在后台向服务器发送数据 2.AJAX 仅仅组合了： 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据） JavaScript 和 HTML DOM（显示或使用数据） 3.工作原理： 网页中发生一个事件（页面加载、按钮点击） 由 JavaScript 创建 XMLHttpRequest 对象 XMLHttpRequest 对象向 web 服务器发送请求 .
Ajax的全称是：AsynchronousJavaScript+XML
CLAMP的专栏
06-09 1306
1.什么是Ajax? Ajax的全称是：AsynchronousJavaScript+XML 2.Ajax的定义： Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。 3.Ajax包括： XHTML和CSS 使用文档对象模型(DocumentObjectModel)作动态显示和交互 使用XML和XSLT做数据交互和操作 使用XMLHttpRequ
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）开学学习在了
不再想当菜鸟了
03-21 1379
AJAX AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 开始学习 AJAX ！ 什么是 AJAX ？ AJAX = 异步 JavaS
Ajax（Asynchronous Javascript And XML）
qq_46492364的博客
07-27 583
文章目录前言一、原生Ajax1.xhr对象2.open方法3.send方法和请求头4.响应状态分析5.同步和异步二、数据格式1.GET方法2.POST方法2.读入数据总结 前言 Ajax就是浏览器提供的一套API，可以通过JavaScript调用，从而实现通过代码控制请求与响应，实现通过JavaScript进行网络编程。 应用场景： （1）按需获取数据 （2）对用户数据进行校验 （3）自动更新页面内容 （4）提升用户体验 一、原生Ajax 原生Ajax的发送请求的步骤 （1）创建一个XMLHttpRequ
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值