AJAX基础知识

最新推荐文章于 2024-08-04 11:18:11 发布

爱俊俊的敏敏

最新推荐文章于 2024-08-04 11:18:11 发布

阅读量334

点赞数 2

分类专栏： JavaScript 文章标签： html5

本文链接：https://blog.csdn.net/weixin_44521686/article/details/107885390

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

XMLHttpRequest对象

用于在后台与服务器交换数据
功能
- 在服务端允许的情况下，可以发送跨域请求
- 支持发送和接收二进制数据，可以发送视频、音频等
- 新增formData对象，支持发送表单数据
- 发送和获取数据时，可以获取进度信息
- 可以设置请求的超时时间，超时多长时间后断开连接

新建XMLHttpRequest对象

try{
    var request=new XMLHttpRequest();
}catch(error){
    var request=new ActiveXObject("Microsoft.XMLHTTP");//IE 7以下 
}

打开要发送的地址通道

request.open(“GET”,地址，同步/异步)；
- 第三个参数是***async***，默认为true，如果设置false是同步，不需要事件侦听
```
xhr.addEventListener("load",loadHandler);
xhr.open("GET","http://localhost:4006user=xietian&age=30");//异步
xhr.open("GET","http://localhost:4006user=xietian&age=30",false);//同步
```
- 第四个参数是user，第五个参数是password
  - 用户名密码
给XMLHttpRequest对象增加侦听器，用来侦听各种情况，包括各种链接状态

request.addEventListener(“load”,侦听函数);//发送数据给打开的地址，
如果没有要发送的内容直接send()

request.send();

URL地址

GET时带参数，POST不带参数，如果希望每次请求都是最新请求就需要加时间戳
URL地址中通过目录方式带入请求的类型

加载本地文件

配置文件
- 刚启动时加载的数据，可以理解为将变量写在了外面，在使用时读取到外部的变量即可使用，只需要修改外部的配置文件，就可以执行不同的代码
- 热加载
  - 数据具有热更新和冷更新
    - 冷更新
      - 更新软件时需要重新下载覆盖原有软件
      - 用户在每一次冷更新时，会丢失用户
    - 热更新
      - 在APP外面有一个配置文件，配置文件中有当前版本号和当前文件，每一个文件都有一个hash，包含文件大小和更新时间，当打开软件时，会拿当前配置表中的数据与服务器先比对版本号是否相同，版本号相同的情况下，就不比对直接进入，版本号不一样时，比对列表中哪一个文件的hash值不同，当hash值不同时，去服务器拉取hash对应的文件，覆盖当前文件后直接进入

加载json文件

var xhr=new XMLHttpRequest();
xhr.addEventListener("load",loadHandler);
xhr.open("GET","./config/a.json");
xhr.send();
function loadHandler(){
    var obj=JSON.parse(xhr.response);
    document.documentElement.style.backgroundColor=obj.backgroundColor;
}

加载xml文件

import ImageSpriteXML from "./js/ImageSpriteXML.js"
var arr=["bbb"]
ImageSpriteXML.init(arr,"./img/",loadFinish);
function loadFinish(){
    var div = ImageSpriteXML.getImg("hero_fly_2");
    document.body.appendChild(div);
}

progress事件
```
xhr.addEventListener("progress",progressHandler);
function progressHandler(e){
	//加载的顺序流
    console.log(e);
}
```
- 如果progress事件有两个及以上的值，说明加载速度不同
- loaded
  - 当前加载的值
- total
  - 一共有多少
- loaded/total*100
  - xml文件和图片都可以这么加载

加载本地文件必须使用GET方式

消息头

响应头

写入消息头

//服务端写响应头
res.writeHead(200,{
	content-type":"text/html;charset=utf-8",
    // "Access-Control-Allow-Headers":"*",//请求头跨域
    "Access-Control-Allow-Origin":"*",//  cors跨域
});

获取响应头

无法获取自定义响应头

xhr.getAllRespanseHeaders();//客户端获取所有响应头
xhr.getRespanseHeaders("content-type");//获取指定的响应头

请求的url地址
端口号
安全协议
允许跨域
页面解析类型
时间
解析

请求头
- send()前，open()后写入请求头
```
xhr.open("GET","http://localhost:4006?user=hm&age=18");
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//客户端写请求头
xhr.send();//将消息返回给客户端
```
  - 转码，将当前格式转为www表单的url地址格式，发送给PHP，PHP不能接收客户端发来的POST，无法解析，这个请求头是让PHP可以解析当前的POST数据
```
req.headers;//服务端获取请求头
```
```
	- 可以获取到所有的请求头
```
- 消息头如果有不同的数据，且消息数据的端口号不同，也会产生跨域问题——>消息头跨域
- 自定义请求头
  - GET方式允许发送自定义消息头头
  - POST方式允许发送原本的消息头头但不允许自定义消息头，发送自定义消息头时，必须在服务端设置响应头请求同意
```
"Access-Control-Allow-Header":"*"
```
  - 解决消息头跨域问题
消息头原理
- 发送消息时，握手成功后会首先发一个头消息，头消息一定在open后，send前，发送消息之前发送消息头的目的是对于当前马上要发的一些消息体的概念，例如编码、post消息的长度等
请求头的目的
- 让服务端能够正确解析消息实际的内容，如果消息发送过去时没有实际的消息，GET方式下，没有实际消息，允许发送消息头，可以在头部拿到一些隐藏数据，POST形式不能在头部发送隐藏信息，所以POST方式不允许发送自定义请求头

send()

可以什么都不发送
```
void send()
```
发送ArrayBuffer二进制流数据，类型化数组
```
void send(ArrayBuffer data);
```
文档对象
```
void send(Document data); 
```
二进制大对象，可以存储二进制文件的容器
```
void send(Blob data);
```
文本数据
```
void send(DOMString data);
```
数据对象，直接封装内容，
```
void send(FormData data);
```
- 可以将FormData数据放在send()中，直接发送给服务器，然后服务器进行解析

ajax其他内容

timeout事件

设置超时时间

超过多长时间没有返回，进行重发，一般会重发3次，即断线重连

var time=0;
function ajax(){
    var xhr=new XMLHttpRequest();
    xhr.addEventListener("load",loadHandler);
    xhr.addEventListener("timeout",timeoutHandler)
    xhr.open("GET","http://localhost:4006?user=hm&age=18");
    	xhr.timeout=2000;
        xhr.send();
}
function loadHandler(e){
}
function timeoutHandler(e){
	//超时后执行
    if(time<3) ajax();
    else this.abort();//终止加载
}

readystatechange事件
```
var xhr=new XMLHttpRequest();
xhr.addEventListener("readystatechange",readyHandler);
xhr.open("GET","http://localhost:4006?user=hm&age=18");
xhr.send();
function readyHandler(e){
	if(xhr.readyState===4 && xhr.status===200){
    	console.log(xhr.response);
     }
}
```
- xhr.readyState
  - 准备状态，当我们触发某个内容时，就会改变一次状态
  - 分为5个状态
    - 0 UNSEND
      - 代理被创建，但未调用open()方法
    - 1 OPENED
      - open()方法已经被调用
    - 2 HEADERS_RECEIVED
      - open()方法已经被调用，并且头部和状态已经可获得
    - 3 LOADING
      - 下载中，responseText属性已经包含部分数据
    - 4 DONE
      - 下载操作已经完成
- xhr.status
  - 响应消息状态
  - 5类
    - 信息 100-101
    - 成功 200-206
    - 重定向 300-307
    - 客户端错误 400-417
    - 服务器错误 500-505

跨域

cors跨域

jsonp访问

与ajax没有关系

原理

图片、链接、script链接地址都不需要考虑跨域问题

var http=require("http");
var querystring=require("querystring");
var server=http.createServer((req,res)=>{
    req.on("data",_data=>{

    });
    req.on("end",()=>{
        console.log(req.url);
        res.writeHead(200,{"content-type":"text/html;charset=utf-8"});
        res.write("abc()");
        res.end();
    });
});
server.listen(4008);


// var abc=3
function abc(){
	console.log("asaa");
}
var script=document.createElement("script");
script.src="http://localhost:4008?a=3&b=4";
document.body.appendChild(script);

通过script的src指向服务端，服务端通过write()写回的内容，就是script标签中执行的脚本语句

websdcket
- 第一次通信时，先把允许通信的XML文件发送给服务器，服务器认为是可行的，就会允许通信
- crossdomain.xml
  - 跨域策略，一般在顶级域下
正向代理和反向代理
- 客户端向服务器通信时，需要考虑到地址(域)安全性的问题，但是服务器向服务器通信时，不需要考虑地址(域)的安全性问题，所以通常会在本地计算机创建一个服务器，本地客户端先向本地服务器进行通信，本地服务器向其他服务器通信，返回消息后，再由本地服务器向客户端返回消息，本地服务器就是代理服务器。

爱俊俊的敏敏

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
AJAX基础知识

XMLHttpRequest对象用于在后台与服务器交换数据功能在服务端允许的情况下，可以发送跨域请求支持发送和接收二进制数据，可以发送视频、音频等新增formData对象，支持发送表单数据发送和获取数据时，可以获取进度信息可以设置请求的超时时间，超时多长时间后断开连接新建XMLHttpRequest对象try{ var request=new XMLHttpRequest();}catch(error){ var request=new ActiveXOb
复制链接

扫一扫

专栏目录