AJAX入门

最新推荐文章于 2024-02-13 18:17:54 发布

|惜取少年时

最新推荐文章于 2024-02-13 18:17:54 发布

阅读量93

点赞数

本文链接：https://blog.csdn.net/inv1796915552/article/details/115034564

版权

1 原生AJAX

1.1 AJAX简介

AJAX全称Asynchronous JavaScript And XML，就是异步的js和XML

通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据

AJAX不是新的编程语言，而是一种现有的标准组合在一起使用的新方式

1.2 XML简介

XML 可扩展标记语言

XML 被设计用来传输和存储数据

XML没有预定义的标签，全都是自定义的标签，用来表示一些数据

最先开始时，ajax服务器端给浏览器返回的就是xml格式字符串，现在已经被json取代了

1.3 AJAX的特点

优点
- 可以无需刷新页面与服务器端进行通信
- 允许你根据用户事件来更新部分页面内容
缺点
- 没有浏览历史，不能回退
- 存在跨域问题（同源）
  默认不能使用ajax把数据从一个服务器端发送到另一个服务器端
- SEO（搜索引擎优化）不友好

1.4 原生AJAX请求的基本操作

原生AJAX请求的源代码

前端发送GET请求，后端处理GET请求
前端发送POST请求，后端处理POST请求
后端返回JSON字符串，前端处理JSON字符串
后端要使用方法JSON.stringfy()
前端要使用方法JSON.parse()

特殊问题与解决方案

IE缓存问题
问题描述：IE浏览器会对ajax请求返回的结果进行缓存，下一次进行ajax请求的时候，响应结果会从缓存中读取。这样会对时效性较强的ajax请求有影响。

解决方案：
使用url传参数，让每一次的ajax请求都不相同
xhr.open(“GET”, ‘http://127.0.0.1:8ee0/ie?t=’+Date.now();
AJAX请求超时与网络异常处理
设置timeout，超时之后AJAX取消请求
设置超时回调ontimeout，超时之后执行回调函数
可以设置网络异常回调onerror，当断网或网络状况不良好的时候调用回调函数
通过代码取消AJAX请求
使用XMLHttpRequest对象的abort方法
AJAX重复发送请求
创建一个新的XMLHttpRequest请求对象

2 jQuery中的AJAX

引入jQuery文件

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

ajax请求

$.ajax({
    // url
    url:'http://127.0.0.1:8000',
    // 参数
    data:{a:100,b:200},
    // 请求类型
    type:'GET',
    // 成功的回调
    success:function(data){
        console.log(data);
    }
    // 超时时间
    timeout:2000,
    // 失败的回调
    error:function(data){
        // 失败处理
    }
    // 头信息
    headers:{
        c:300,
        d:400
    }
});

方法的参数是一个对象

3 axios发送AJAX请求

引入axios文件

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>

get请求

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

post请求

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

ajax请求

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 使用fetch函数发送ajax请求

fetch函数是一个全局函数，可以直接调用，fetch函数也能发送ajax请求

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);
});

5 跨域

跨域问题源代码

5.1 同源策略

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

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

违背同源策略就是跨域。

AJAX遵循同源策略，不满足同源策略无法发送AJAX请求。

满足同源策略的时候，url可以简写

5.2 JSONP解决跨域

JSONP是什么？
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get 请求。
JSONP怎么工作的？
在网页有一些标签天生具有跨域能力，比如：img、link、iframe、script。
JSONP就是利用script标签的跨域能力来发送请求的。
JSONP的使用
1. 动态的创建一个script标签
2. 设置script的src，设置回调函数
3. 将script添加到body中
4. 服务器中路由的处理
jQuery中的JSONP

详情见跨域问题源代码

5.3 CORS解决跨域问题

CORS是什么？
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
CORS怎么工作的？
CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

CORS的使用
主要是服务器端的设置：

router.get("/testAJAX" , function (req , res) {
    //通过res 来设置响应头，来允许跨域请求
    //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
    res.set("Access-Control-Allow-Origin","*");
    res.send("testAJAX 返回的响应");
});

补充web知识

1 HTTP协议

超文本传输协议，协议详细规定了浏览器与万维网之间相互通信的规则

1.1 请求报文

浏览器给服务器发送的内容叫作请求报文

重点：格式与参数

行      POST /s?ie=utf-8 HTTP/1.1
        // 请求类型（GET、POST）、URL路径、HTTP协议版本

头      Host: atguigu.com
        Cookie: name=guigu
        Content-type:application/x-www-form-urlencoded
        User-Agent:chrome 93

空行    

体      username=admin&password=admin

1.2 响应报文

服务器给浏览器返回的结果叫作响应报文

行      HTTP/1.1 200 OK
        // HTTP协议版本、HTTP响应状态码、响应状态字符串

头      Content-Type:text/html;charset=utf-8
        Content-length:2048
        Content-encoding:gzip

空行

体      <html>
            <head>
            </head>
            <body>
                <h1>尚硅谷</h1>
            </body>
        </html>

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端口监听中...");
});

|惜取少年时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX入门

1 原生AJAX1.1 AJAX简介AJAX全称Asynchronous JavaScript And XML，就是异步的js和XML通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据AJAX不是新的编程语言，而是一种现有的标准组合在一起使用的新方式1.2 XML简介XML 可扩展标记语言XML 被设计用来传输和存储数据XML没有预定义的标签，全都是自定义的标签，用来表示一些数据最先开始时，ajax服务器端给浏览器返回的就是xml格式字符串，现在已经被json取代了
复制链接

扫一扫