小工具知识网

当前位置: 首页 > 行业知识 > AJAX的学习笔记

行业知识

AJAX的学习笔记

2026-11-09 07:36:09 来源:互联网转载

前言

AJAX:全程Asynchronous JavaScript And XML 就是异步JS和XML

()

又称 阿贾克斯

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

()
XML(现在已经被JSON取代了)

XML 可扩展标记语言 用来传输和存储数据

HTML是预定义标签,而XML中没有预定义标签,全是自定义标签用来表示一些数据

AJAX特点:
优点缺点
1.无需刷新页面与服务器端进行通信 2.允许根据用户事件更新部分页面内容1.没有浏览历史 2.存在跨域问题 3.SEO不友好

HTTP

HTTP (hypetext transport protocol) 协议 (超文本传输协议),协议详细规定了浏览器和万维网服务器之间相互通信的规则 ——约定,规则

请求报文requese

重点是格式与参数

行      POST / s?ie=utf-8  HTTP/1.1头      Host: atguigu.com        Cookio: name=guigu        Content-type: application/x-www-form-urlencoded        User-Agent: chrome 83空行体      username=admin&password=admin
响应报文response

行      HTTP/1.1  200  OK
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
空行
体     
           
           
           
               

尚硅谷


           
       

AJAX基本操作

1.创建对象

const xhr = new XMLHttpRequest();

2.初始化 设置请求方法和url

xhr.open('GET', 'http://127.0.0.1:8000/server'); GET或者POST两种请求方式

3.发送

xhr.send();

4.事件绑定 处理服务端返回的结果

xhr.onreadystatechange = function() { //判断 if (xhr.readyState === 4) {     if (xhr.status >= 200 && xhr.status   

onreadystatechange事件:

on when当...时候

readystate 是xhr对象中的属性,表示状态 0 1 2 3 4

0——未初始化 1——open方法调用完毕 2——send方法调用完毕

3——服务端返回了部分结果 4——服务端返回了所有结果

change 改变

axios

btn[2].onclick = function() {     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);         //响应状态码         console.log(response.status);         //响应状态字符串         console.log(response.statusText);         //响应头信息         console.log(response.headers);         ///响应体         console.log(response.data);     })}

同源策略

来自同一个服务

JSONP(JSON with Padding)

是一个非官方的跨域解决方案

写在最后:这是在学习尚硅谷b站课程ajax时写的笔记

上一篇:巨兽战场服务器怎么开启?

下一篇:联想电脑主机一体机c455怎么拆